相册的自动播放效果SlideShow
写了个SlideShow的原型,利用image的complete,判断图片是否调用完全，调用完全以后才显示，否则是LOADING的图片，还考虑的是
1.每调用一张图片之前先出现loading的过程,
2.调用图片中不会因为网速和图片过大而未显示全,直接跳到下一张,要按顺序一张一张播放.
3.第一次 播放的时候，因为调用图片会慢一点，重新播放是调用CACHE里的，速度就快了
<html> <head> <title>SlideShow</title> <script language="JavaScript1.1"> <!-- var yourImages = new Array("http://blog.donews.com/images/blog_donews_com/dodo/79382/o_5540320040330075952.jpg","http://www.iqoo.com/tupian/%D0%C7%D7%F9%B1%DA%D6%BD/iqoo_1113__aries.jpg","http://blog.donews.com/images/blog_donews_com/dodo/79382/o_5540320040330081327.jpg","http://blog.donews.com/images/blog_donews_com/dodo/79382/o_5540320040330081426.jpg") var currCount=0 var stop=false function getimg(n){ preImages= new Image() preImages.src = yourImages[n] } function autoPlay(){ if(currCount!=yourImages.length){ document.getElementById("img").style.display="none" getimg(currCount) document.getElementById("loadingbar").style.display="block" setTimeout("loadingImg()",1000) } else{ currCount=0; if (confirm("播放完毕,是否重新播放?")){ return autoPlay() } } } function loadingImg(){ if (preImages.complete) { document.getElementById("img").src="http://blog.donews.com/images/blog_donews_com/dodo/49134/o_pix.gif" document.getElementById("loadingbar").style.display="none" document.getElementById("img").style.display="block" document.getElementById("img").src=yourImages[currCount] currCount=currCount+1 } setTimeout("autoPlay()",4000) } //--> </script> </head> <body bgcolor="#FFFFFF"> <div style="width:700px"> <center> <a href="javascript:autoPlay()">自动播放</a><br><br> <div id="loadingbar" style="display:none;"><img src=http://blog.donews.com/images/blog_donews_com/dodo/49134/o_loading.gif></div> <img id="img" src=http://blog.donews.com/images/blog_donews_com/dodo/49134/o_pix.gif > <center> </div> </body> </html>
版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系
editor@qudong.com。
本文价值
★★★★★
—
成为第一个评分的人
登录后为本文打分
评论加载中…