sarhov sarhov - 1 month ago 9
CSS Question

How change class with an automatic time

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

});

});


on page load the first li get class active, on click on every li its get class active and remove other active classes. I want the class changed automaticly with interval, like slideshow, how can I realize it.

http://jsfiddle.net/awkTU/

Answer

Does this help:

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