Try something like this:
HTML:
<div class="fadebox">
<img src="image0.png" />
<img src="image1.png" />
<img src="image2.png" />
<img src="image3.png" />
</div>
<div class="fadebox">
<img src="image0.png" />
<img src="image1.png" />
<img src="image2.png" />
<img src="image3.png" />
</div>
CSS:
.fadebox {
position:relative;
}
.fadebox>img {
position:absolute;
left:0; top:0;
opacity:0;
transition:opacity 1s linear;
-webkit-transition:opacity 1s linear;
}
.fadebox>img:first-child {
position:static;
}
JavaScript:
(function() {
var divs = document.querySelectorAll(".fadebox"), l = divs.length, i;
for( i=0; i<l; i++) {
(function(div) {
var imgs = div.children, l = imgs.length, i = -1,
step = function() {
if(i > -1) imgs[i].style.opacity = 0;
i = (i+1)%l;
imgs[i].style.opacity = 1;
};
step();
setInterval(step,5000);
})(divs[i]);
}
})();
In the above, 1s
is the time it takes for the fade to happen, and 5000
is the number of milliseconds the between fades (including the transition, so in this case the image will stay displayed for 4 seconds)
Note that this only works in supporting browsers, like so:
- IE, Chrome and Firefox should work just fine in their latest versions
- IE9 works, but don't fade between images
- IE8 and below don't work due to not supporting
opacity
- IE7 and below don't work due to not supporting
querySelectorAll
The last two cases can be fixed by adding a suitable filter
style (IE8) and shimming querySelectorAll
(IE7 and below)