自动播放效果SlideShow在相册网页中的应用

来源：[标签:出处] 作者：[标签:作者] 时间：2008-02-19 点击：

一个SlideShow的原型,利用image的complete,判断图片是否调用完全，调用完全以后才显示，否则是LOADING的图片，还考虑的是：
　　1.每调用一张图片之前先出现loading的过程,
　　2.调用图片中不会因为网速和图片过大而未显示全,直接跳到下一张,要按顺序一张一张播放.
　　3.第一次播放的时候，因为调用图片会慢一点，重新播放是调用CACHE里的，速度就快了！

<html>
<head>
<title>52css.com　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/星座壁纸/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="/Image/200821912345528177802.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>
</html>

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：Div CSS网页布局三栏页CSS float方法
下一篇：深入CSS2.0结构，再谈div、span的困惑！

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表