Слайдеры для изображений js. Создание самого слайдера
Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.
В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.
Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?
- Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
- Возможность вставлять в слайды как изображения, так и любой HTML – код.
- Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
- Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.
Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).
Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.
Здесь содержание слайда 1 Здесь содержание слайда 2 Здесь содержание слайда 3
Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.
#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; z-index:3; outline:none !important;} #prewbutton{left:10px;} #nextbutton{ right:10px; background:url(arrowBg.png) right center no-repeat;} #prewbutton:hover, #nextbutton:hover{ opacity:1;}
Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов (.slide).
И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.
Селектор.sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем.sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.
Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.
Давайте теперь рассмотрим сам сценарий:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) { $(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $(".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $(".slide").eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); } if(hwNeedLinks){ var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function(){ animSlide("next"); }) $("#prewbutton").click(function(){ animSlide("prew"); }) } var $adderSpan = ""; $(".slide").each(function(index) { $adderSpan += "" + index + ""; }); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, hwTimeOut);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); });
Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).
Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода.css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все.hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.
Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.
Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.
Обратите внимание, что методу.fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.
Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода.hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().
Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом.slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:
0 1 2 3
Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.
В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):
0
1
2
3
Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.
На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (). Есть два варианта доработки. Либо обернуть весь js код:
(function ($) { // Весь ваш код... })(jQuery);
или заменить символы $ во всём скрипте на jQuery. Вот так:
JQuery(document).ready(function(e) { jQuery(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow){ // и т. д.
В примере уже реализован первый метод.
Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!
Добавлено: Это ещё не всё. Читайте . Там мы добавим новые возможности к данному скрипту.
Сегодня мы рассмотрим как можно сделать слайдер на jQuery своими руками.
Слайдер (или как некоторые его называют Ротатор) - это блок на сайте, который состоит из набора картинок со ссылками (и возможно текстом), которые время от времени меняют друг друга.
Итак. Для начала нам нужно сделать блок, который будет содержать все картинки (назовём его viewport, так сказать «область видимости слайдера»).
В него положим ненумерованный список (ul) для того, чтобы можно было удобно хранить все слайды в одном месте (в принципе можно использовать любой блочный контейнер с поддержкой внутренних элементов).
Ну и соответсвенно сами слайды, которые будут находится в слайдер на jQuery.
Вот такой вот HTML должен получится:
- Slide 1
- Slide 2
- Slide 3
Сразу пропишем CSS, чтобы свёрстанный HTML правильно работал.
Итак:
1) нам нужно сделать так, чтобы viewport показывал только нужный в данный момент контент, а остальные слайды были скрыты
2) чтобы контейнер для слайдов (ul, который лежит внутри viewport) мог спокойно двигаться влево и вправо
3) чтобы слайды (которые у нас сделаны в виде элементов списка располагались друг за другом слева направо).
Вот CSS, с ним всё просто: overflow:hidden для vieport, position: absolute для ul и float: left для li.
Viewport{ width: 300px; height: 100px; overflow: hidden; position: relative; } .slidewrapper{ position: absolute; left: 0; top: 0; height: 100px; margin: 0; padding: 0; } .slide{ width: 300px; height: 100px; float: left; list-style: none; margin: 0; padding: 0; background: #ff0000; } .second{ background: #00ff00; } .third{ background: #0000ff; }
Для примера выбарны размеры viewport и слайдов 300х100 пикселей (но они обязательно должны совпадать у vieport и слайда). Классы first, second и third - используются только для того, чтобы задать цвета слайдов для наглядности, в вашей реализации этих классов может и не быть.
JS. Слайдер на jQueryТеперь перейдём к jQuery коду, который сам по себе также не представляет из себя ничего сверх-сложного.
Нам нужно сделать так, чтобы слайды пролистывались с определённым периодом времени (javascript setInterval), и чтобы при наведении на слайд, движение приостанавливалось (чтобы человек мог прочитать содержимое слайда).
Вот и получаем такой вот jQuery код:
Var slideWidth=300; var sliderTimer; $(function(){ $(".slidewrapper").width($(".slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport").hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,1000); }); }); function nextSlide(){ var currentSlide=parseInt($(".slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(".slidewrapper").children().size()) { currentSlide=0; } $(".slidewrapper").animate({left: -currentSlide*slideWidth},300).data("current",currentSlide); }
По порядку:
1) объявляем переменную = длинне слайда
2) объявляем переменную-хендлер таймера (который будет отсчитывать период смены слайдов)
3) когда страница загрузится запускаем таймер и привязываем действия на наведение мышки на слайд (чтобы приостановить движение слайдов под мышкой)
4) ставим длинну ul-контейнера = длинне слайда*на количесвто слайдов (чтобы слайды не перекидывались на 2-рую строку).
5) пишем функцию, которая и делает смену слайдов (проверяем где сейчас находимся - на каком слайде, при помощи аттрибута data-current ul-контейнера; увеличиваем текущую позицию; проверяем, чтобы не вылезала за рамки всех слайдов; смещаем слайдер-контейнер влево на нужное количество пикселей).
Мы разработали рабочий вариант слайдер на jQuery, который работает, и можно легко применить в работе над сайтом.
На последок код выложен на jsfiddle.net, где можно поклацать и поиграться.
http://jsfiddle.net/FUxWc/
Если будут вопросы - комменты открыты, ответим, поможем, подскажем.
Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов, особенно большой популярностью пользуется адаптивный дизайн. И в связи с этим появилось не мало новых адаптивных jquery слайдеров
, галерей, каруселей или подобных плагинов.
1. Responsive Horizontal Posts Slider
Адаптивная горизонтальная карусель с детальной инструкцией по установке. Выполнена она в простом стиле, но вы можете ее стилизовать под себя.
2. Слайдер на Glide.js
Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.
3. Tilted Content Slideshow
Адаптивный слайдер с контентом. Изюминкой данного слайдера является 3d эффект изображений, а также разные анимации появления в случайном порядке.
4. Слайдер с использованием HTML5 canvas
Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,
5. Слайдер «Морфинг изображений»
Слайдер с эффектом морфинга (Плавная трансформация из одного объекта к другому). В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.
6. Круговой слайдер
Слайдер в виде круга с эффектом переворота изображения.
7. Слайдер с размытым фоном
Адаптивный слайдер с переключением и размытием заднего фона.
8. Адаптивный фэшн слайдер
Простой, легкий и адаптивный слайдер для сайта.
9. Slicebox - jQuery 3D image slider (ОБНОВЛЕННЫЙ)
Обновленная версия Slicebox slider с исправлениями и новыми возможностями.
10.Free Animated Responsive Image Grid
Плагин JQuery для создания гибкой сетки изображения, который будет переключать снимки, используя различные анимации и тайминги. Это может хорошо смотреться в качестве фона или декоративного элемента на сайте, так как мы можем настроить выборочное появление новых изображений и их переходов. Плагин выполнен в нескольких вариантах.
11. Flexslider
Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.
12. Фоторама
Fotorama - это универсальный плагин. У него есть много настроек, все работает быстро и легко, есть возможность просмотра слайдов на весь экран. Слайдер можно использовать как в фиксированном размере так и адаптивном, с миниатюрами и без, с круговой прокруткой и без и еще много чего.
P.S. Ставил слайдер несколько раз и считаю что он один из лучших
13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.
Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.
14. Слайдер на css3
Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.
15. WOW Slider
WOW Slider - это слайдер изображений с потрясающими визуальными эффектами.
17. Elastic
Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.
18. Slit
Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах. анимация сделана достаточно необычно и красиво.
19. Адаптивная фотогалерея plus
Простой бесплатный слайдер-галерея с подгрузкой изображений.
20. Адаптивный слайдер для WordPress
Адаптивный бесплатный слайдер для WP.
21. Parallax Content Slider
Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.
22. Слайдер с привязкой музыки
Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.
23. Слайдер с jmpress.js
Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.
24. Fast Hover Slideshow
Слайд шоу с быстрым переключением слайдов. Слайды переключаются при наведении курсора.
25. Image Accordion with CSS3
Аккордеон изображений с помощью css3.
26. A Touch Optimized Gallery Plugin
Это адаптивная галерея которая оптимизирована для тач-устройств.
27. 3D Галерея
3D Wall Gallery - создана для браузера Safari, где будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.
28. Слайдер с пагинацией
Адаптивный слайдер с нумерацией страниц с помощью ползунка JQuery UI. идея состоит в том чтобы чтобы использовать простую концепцию навигации. Есть возможность перемотки всех изображений или послайдового переключения.
29.Image Montage with jQuery
Автоматическое расположение изображений в зависимости от ширины экрана. Очень полезная штука при разработке сайта портфолио.
30. 3D Gallery
Простенький 3D круговой слайдер на css3 и jQuery.
31. Полноэкранный режим с 3D эффектом на css3 и jQuery
Слайдер с возможностью полно-экранного просмотра изображений с красивым переходом.
Уже несколько раз меня просили рассказать, как сделать слайдер на JS, а я все не рассказывал. Главная причина - потому что не знал, как.
В какой-то момент я понял, что слайдер иногда проще написать, чем искать готовый. Поэтому хочу предложить вам урок по созданию такого слайдера. Его легко сделать своими руками, а код занимает меньше 2 Кб.
ЗадачаСоздать слайдер изображений. Размеры роли не играют, только изображения должны быть одинакового размера. Перед подключением скрипта не забудьте подключить jQuery:
Создание слайдера
Для управления слайдером будет использоваться меню с белыми кружками, активная закладка будет зеленой. Меню создается динамически. Задача вебмастера - создать список из изображений и присвоить правильные классы. На странице можно располагать любое количество слайдеров, работе друг друга они не мешают.
Код слайдера будет таким:
Для управления слайдером нужен такой код:
$(document).ready(function() { $(".slider").each(function () { // обрабатываем каждый слайдер var obj = $(this); $(obj).append(""); $(obj).find("li").each(function () { $(obj).find(".nav").append(""); // добавляем блок навигации $(this).addClass("slider"+$(this).index()); }); $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню }); }); function sliderJS (obj, sl) { // slider function var ul = $(sl).find("ul"); // находим блок var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока var step = $(bl).width(); // ширина объекта $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки } $(document).on("click", ".slider .nav span", function() { // slider click navigate var sl = $(this).closest(".slider"); // находим, в каком блоке был клик $(sl).find("span").removeClass("on"); // убираем активный элемент $(this).addClass("on"); // делаем активным текущий var obj = $(this).attr("rel"); // узнаем его номер sliderJS(obj, sl); // слайдим return false; });
А стили для слайдера нужны такие:
.slider { z-index: 9; width: 700px; height: 290px; overflow: hidden; margin: 0 0 7px; position: relative; } .slider ul, .slider li { padding: 0; margin: 0; list-style-type: none; } .slider ul { width: 9999px; } .slider ul li { list-style-type: none; float: left; width: 700px; height: 290px; } .slider .nav { position: absolute; left: 15px; bottom: 12px; } .slider .nav span { opacity: 0.9; background: #fff; margin: 0 8px 0 0; width: 16px; height: 16px; border-radius: 8px; cursor: pointer; overflow: hidden; display: block; float: left; box-shadow: 0 1px 2px #000; } .slider .nav span.on { background: #2e9419; }
Как видите, код предельно прост. Я специально не делал разные стили переходов, а остановился именно на простом перематывании слайдов. Кроме того, автоматически слайды меняться не будут. Не знаю, кого как, но меня раздражает любая анимация на странице, которая производится без моего ведома.
Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!
Какие виды слайдеров бывают и где они могут понадобится?Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.
Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.
В основном заказчики просят внедрять на галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. такой механизм прозвали из-за того, что показ картинок повторяется по кругу.
На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.
Самостоятельная деятельностьНу а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый . Это будет автоматический переключатель картинок по кругу.
Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }
Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.
Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись
document.querySelectorAll ("#slides .slide")
Таким образом, в MySlider хранится коллекция из четырех элементов.
Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .
Переходим к самой функции.
Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.
Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально:
А вот теперь полученному элементу присваиваю описание классов «slide showing ». Как видите, все реализуется проще простого.
Спасибо за внимание. Не забывайте вступать в группу моих подписчиков, читать новые статьи и конечно же делиться ссылками на понравившиеся публикации с друзьями. Желаю удачи в изучении JavaScript. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 256 раз
Загрузка...
