CSS3 fade transition demo

by jfriend00

HTML

<div id="container">
<img id="slideimg0" class="slide showMe" src="http://photos.smugmug.com/photos/344287800_YL8Ha-S.jpg">
<img id="slideimg1" class="slide" src="http://photos.smugmug.com/photos/344287888_q22cB-S.jpg">
<img id="slideimg2" class="slide" src="http://photos.smugmug.com/photos/344284440_68L2K-S.jpg">
<img id="slideimg3" class="slide" src="http://photos.smugmug.com/photos/344286315_oyxRy-S.jpg">
<img id="slideimg4" class="slide" src="http://photos.smugmug.com/photos/344285236_hjizX-S.jpg">
</div>

CSS

#container {position: relative; font-size: 0; height: 266px; width: 400px;}
.slide {
    border: none; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
}
.showMe {opacity: 1;}

JavaScript

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 5;

function nextImage() {
    var e;
    // remove showMe class from current image
    e = document.getElementById("slideimg" + curImage);
    removeClass(e, "showMe");
    
    // compute next image
    curImage++;
    if (curImage > numImages - 1) {
        curImage = 0;
    }
    
    // add showMe class to next image
    e = document.getElementById("slideimg" + curImage);
    addClass(e, "showMe");
}
    
function addClass(elem, name) {
    var c = elem.className;
    if (c) c += " ";  // if not blank, add a space separator
    c += name;
    elem.className = c;
}

function removeClass(elem, name) {
    var c = elem.className;
    elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");  // remove name and extra blanks
}