Efecto Fade que salta de foto

[Bertofg]

Hola tengo tres imagenes con un efecto fade
pero tampronto sale la primera pega un fogonazo la tercera
luego va todo bien y no encunetro la solución

me podeis ayudar

<script type='text/javascript'>
//<![CDATA[
/*
Image Cross Fade Redux [email protected]
http://slayeroffice.com/code/imageCrossFade/xfade2.html
*/

window.addEventListener?window.addEventListener("l oad",so_init,false):window.attachEvent("onload",so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=0;

function so_init() {
imgs = d.getElementById("imageContainer").getElementsByTa gName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,500);
}

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,500);
} else {
setTimeout(so_xfade,55);
}
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) + ")";
}
}



//]]>
</script>
<style>
#imageContainer {
margin: auto;
position: relative;
}
#imageContainer {
height: VALORpx;
width: VALORpx;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>

<div id="imageContainer">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
</div>

[Bertofg]

Os dejo el efecto por si os sirve para algo

<script type='text/javascript'>
//<![CDATA[
/*
Image Cross Fade Redux [email protected]
http://slayeroffice.com/code/imageCrossFade/xfade2.html
*/

window.addEventListener?window.addEventListener("l oad",so_init,false):window.attachEvent("onload",so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("imageContainer").getElementsByTa gName("img");
for(i=0;i<imgs.length;i++)
imgs[i].xOpacity = 0;
imgs[imgs.length-1].style.display = "block";
imgs[imgs.length-1].xOpacity = .99;
setTimeout(so_xfade,1000);
}

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,1000);
} 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) + ")";
}
}



//]]>
</script>
<style>
#imageContainer {
margin:
}
#imageContainer {
height: VALORpx;
width: VALORpx;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>

<div id="imageContainer">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
</div>