大中小

相册的自动播放效果SlideShow_网站重构教程

编辑Tag赚U币

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　写了个SlideShow的原型,利用image的complete,判定图片是否调用完全，调用完全以后才显示，否则是LOADING的图片，还考虑的是

　　1.每调用一张图片之前先出现loading的过程,

　　2.调用图片中不会因为网速和图片过大而未显示全,直接跳到下一张,要按顺序一张一张播放.

　　3.第一次播放的时候，因为调用图片会慢一点，重新播放是调用CACHE里的，速度就快了

<html>

<head>

<title>SlideShow</title>

<!--

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/allimg/080306/0241200.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>

</div>

</body>

</html>

来源：DoDo's Blog/所属分类：网站重构教程/更新时间：2006-05-16

[收藏][报错][返回列表]

相册的自动播放效果SlideShow_网站重构教程

网站重构教程Rss订阅网站制作教程搜索

网站重构教程推荐

猜你也喜欢看这些