jQuery - 将类添加到下一个元素并在一段时间后将其从当前元素中删除

Question

我需要做的“事件”类将在 3 秒后从第一个列表项移动到下一个列表项...在那里停留 3 秒，然后移动到下一个，再过 3 秒后移动到下一个...下一个，下一个......

当谈到最后一个(list_4)时，它应该从第一个li开始

我需要...如果list_3具有事件类，则具有相同编号的类“ block ”应该可见，其他“ block ”隐藏或不显示(在本例中为block_3)

<ul>
 <li class="list_1 active"><a href="#">some text</a>
 <li class="list_2"><a href="#">some text</a>
 <li class="list_3"><a href="#">some text</a>
 <li class="list_4"><a href="#">some text</a>
</ul>
<div>
 <span class="block_1" style="display:block">some content</span>
 <span class="block_2" style="display:none">some content</span>
 <span class="block_3" style="display:none">some content</span>
 <span class="block_4" style="display:none">some content</span>
</div>

我还想暂停 ul:hover 上的“跳跃”，当鼠标消失时“跳跃”应该继续

有没有什么不太复杂的方法可以做到这一点？

Answer 1

以下代码可能对您有帮助:jsfiddle

     setInterval(function(){

           var active = $(".active").removeClass('active');
          if(active.next() && active.next().length){
                active .next().addClass('active');
    }
    else{
      active.siblings(":first").addClass('active');
    }

  }, 100);​