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

时间:2012-10-16 16:11:24

标签: jquery

我需要做“主动”课程将在3秒后从第一个列表项目移动到下一个列表项目...在那里停留3秒然后移动到下一个,再过3秒移动到下一个...接下来,接下来......

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

重新开始

我需要......如果list_3有活动类,则应该可以看到具有相同编号的“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,当鼠标熄灭时“跳跃”shluld继续

是否有任何不复杂的方式来做到这一点?

1 个答案:

答案 0 :(得分:5)

以下代码可以帮助您: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);​