Question

I have a list of DIVs, and I want every X second using setTimeout to take the next div and set the display to block, and for the other ones to none, how can I do that? Can someone please give me an example?

How can I make it to be infinite, when reaches the last one to start from the first one again.

I know this is a kind of carousel, but I want too see how it’s done.

Answer 1

There are many ways to do this, but here’s one way: http://jsfiddle.net/jfriend00/Yr3NV/

HTML:

<div id="container">
    <div class="item active">1111</div>
    <div class="item">2222</div>
    <div class="item">3333</div>
    <div class="item">4444</div>
    <div class="item">5555</div>
    <div class="item">6666</div>
    <div class="item">7777</div>
</div>

Code:

setInterval(function() {
    var next = $("#container .active").removeClass("active").next();
    if (next.length == 0) {
        next = $("#container .item:first");
    }
    next.addClass("active");
}, 1000);

CSS:

.item {display: none;}
.item.active {display: block;}

Using the method of adding/removing a class gives you a little more style control via CSS rather than coding the style into your javascript and avoids the use of any global or closure variables to keep the state.