相册的自动播放效果SlideShow

来源: 时间:06-09-11 点击: 点击这里收藏本文

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

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

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

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

<html>
<head>
<title>SlideShow</title>
<script language="JavaScript1.1">
<!-- 
var yourImages = new Array("http://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_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://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_donews_com/dodo/79382/o_5540320040330081327.jpg","http://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_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://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_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="<a href=http://www.jzxue.com/Html/java/ target=_blank>javascript</a>:autoPlay()">自动播放</a><br><br>
<div id="loadingbar"  style="display:none;"><img src=http://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_donews_com/dodo/49134/o_loading.gif></div>
<img id="img" src=http://<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>.donews.com/images/<a href=http://www.jzxue.com/search.html?keyword=blog&type=NS target=_blank>blog</a>_donews_com/dodo/49134/o_pix.gif >

</body>
</html>

——您可以运行代码察看特效，您也可以复制或者另存源代码。

把此文章收藏到：　　　　　

相关教程

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册