Auto Rotating Slideshow

HTML

<div id="slideshow"></div>

CSS

body {
    padding:50px;
    background-color:black;
    color:white;
}

#slideshow {
    width:200px;
    height:100px;
    background-color:#222;
    margin:0 auto;
}

#slideshow img {display:block;}

JavaScript

(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "http://lorempixel.com/200/100/animals/1/",
        "http://lorempixel.com/200/100/animals/2/",
        "http://lorempixel.com/200/100/animals/3/",
        "http://lorempixel.com/200/100/animals/4/"
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='" + slide[count] + "' alt='Slide " + (count + 1) + "'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000);
})();

DEMO

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250