IE和firefox均适用的图片轮换效果

要轮换的图片的位置先插入图片,文中的"$img1"等是我自己用的php变量,就是图片的网址.

XML/HTML代码
  1. <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代码
  1. <script>   
  2. <!--   
  3. var ImgSrc = new Array();//图片地址   
  4. ImgSrc[0] = "upfiles/<?=$img1?>"  
  5. ImgSrc[1] = "upfiles/<?=$img2?>"  
  6. ImgSrc[2] = "upfiles/<?=$img3?>"  
  7. ImgSrc[3] = "upfiles/<?=$img4?>"  
  8.   
  9.   
  10. for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}//预加载图片   
  11.   
  12. var ImgAlt = new Array();//鼠标放上去显示的文字   
  13. ImgAlt[0] = "main photo"  
  14. ImgAlt[1] = "main photo"  
  15. ImgAlt[2] = "main photo"  
  16. ImgAlt[3] = "main photo"  
  17.   
  18. var ImgHerf =  new Array();//链接   
  19. ImgHerf[0] = "#"  
  20. ImgHerf[1] = "#"  
  21. ImgHerf[2] = "#"  
  22. ImgHerf[3] = "#"  
  23.   
  24. var step=0;   
  25. function slideit(){   
  26.     var oImg = document.getElementById("javascript.img");   
  27.     if (document.all){oImg.filters.blendTrans.apply();}   
  28.     oImg.src=ImgSrc[step];   
  29.     document.getElementById("javascript.a").href=ImgHerf[step];   
  30.     oImg.title=ImgAlt[step];   
  31.     if (document.all){oImg.filters.blendTrans.play();}   
  32.     step = (step<(ImgSrc.length-1))?(step+1):0;   
  33.     (new Image()).src = ImgSrc[step];//加载下一个图片   
  34. }   
  35. setInterval("slideit()",3000);   
  36. //-->   
  37. </script>  

经测试,在IE7和firefox下都可以显示效果,不过两者的效果有些区别.

 

3 条评论

渴慕晨光

图片预加载javascript

回复
渴慕晨光

"经测试,在IE7和firefox下都可以显示效果,不过两者的效果有些区别."
这句话是真实的,我自己做出来了.在IE7和firefox下都是会动的,只是效果不一样,在IE7下平滑,在firefox下不太平滑而已.但是不知道楼上的那根筋不对了,如此发飙.

可以看下 http://thefurniturespot.ca/ 的效果.

回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕