
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);
}

usage:







start the slideshow