Question

我喜欢这个

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

我想要jquery代码

1-添加一个第一个li current类
在第二个li上添加2秒后
等
如果它是从第一个

我将永远不会使用像循环这样的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/

Answer 2

var lis = $('ul > li');

function switchClass(i) {
    lis.eq(i).removeClass('current');
    lis.eq(i = ++i % lis.length).addClass('current');
    setTimeout(function() { switchClass(i); }, 2000);
}
switchClass(-1);

http://jsfiddle.net/7ec63/

在li之后添加class并从第一次重新添加

2 个答案: