How change class with an automatic time

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

    });

});

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 1

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