Jquery 如何用自动计时改变课堂

html

javascript（jquery）

在“加载第一个li使类处于活动状态”页面上，单击每个li使其使类处于活动状态并删除其他活动类。我想随着时间的推移自动改变课程，比如幻灯片，我怎样才能实现呢

HTML：

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

    });

});

CSS:

这有帮助吗：

.active{
    color:#9c0;
}

$（文档）.ready（函数（）{
setInterval（函数（）{
if（$（“#last”）.hasClass（'active'））
{
$（“#last”）.removeClass（'active'）；
$（“#first”）.addClass（'active'）；
}
$（.li.active”）.next（）.addClass（“active”）.prev（）.removeClass（“active”）；
},2000);  
});
.active{
颜色：蓝色；
}



1111
2222
3333
4444



通过li元素的课堂循环
只需添加一个计数器并使用
：eq（）
选择器即可

$(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);
}

var$item=$（“.item”）；
$item.first（）.addClass（“活动”）；
var计数=0；
setInterval（函数（）{
$（“.item:eq（“+count+”）.removeClass（“活动”）；
如果（计数<2）{
计数++
}否则{
计数=0
}
$（“.item:eq（“+count+”）.addClass（“活动”）；
}, 1000);
如果你在开发过程中有一种对性能优化的感觉，请考虑缓存你的jQuery选择器，这样浏览器就不需要扫描整个文档来处理你已经处理过的一组元素。谢谢你的回答，它是有效的，我已经把你的代码和我上面的代码结合起来了。现在它可以按我的要求工作了，谢谢你。。。
<ul class="slider">
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
 <li>Hong Kong - Lorem ipsum dolor sit amet consectetur adipiscing...</li>
</ul>​

$(document).ready(function() {

    // Cache all list items
    var $liCollection = $(".slider li");

    // Cache the first list item for later use
    var $firstListItem = $liCollection.first();

    // Give the first list item the active state
    $liCollection.first().addClass("active");

    // Each 500 ms
    setInterval(function() {

        // Get the active list item
        var $activeListItem = $(".active")

        // Remove its active state
        $activeListItem.removeClass("active");

        // Try to find the next list item
        var $nextListItem = $activeListItem.closest('li').next();

        // If the next list item (jQuery object) length property is 0
        // (this means that this list item was the last in the list)
        if ($nextListItem.length == 0) {

            // The next list item is actually the first list item
            $nextListItem = $firstListItem;
        }

        $nextListItem.addClass("active");
    }, 500);
});​

.active{
    color:#9c0;
}

$(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);
}

var $item= $(".item");
$item.first().addClass("active");
var count = 0;
setInterval(function() {
    $(".item:eq("+count+")").removeClass("active");
    if (count < 2) {
        count++
    }else {
        count = 0
    }
    $(".item:eq("+count+")").addClass("active");
}, 1000);