function setOpacity(id, opacity) {
var obj = document.getElementById(id);
obj.style.opacity = (opacity / 100);
obj.style.MozOpacity = (opacity / 100);
obj.style.KhtmlOpacity = (opacity / 100);
obj.style.filter = "alpha(opacity=" + opacity + ")";
}
function updateBgImage(id, src) {
var obj = document.getElementById(id);
obj.style.backgroundImage = "url("+src+")";
}
function updateFrontImage(id, src) {
var obj = document.getElementById(id);
obj.src = src;
}
function arrayToString(arr) {
return str = 'new Array("' + arr.join('", "') + '")';
}
function initFade(id, par, images) {
//preload images
var imageObj = new Image();
for (x in images) {
imageObj.src = images[x];
}
doFadeSet(id, par, images);
}
function fadeIn(id) {
for (var i=0;i<=10;i++) {
setTimeout('setOpacity("'+id+'",'+i*10+')',100*i);
}
}
function fadeOut(id) {
for (var i=10;i>=0;i--) {
setTimeout('setOpacity("'+id+'",'+i*10+')', 1000 - (100*i));
}
}
function doFadeSet(id, par, images) {
var one = images.pop();
images.unshift(one);
var two = images.pop();
images.unshift(two);
var imageString = arrayToString(images);
setOpacity(id, 0);
updateFrontImage(id, one);
fadeIn(id);
setTimeout('updateBgImage("'+par+'", "'+two+'")', 1000);
setTimeout('updateFrontImage("'+id+'", "'+two+'")', 3000);
setTimeout('fadeOut("'+id+'")', 2000);
setTimeout('doFadeSet("'+id+'", "'+par+'", '+imageString+')', 4000);
}
<script>
var imageArray = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg");
</script>
<div id="container" style="width: 202px; height: 202px; padding 1px;">
<img src="transparent.gif" id="image" style="width: 200px; height: 200px; position: relative; top: 1px; left: 1px; margin: 0; padding: 0;">
</div>
<a href="#" onclick="initFade('image','container', imageArray);">start the slideshow
</a>