Without using jquery, how to cycle through images to make a simple slideshow

Question

You have a div, with 3 images in it.

How to create a simple slideshow that cycles through the images, and displays each image for 5 seconds and goes back to the first image when done and continues looping.

Without using jquery or any other framework.

Answer 1

(function () {
    var imgs = document.getElementById('your_div').getElementsByTagName('img'),
        index = 0;
    imgs[0].style.display = 'block';
    setInterval(function () {
        imgs[index].style.display = 'none';
        index = (index + 1) % imgs.length;
        imgs[index].style.display = 'block';
    }, 5000);
}());

Example HTML: http://jsfiddle.net/Zq7KB/1/

Edit: Saw a more elegant example above that used .length.

Answer 2

You can use setInterval to set up the timed callback, and set the src of an img element:

window.onload = function() {
    var slides = [ "path_to_image_one",
                   "path_to_image_two",
                   "path_to_image_three" // ...
                 ],
        index = 0,
        timer = 0;

    // Show the first slide
    showNextSlide();

    // Show "next" slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // The function we call to show the "next" slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

...where your markup for the image is:

<img id="theImage" src="path_to_initial_placeholder">

Note that I've stored the timer handle in timer but not used it. This is just because you might use it to cancel the timer if you need to stop the slideshow.

Update: Just saw that you want to get the images from a div somewhere (whereas above I've supplied the paths in the code itself). Simple enough to create slides dynamically; revised edition of the above that grabs the images that are direct children of the div with the ID "theDiv":

window.onload = function() {
    var slides = [],
        index = 0,
        timer = 0,
        node;

    // Get the slides
    for (node = document.getElementById('theDiv').childNodes;
         node;
         node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == "IMG") {
            slides.push(node.src);
        }
    }

    // Show the first slide
    showNextSlide();

    // Show "next" slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // The function we call to show the "next" slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};