Question

下面是我的HTML代码，我想从1st active删除li类，并将其添加到第二li，反之亦然，每2秒使用jQuery自动生成一次。

<li class="">
    <a href="#">
        <img src="client_logo01.png">
    </a>
</li>

<li class="active">
    <a href="#">
        <img src="client_logo02.png">
    </a>
</li>

我正试着这样做。

$('ul li a').click(function() {
    $('ul li.current').removeClass('active');
    $(this).closest('li').addClass('active');
});

但它只适用于点击事件。

Answer 1

很明显它只会在点击时执行，因为你只绑定了一个点击事件..

setInterval(function()
{
    // Remove .active class from the active li, select next li sibling.
    var next = $('ul li.active').removeClass('active').next('li');

    // Did we reach the last element? Of so: select first sibling
    if (!next.length) next = next.prevObject.siblings(':first');

    // Add .active class to the li next in line.
    next.addClass('active');
}, 2000);

在文档就绪时运行此命令，脚本每隔2秒将活动类改为下一个兄弟。

无论您的ul元素具有多少个孩子

，都会运行

jsfiddle demo：http://jsfiddle.net/kg4huLrL/2/

Answer 2

试试这个：从active班级li中移除active班级，并将active班级添加到其兄弟li

   setInterval(function(){
       var $active = $('ul li.active');
       $active.removeClass('active');
       $active.siblings().addClass('active');
   },2000);

<强> Demo

Answer 3

您可能想要使用setInterval，请参阅有关如何使用它的帖子：

Stop setInterval

Answer 4

setInterval(function() {
    if($('ul').find('li.active').eq(0).next('li') != undefined) {
        $('ul').find('li.active').eq(0).removeClass('active').next('li').addClass('active');
    } else {
        $('ul').find('li.active').eq(0).removeClass('active');
        $('ul').find('li').eq(0).addClass('active');
    }
}, 2000);

jQuery将类添加到当前li并删除prev li automatic

4 个答案: