jquery - 如何使用自动时间换类

Question

html

<ul class="slider">
   <li>Lipsum</li>
    <li>lipsum</li>
    <li>lipsum</li>
     <li>lipsum</li>
</ul>

CSS

.active{
    color:#9c0;
}

javascript (jquery)

$(document).ready(function(){
        $(".slider li:first-child").addClass("active");
        $("li").click(function () {
         $(".active").removeClass("active");
         $(this).addClass("active");

    });

});

在页面上加载第一个 li 获取类事件，单击每个 li 使其获取类事件并删除其他事件类。我想要类随着时间间隔自动改变，就像幻灯片一样，我该如何实现。

http://jsfiddle.net/awkTU/

Answer 1

这有帮助吗:

$(document).ready(function(){
        $(".slider li:first-child").addClass("active");
        setTimeout(autoAddClass, 1000);
});

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length)
        $(next).addClass('active');
    else
        $('.slider li:first-child').addClass('active');
    setTimeout(autoAddClass, 1000);
}