jquery - 在时间之后在 li 中添加类并从第一个重新添加

Question

我有这样的ul

<ul>
    <li>one</li>
    <li>one</li>
    <li>one</li>        
</ul>

我想要jquery代码

1. 1- 在第一个 li 中添加一个 当前类
2. 2 秒后添加第二个 li
3. 等等
4. 如果这是从第一个版本开始的最后一个版本

我永远不会使用像cycle这样的jquery插件 因为我必须亲手做

Answer 1

CSS:

li {
    display: none;
}

Javascript:

$(function() {
    var $list = $('ul li');

    $list.filter(':first').addClass('current');

    setInterval(function() {
        if( $list.filter('.current').index() !== $list.length - 1 ) {
            $list.filter('.current').removeClass('current').next().addClass('current');
        }
        else {
            $list.removeClass('current').filter(':first').addClass('current');
        }
    }, 2000);
});

演示:http://www.jsfiddle.net/uQKX6/

受到 RightSaidFred 的启发:

$(function() {
    var $list = $('ul li'),
        tID   = null,
        i     = 0;

    function loop() {
        alert($list.removeClass('current').slice(i, i+1).addClass('current')[0].id);

        if( i < $list.length-1 ) i++;
        else i = 0;

        tID = setTimeout(loop, 2000);
    }

    $list.hover(function() {
        clearTimeout(tID);
    }, function() {
        loop();
    });

    loop();
});

演示:http://www.jsfiddle.net/uQKX6/4/