相册的自动播放效果slideshow_css教程-IDC资讯中心

　　写了个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://www.knowsky.com/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> 
<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>

相册的自动播放效果slideshow_css教程

相关推荐

热门标签

热门文章

分类目录