Question

In the following markup, "image 3" would the only visible div if all .image divs were positioned absolutely and with no z-index. I could "reshuffle" the deck, so to speak, by adjusting the z-index of all elements, or I could reshuffle it by manually placing the last .image div before the first, making the sequence "image 3, image 1, image 2."

<div id="images">
  <div class="image">...image 1...</div>
  <div class="image">...image 2...</div>
  <div class="image">...image 3...</div>
</div>

Suppose I would like the elements to fade, one to the other, every few seconds. I’d like to start by showing "image 3," and have it fade out only to appear after "image 1" has been displayed. I can accomplish that by giving it a lower z-index than "image 1" has, or by manually moving it before "image 1" after it’s completely faded out.

Problems with z-index…

My reservation with using the z-index route is the need to examine all of the .image divs just to find the div having the highest z-index, so I can fade it out. This would be much easier if I were manually moving them, I could merely ask for $("div.image:last"). Furthermore, I would have to re-write the z-indexes, setting "image 3" to z-index:0; after it’s been displayed, and incrementing all others to i+1.

Problems with manually moving elements…

This seems really sloppy, but as pointed out in the previous paragraph it appears to be the easiest solution. I’m not sure what effect it would have on screen-readers and other tools that require solid markup to function properly.

Which of these two methods is best for a carousel-type script, and why? Or is there a third option I’m not considering?

Answer 1

To build on what peirix and Steerpike suggested. Add display:none to your image class and set your first div to display:block. You can then find the visible div with the :visible selector and cross-fade with the next div:

function rotate() {
    // fade out the current div
    var activeEl = $("#images div:visible");
    $(activeEl).fadeOut("slow");

    // fade in the next div in the loop
    if ($(activeEl).next().length) {
        $(activeEl).next().fadeIn("slow");
    } else {
        $($(activeEl).siblings()[0]).fadeIn("slow");
    }

    setTimeout(rotate, 1000);
}

$(document).ready(function() {
    rotate();
});