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: