Смена элементов

122

21 ноября 2018, 16:40

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

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

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

Answer 1

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

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>

Answer 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>