Hey, I am trying to create a slide show for my pictures and I have hit a rut. So far the first image correctly fades into the second, but when I try to make the new image beneath into the correct div and reset the alpha for the image it just starts flicking quickly back and forth between the pictures…any help would be very much appreciated! ?
[CODE]<script type=”text/javascript”>
if (document.images)
{
var imgCurrent = new Image();
imgCurrent.src = “img/n721638572_1893964_8829.jpg”;
var imgNext = new Image();
imgNext.src = “img/n721638572_1933047_9615.jpg”;
}
var filler;
var iCount = 100;
var Showtime;
var Fader;
function pageload()
{
document.getElementById(‘current’).src = imgCurrent.src;
document.getElementById(‘next’).src = imgNext.src;
Showtime = setInterval(startshow, 5000);
}
function startshow()
{
Fader = setInterval(fadeout, 20);
}
function fade()
{
document.getElementById(‘current’).style.MozOpacity = (iCount/100);
document.getElementById(‘current’).style.opacity = (iCount/100);
document.getElementById(‘current’).style.KhtmlOpacity = (iCount/100);
document.getElementById(‘current’).style.filter.alpha.opacity = iCount;
}
function fadeout()
{
if(iCount > 0)
{
iCount = iCount-1;
fade();
}
else
{
iCount = 100;
filler = imgCurrent;
imgCurrent = imgNext;
imgNext = filler;
document.getElementById(‘current’).src = imgCurrent.src;
fade();
document.getElementById(‘next’).src = imgNext.src;
alert(‘images switched’);
Fader = clearInterval(Fader);
}
}
</script>
<div id=”top” z-index: 2><img id=”current”></div>
<div id=”bottom” z-index: 1><img id=”next”></div>