相册的自动播放效果SlideShow

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

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

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

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

<html>
<head>
<title>SlideShow</title>
<script language="<a href="http://www.knowsky.com/article.asp?typeid=36">javascript</a>1.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>

转载请注明出处:https://www.onexin.net/album-automatic-playback-slideshow/

随机文章:

1、SQL实用核心语句
https://www.onexin.net/sql-practical-core-statement/

2、以图换字的几个方法及思路
https://www.onexin.net/figure-for-word-methods-and-ideas/

3、本站将于11月对现有的部分Supesite风格升级
https://www.onexin.net/%e6%9c%ac%e7%ab%99%e5%b0%86%e4%ba%8e11%e6%9c%88%e5%af%b9%e7%8e%b0%e6%9c%89%e7%9a%84%e9%83%a8%e5%88%86supesite%e9%a3%8e%e6%a0%bc%e5%8d%87%e7%ba%a7/

4、Supesite模板数据调用常用标签介绍
https://www.onexin.net/supesite-template-data-is-called-common-label-description/

5、PHP Predefined Interfaces 预定义接口6个迭代器介绍
https://www.onexin.net/php-predefined-interfaces-6/

Leave a Reply