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 get类激活，点击每个li它的get class激活并删除其他活动类。我想让班级自动更改，如幻灯片，我怎么能实现它。

http://jsfiddle.net/awkTU/

Answer 1

HTML：

<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>

JavaScript的：

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

CSS：

.active{
    color:#9c0;
}

Live Demo

Answer 2

这有用吗：

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

Answer 3

$(document).ready(function(){
    setInterval(function(){
if($("#last").hasClass('active'))
{
$("#last").removeClass('active');
$("#first").addClass('active');
}
$("li.active").next().addClass("active").prev().removeClass("active");
},2000);  
});

.active {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<ul>
<li id="first" style="display:none"></li>
<li  class="active">1111</li>
<li>2222</li>
<li>3333</li>
<li id="last" >4444</li>
</ul>
<br>

<lable style="border:1px solid black;border-radius:5px;background-color:gray">class cycling through li elements</lable>

</body>

Answer 4

只需添加计数器并使用:eq()选择器

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);

如何用自动时间改变班级

4 个答案: