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:
