var elements = document.querySelectorAll('.sliders');
var counter = 1;
setInterval(function(){
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = 'none';
}
if (counter > elements.length - 1)
counter = 0;
elements[counter].style.display = 'block';
counter++;
}, 1000);
.slider1 {
display: block
}
.slider2 {
display: none
}
.slider3 {
display: none
}
<div class="slider1 sliders">Информация блока 1</div>
<div class="slider2 sliders">Информация блока 2</div>
<div class="slider3 sliders">Информация блока 3</div>
setInterval
имеет синтаксис setTimeout(func / code, delay[, arg1, arg2...])
, где
func/code
- Функция или строка кода для исполнения.
delay
- Задержка в милисекундах, 1000 милисекунд равны 1 секунде.
arg1, arg2…
- Аргументы, которые нужно передать функции.
Тут мы находим все элементы, с которыми надо манипулировать.
- На каждой итерации счетчика мы скрываем все блоки и отображаем только один конкретный.
- Увеличиваем счетчик.
- Повторяем процедуру снова (точнее это делаем таймер).
- Если счетчик превышает количество элементов - сбрасываем его.