0

Необходимо это сделать с помощью чистого JS или jQuery

Есть список элементов:

<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

Необходимо с интервалом в 1,5 секунды:

  1. Находить элемент списка с классом .active ("Два") и убирать у него данный класс
  2. Находить следующий элемент в списке ("Три") и добавлять ему класс .active

Проблема в том, когда скрипт доходит до последнего элемента списка ("Четыре"). Как сделать так, чтобы доходя до последнего элемента списка - скрип следующим элементом выбирал первый в списке ("Один")?

1
  • Покажи, как пытался реализовать
    – Air
    13 дек 2018 в 13:02

2 ответа 2

4

Реализация на jQuery

$(document).on('ready', function(){
	interval = 1500; //Полторы секунды
	setInterval(function(){
		count = $("ul li").length; //Получаем общее кол.во элементов
		index = $("ul li.active").index() + 1; //Ищем порядковый номер элемента и добавляем +1 что бы получить индекс следующего
		$("ul li.active").removeClass("active"); //Убираем у текущего элемента класс active
		if(index== count) index = 0; //Если индекс выходит за рамки, ставим 0, что бы начать с 1 элемента
		$("ul li").eq(index).addClass("active"); //Добавляем класс .active нужному элементу
	}, interval);
});
li{
	  color: blue;
	}
	li.active{
	  color: red;
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

1

Очень схоже с предыдущим автором, но коль уж начал делать - решил и показать.

$(document).on('ready', function(){
  const interval = 1500;
  const elements = $("ul li");
  const count = elements.length;
  
  setInterval(function(){
	  let curElement = $("ul li.active");
	  let index = elements.index(curElement);
      curElement.removeClass("active");
	  elements.eq(++index%count).addClass("active");
  }, interval);
});
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul>
    <li>Первый</li>
    <li class="active">Два</li>
    <li>Три</li>
    <li>Четыре</li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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