CODEWITHSUNDEEP
javascriptjqueryhtml
Uffo
Uffo

Reputation: 10046

Select next element carousel

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.

Upvotes: 1

Views: 1045

Answers (6)

glortho
glortho

Reputation: 13198

var divs = $('#container').find('div'),
    index = 0;

setInterval(function() {
    if (!divs[index]) index = 0;
    divs.hide();
    divs[index++].style.display = 'block';
}, 1000); // fires every 1 second

All the usual disclaimers about global scope being a bad idea, but this should give you what you want.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707446

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.

Upvotes: 3

Aaron
Aaron

Reputation: 5227

function cycleDivs(base)
{
    var next = ($(base).next('div').css('display') == 'none')? $(base).next('div') : $('div:first');
    $(base).hide();
    $(next).show();
    window.setTimeout(function(){cycleDivs(next);}, 1000)
}
window.setTimeout(function(){cycleDivs($('div:first'));}, 1000);

Here's a working example: http://jsfiddle.net/8hfBd/

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

DIV LOOP DEMO

var i=0, len=$('#parent div').length;
(function loop(){
  $('#parent div').eq(i++%len).fadeTo(700,1).siblings().fadeTo(700,0,loop);
})();

HTML example:

  <div id="parent">
    <div class="children ch1">I'm DIV 1</div>
    <div class="children ch2">I'm DIV 2</div>
    <div class="children ch3">I'm DIV 3</div>
    <div class="children ch4">I'm DIV 4</div>
  </div>

CSS basic setup:

  .children{
    position:absolute;
  }

And here is one with a mouseover pause :

DEMO with mouseover pause

Upvotes: 0

imsky
imsky

Reputation: 3279

Here's an implementation with setTimeout: http://jsfiddle.net/imsky/EBpTw/

Given a UL with id of "list" and LIs inside:

$(function() {
    $("#list li:gt(0)").hide();

    function showNextBlock() {
        var currentBlock = $("#list li:visible");
        if (currentBlock.index() == $("#list li").length - 1) {
            currentBlock.hide().parent().find("li:first").show()
        }
        else {
            currentBlock.hide().next("li").show();
        }
        setTimeout(showNextBlock,1000);
    }

    setTimeout(showNextBlock,1000);
});

Upvotes: 0

Variant
Variant

Reputation: 17365

$("#list div").hide();
var current = $("#list div").first().show();
setInterval(function() {
     current.hide();
    current = current.next().length > 0  ? current.next() : $("#list div").first();
    current.show();

},2000);



<div id="list">
<div>1</div>
<div>22</div>
<div>333</div>
<div>4444</div>
</div>

Can be seen working here:

http://jsfiddle.net/KenwV/

Upvotes: 0

Related Questions