IE和firefox均适用的图片轮换效果
要轮换的图片的位置先插入图片,文中的"$img1"等是我自己用的php变量,就是图片的网址.
XML/HTML代码
- <a id="javascript.a" href="#"><img id="javascript.img" style="FILTER: blendTrans(duration=2)" height="348" src="upfiles/<?=$img1?>" width="592" border="0" /></a>
然后在下面插入以下javascript代码.
JavaScript代码
- <script>
- <!--
- var ImgSrc = new Array();//图片地址
- ImgSrc[0] = "upfiles/<?=$img1?>"
- ImgSrc[1] = "upfiles/<?=$img2?>"
- ImgSrc[2] = "upfiles/<?=$img3?>"
- ImgSrc[3] = "upfiles/<?=$img4?>"
- for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}//预加载图片
- var ImgAlt = new Array();//鼠标放上去显示的文字
- ImgAlt[0] = "main photo"
- ImgAlt[1] = "main photo"
- ImgAlt[2] = "main photo"
- ImgAlt[3] = "main photo"
- var ImgHerf = new Array();//链接
- ImgHerf[0] = "#"
- ImgHerf[1] = "#"
- ImgHerf[2] = "#"
- ImgHerf[3] = "#"
- var step=0;
- function slideit(){
- var oImg = document.getElementById("javascript.img");
- if (document.all){oImg.filters.blendTrans.apply();}
- oImg.src=ImgSrc[step];
- document.getElementById("javascript.a").href=ImgHerf[step];
- oImg.title=ImgAlt[step];
- if (document.all){oImg.filters.blendTrans.play();}
- step = (step<(ImgSrc.length-1))?(step+1):0;
- (new Image()).src = ImgSrc[step];//加载下一个图片
- }
- setInterval("slideit()",3000);
- //-->
- </script>
经测试,在IE7和firefox下都可以显示效果,不过两者的效果有些区别.
可以个屁 只知道照搬
"经测试,在IE7和firefox下都可以显示效果,不过两者的效果有些区别."
这句话是真实的,我自己做出来了.在IE7和firefox下都是会动的,只是效果不一样,在IE7下平滑,在firefox下不太平滑而已.但是不知道楼上的那根筋不对了,如此发飙.
可以看下 http://thefurniturespot.ca/ 的效果.
图片预加载javascript