Auto Slideshow 2

Auto-rotating slideshow.

by the_voder

HTML

<!-- Images are simply places one after the other, and will be positioned on top of each other using CSS absolute positioning -->

<img src="https://dl.dropbox.com/u/56358859/jsfiddle_assets/auto-gallery/photo-01.jpg"
class="slide" alt="slide 1">
<img src="https://dl.dropbox.com/u/56358859/jsfiddle_assets/auto-gallery/photo-02.jpg"
class="slide" alt="slide 2">
<img src="https://dl.dropbox.com/u/56358859/jsfiddle_assets/auto-gallery/photo-03.jpg"
class="slide" alt="slide 3">
<img src="https://dl.dropbox.com/u/56358859/jsfiddle_assets/auto-gallery/photo-04.jpg"
class="slide" alt="slide 4">
<img src="https://dl.dropbox.com/u/56358859/jsfiddle_assets/auto-gallery/photo-05.jpg"
class="slide" alt="slide 5">

CSS

/* Slides absolutely positioned on top of each other */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
    /* Hide slides initially */ 
    display: none;
    /* Set z-index to low initial value */
    z-index: 1;
}

/* Class brings next slide up underneath top slide */
.nextslide {
    z-index: 2;
}

/* Bring current slide to top of stack */
.currentslide {
    z-index: 3;
}

JavaScript

///////////////
// VARIABLES //
///////////////

var showfor     = 2000;     // Time to show each slide
var faderate    = 1000;     // Rade-rate
var slideclass  = 'slide';  // Class applied to slide images (no leading '.')

///////////////
// SLIDESHOW //
///////////////

$(document).ready(function () {
    // Variable to hold index of current slide (first slide is 0)
    var currentslideindex = 0;

    // Variable to hold slide elements
    var $slides = $('.' + slideclass);

    // Show first slide
    $slides.first().addClass('currentslide').fadeIn(faderate);

    // Repeating function to rotate slides
    setInterval(function() {

        // If current slide is last, set index for next slide to 0
        var nextslide = (currentslideindex < $slides.length - 1) ?
            currentslideindex + 1 : 0;

        // Add class to next slide to make it visible and set z-index
        $slides.eq(nextslide).addClass('nextslide')
        .css('display', 'block');

        // Fade out top slide
        $slides.eq(currentslideindex).fadeOut(faderate, function () {
            // When top slide faded out hide top slide by removing class
            $slides.eq(currentslideindex).removeClass('currentslide');

            // Add class to next slide, to bring it to top of the stack
            $slides.eq(nextslide).addClass('currentslide')
            .css('display', 'block');

            // Update current slide index
            currentslideindex = nextslide;
        })
    }, showfor + faderate);
});

/* Uncommented version

var showfor     = 2000;
var faderate    = 1000;
var slideclass  = 'slide';

$(document).ready(function () {
    var currentslideindex = 0;
    var $slides = $('.' + slideclass);
    $slides.first().addClass('currentslide').fadeIn(faderate);
    setInterval(function() {
        var nextslide = (currentslideindex < $slides.length - 1) ?
            currentslideindex + 1 : 0;
        $slides.eq(nextslide).addClass('nextslide').css('display', 'block');
  ...