I recently used a slightly modified version of Steve’s “Image Cross Fade”-JavaScript to animate a fading banner image on a customer’s website.
Plus there was the request to have the site’s logo floating all time above the images.
Here is the code with which I achieved both requests successfully.
JavaScript (functions.js)
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); var d=document, zInterval=null, current=0, timeout=10000,pause=false, imgs=new Array(); function so_init() { if(!d.getElementById || !d.createElement)return; imgs = d.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; // My modification: pick a random image to display first current = Math.floor(Math.random()*imgs.length); imgs[current].style.display = "block"; imgs[current].xOpacity = .99; setTimeout(so_xfade,timeout); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = "block"; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,timeout); } else { setTimeout(so_xfade,50); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } }
CSS (stylesheet.css)
#topBanner { position: relative; } #topBanner #logo { display: block; background: url(images/logo.png) top left no-repeat; top: 10px; left: 5px; width: 135px; height: 20px; position: absolute; z-index:100; } #topBanner #imageContainer { height: 295; position: relative; z-index: 20; } #topBanner #imageContainer img { display:none; position:absolute; }
HTML (index.html)
<div id="topBanner"> <div name="logo" id="logo"></div> <div name="imageContainer" id="imageContainer"> <noscript><img name="topBannerImg" id="topBannerImg" alt="wehr-dich.ch" src="images/banner/auberg.jpg" width="1000" height="338" border="0" /></noscript> <img name="banner1" id="banner1" alt="" src="images/banner1.jpg" width="520" height="295" border="0" /> <img name="banner2" id="banner2" alt="" src="images/banner2.jpg" width="520" height="295" border="0" /> <img name="banner3" id="banner3" alt="" src="images/banner3.jpg" width="520" height="295" border="0" /> </div> </div>
Live Demonstration:

