Raw JS slider
Подскажите, пожалуйста, как реализовать примитивный слайдер.
Есть несколько div class = "slider" По умолчанию они не видны, нужно каждому по очереди через 10 секунд присваивать class = "visible" (элемент с таким классом будет отображаться). Естественно, среди всех div class = "slider" только у одного div должен быть class = "visible" Пока есть следующее: var slider1 = document.getElementById('slider1'), slider2 = document.getElementById('slider2'), slider3 = document.getElementById('slider3'), slider4 = document.getElementById('slider4'); var elements = document.getElementsByClassName('slider'); for (var i = 0; i < elements.length; i++) { } Не понимаю, как "перебирать" каждый div и сразу проверять его на наличие class = "visible", и если такой class есть, то ОК, а если нет, то назначаем, предварительно убрав у того div, у которого такой class = "visible" присутствует в данный момент. Пробовал замыканиями - не вышло ничего. Может быть, есть более простой способ реализовать такой слайдер (на чистом JS)? |
Alexander Belov,
:-? <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .slider{ display: none; } .slider.visible{ display: block; } </style> </head> <body> <div class="slider">1</div> <div class="slider">2</div> <div class="slider">3</div> <div class="slider">4</div> <div class="slider">5</div> <script> var items = document.querySelectorAll(".slider"), len = items.length, indx = len-1; (function foo() { items[indx].classList.remove("visible"); indx = ++indx % len; items[indx].classList.add("visible"); window.setTimeout(foo, 300) })() </script> </body> </html> |
Благодарю! Прокомментируйте, пожалуйста, принцип выполнения кода на 30 строке. Не понятно, зачем там модуль числа используется.
|
Alexander Belov,
чтоб indx невырастал больше числа элементов <script> for (var i=0, indx = 4 ; i<50; i++) {document.write(++indx % 5 + " ")} </script> |
Понятно, спасибо!
|
Часовой пояс GMT +3, время: 12:02. |