 A
Fade-In image slideshow using the Fade Filter
Applying all the knowledge we've learned, it's very easy to create an
image slideshow with an added fade-in effect in IE5.5+.
<script type="text/javascript">
var slidespeed=2000
var slideimages=new
Array("../images/bs00825a.gif","../images/hh01478a.gif","../images/bs00847a.gif")
var slidelinks=new
Array("http://www.dynamicdrive.com","http://www.javascriptkit.com","http://www.cssdrive.com")
var whichlink=0
var whichimage=0
var imgobj, filtersupport, blenddelay
var imageholder=new Array()
for (i=0;i<slideimages.length;i++){ //preload images
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
window.location=slidelinks[whichlink]
}
function slideit(){
if (filtersupport)
imgobj.filters[0].apply()
imgobj.src=imageholder[whichimage].src
if (filtersupport)
imgobj.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()", slidespeed+blenddelay)
}
window.onload=function(){
imgobj=document.getElementById("slideshow") //access img obj
filtersupport=imgobj.filters //check for support for filters
blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0
slideit()
}
//-->
</script>
<a href="javascript:gotoshow()"><img src="../images/bs00825a.gif"
id="slideshow" border=0
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2)" width="97"
height="100" /></a>
Just one subtle detail in the above script worth mentioning:
blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0
"blenddelay" is the additional delay that will be added to the
initial delay and passed into the setTimeout() function to change
the image every few seconds. It varies depending on whether the browser
supports the "Fade" filter, since in that case, you need to take into
consideration the time it takes to play the fade effect, and add that to the
original desired delay between image change.
|
