Below is a piece of code that is compatible with all browsers:
add the following to your head section:
/* ****************************
* updated for cross-browser compatibility by
* Evan Neumann from Orbiting Eden on
* October 6, 2011.
* www.orbitingeden.com - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09586919eb09f82929984999e979594959ede939f9d">[email protected]</a>
* initial version only functioned on IE
*****************************/
<!-- Begin
/* *****************************
* * customizable by user
* ***************************/
var slideShowSpeed = 5000; // Set slide show speed (in milliseconds) shared across all browswers
var crossFadeDuration = 5; // Duration of crossfade (0.1 second) shared across all browsers
var crossFadeIncrement = .05; //crossfade step amount (1 is opaque) for non-IE browsers
// Specify the image files
var Pic = new Array(); // do not modify this line
// to add more images, continue the pattern below in the array
Pic[0] = 'images/dare2wear-427ED-e.jpg';
Pic[1] = 'images/PBW_3238EDSM-e.jpg';
Pic[2] = 'images/dare2wear-441_2ED-e.jpg';
/* ********************************
* do not change anything below this line
**********************************/
var f = 0; //index of the foreground picture
var b = 1; //index of the background picture
var p = Pic.length; //number of pictures loaded in queue - may increase as time goes on depending on number and size of pictures and network speed
//load the picture URLs into an image object array
//used to control image download and for IE shortcut
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {//this gets triggered by <body onload="runSlideShow()" >
//if IE, use alternate method
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
//increment the foreground image source
document.images.SlideShow.src = preLoad[f].src;
//if IE, use the shortcut
if(document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
//all other browser use opacity cycling
else {
var imageContainer = document.getElementById('imageContainer');
var image = document.images.SlideShow;
//convert an integer to a textual number for stylesheets
imageContainer.style.background = "url('"+Pic[b]+"')";
//set opacity to fully opaque (not transparent)
image.style.opacity = 1;
//run fade out function to expose background image
fadeOut();
}
//increment picture index
f++;
//if you have reached the last picture, start again at 0
if (f > (p - 1)) f = 0;
//set the background image index (b) one ahead of foreground image
b = f+1;
//if b exceeds number of pictures, reset to zero
if(b >= p) {b = 0;}
//call this function recursively indefinitely
setTimeout('runSlideShow()', slideShowSpeed);
}
function fadeOut(){
//convert to element
var el = document.images.SlideShow;
//decrement opacity by 1/20th or 5%
el.style.opacity = el.style.opacity - crossFadeIncrement;
//if opacity is less than 5%, move on to next picture
if(el.style.opacity <= crossFadeIncrement) {
return;
}
//wait 50 milliseconds before decrementing another 5% in opacity
setTimeout('fadeOut()', crossFadeDuration*10);
}
// End -->
and insert two elements into the body. The first being a container background element. A div is used here, but td, body, and others should also work fine. The second is the foreground image. Finally, within the <body> tag, include the onload function call
<body onLoad="runSlideShow()">
<!-- main image background-->
<div id="imageContainer">
<!-- main image foreground -->
<img id="SlideShow" name='SlideShow' width="324" height="486">
</div>