自動播放效果SlideShow在相冊網(wǎng)頁中的應用_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　一個SlideShow的原型,利用image的complete,判定圖片是否調用完全，調用完全以后才顯示，否則是LOADING的圖片，還考慮的是：
　　1.每調用一張圖片之前先出現(xiàn)loading的過程,
　　2.調用圖片中不會因為網(wǎng)速和圖片過大而未顯示全,直接跳到下一張,要按順序一張一張播放.
　　3.第一次播放的時候，因為調用圖片會慢一點，重新播放是調用CACHE里的，速度就快了！

代碼調試框 [hl5o.cn]

<html>
<head>
<title>mb5u.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="http://p1.mb5u.com/divcss/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>
</html>

[ 可先修改部分代碼再運行查看效果 ]