1

Есть следующие элементы:

<div id="1">Music</div>
<div id="2">Films</div>
<div id="3">Shop</div>

Как эти элементы показывать поочерёдно, сначала элемент с идентификатором 1, через 5 секунд его скрываем и показываем 2 и т.д. Важная особенность: когда доходит до последнего, то чтобы всё начиналось сначала.

2 ответа 2

3

Ну как-то так можно:

var i = 1, slide = document.getElementById(i);

setInterval(function() {
  slide.style.display = 'none'; // Когда 5 секунд прошло, скрыли активный
  
  i++; if (i == 4) i = 1; // Чтобы не выйти за пределы 
  
  slide = document.getElementById(i); // Обновили на текущий слайд
  slide.style.display = 'block';      // Ппоказали его
}, 5000);
div:not(:first-child) {
  display: none; /* Скрыли все, кроме первого */
}
<div id="1">Music</div>
<div id="2">Films</div>
<div id="3">Shop</div>

2

Более "автоматизированный" код, в отличии от первого ответа и на JQ)

setInterval(function() {
  var SlideLen = $('.slide').length; //Определяем сколько всего блоков
  var SlideThis = $('.slide.active').index(); // Определяем активный блок
  if(SlideThis<SlideLen) { //Если активный блок по позииции меньше чем всего блоков, то выполняем это:
    $('.slide.active').removeClass('active') // Удаляем класс у активного блока
                      .next() // Переходим к следующему блоку
                      .addClass('active'); // Добавляем класс
  } else { // Если нет, то это:
    $('.slide.active').removeClass('active'); // удаляем класс
    $('.slide').eq(0) // Находим первый блок
               .addClass('active'); // Добавляем класс
  }
}, 1000*2);
.slide {display: none;}
.slide.active {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="slide active" id="1">Music</div>
<div class="slide" id="2">Films</div>
<div class="slide" id="3">Shop</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.