Setting variable dualFade to 1 fades one image out and fades the next image in.
Setting variable dualFade to zero just fades the next image in.
<HTML>
<HEAD>
<TITLE>Image Swap 1 Auto Fade</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
is1afArr=new Array()
is1afArr[0]="pic1.jpg"
is1afArr[1]="pic2.jpg"
is1afArr[2]="pic3.jpg"
is1afArr[3]="pic4.jpg"
is1afArr[4]="pic5.jpg"
is1afArr[5]="pic6.jpg"
pause=5 // seconds
dualFade=1 // 0 = fades in, 1 = fades out then in
fadeStep=1
fadeSpeed=10
count=0
fading=0
minFadeValue=0
slideShowTimer=null
preload=new Array()
for(var i=0;i<is1afArr.length;i++){
preload[i]=new Image()
preload[i].src=is1afArr[i]
}
function initIS1af(){
if(dualFade==0){fadeValue=0}
else{fadeValue=100}
fadeIS1af()
fadeTime=(dualFade==1?(((100/fadeStep)*fadeSpeed)*2):(((100/fadeStep)*fadeSpeed)))
slideShowTimer=setTimeout("showIS1af()",(pause*1000)+fadeTime)
}
function showIS1af(){
clearTimeout(slideShowTimer)
displayPic=document.images["pic"]
displayPic.alt=is1afArr[count]
displayPic.src=is1afArr[count]
count=(count==is1afArr.length-1?0:count+1)
initIS1af()
}
function fadeIS1af(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadeIS1af()",fadeSpeed)
if(displayPic.filters){displayPic.filters.alpha.opacity=fadeValue}
else{displayPic.style.opacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayPic.src=is1afArr[count]
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
// -->
</script>
</HEAD>
<BODY onload="showIS1af()">
<h1>Image Swap 1 Auto Fade</h1>
<center>
<img name="pic" id="pic" alt="" src="blank.gif" style="width:250px;height:167px;filter:alpha(opacity=100);opacity:0.9">
</center>
</BODY>
</HTML>