JS 相册效果自动播放[本地整合]

更新时间：2008年12月16日 13:20:36 作者：

具有自动播放功能,图片显示不但具有渐隐渐现,自动伸缩的效果,还能像放电影一样的感觉!

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

可控制渐隐渐现：

<html> <body> <div id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div> <div id="photoContrl" style="display:none"> <button onclick="prevPhoto()">Previous</button> <button onclick="nextPhoto()">Next</button> <button onclick="autoPlay()" id="pp">Play</button> <button onclick="stopPlay()">Stop</button> </div> <div style="border:1px solid gold;width:600px;background:dodgerblue"><img src="http://img.jb51.net/online/slide/jb51.gif" id="photo" style=""></div> </body> </html> <script> function tM(Message) { $("testMessage").innerHTML=Message } function dR(topr) { document.write(topr) } function $(eleId) {return document.getElementById(eleId)} //预载图片 var imasrc=new Array("http://img.jb51.net/online/slide/10254068.jpg" ,"http://img.jb51.net/online/slide/10254629.jpg" ,"http://img.jb51.net/online/slide/10255187.jpg" ,"http://img.jb51.net/online/slide/10255626.jpg" ,"http://img.jb51.net/online/slide/10260076.jpg" ,"http://img.jb51.net/online/slide/10260471.jpg" ,"http://img.jb51.net/online/slide/10261022.jpg" ,"http://img.jb51.net/online/slide/10261479.jpg")//图片路径写入数组 var preIma=new Array() var dB=new Date() for (i=0;i < imasrc.length;i++)//预载所有图片 { preLoadImg(i) } function preLoadImg(imgIndex)//预载指定图片图片 { preIma[imgIndex]=new Image() preIma[imgIndex].imgReadyStatus=false preIma[imgIndex].imgIndex=imgIndex preIma[imgIndex].onload=imgLoad preIma[imgIndex].onerror=imgError preIma[imgIndex].onabort=imgAbort preIma[imgIndex].src=imasrc[imgIndex] } function imgLoad()//预载完成 { this.imgReadyStatus=true } function imgError()//预载失败 { preLoadImg(this.imgIndex) } function imgAbort()//预载取消 { preIma.splice(this.imgIndex,1) } var checkAgain function checkImgReadyStatus()//检索加载状态 { var imgReadyStatus=true var persent=0 var dE=new Date() for (i=0;i < preIma.length;i++) { if (!preIma[i].imgReadyStatus) {imgReadyStatus=false} else {persent++} } tM("完成:"+(persent/preIma.length*100).toFixed(2)+"%<br>载入:"+persent+"张图片<br>消耗时间:"+((dE-dB)/1000).toFixed(0)+"秒")//显示进度 if (imgReadyStatus) { $("photoContrl").style.display="block" autoPlay() clearTimeout(checkAgain) } else { checkAgain=setTimeout(checkImgReadyStatus,1000)//检索频率 } } checkImgReadyStatus() //幻灯片效果 var photoIndex=0//初始化图片索引 var opacity=10//初始化透明度 var direct="--"//初始化透明度矢量 var doPlay//定义播放 var doAutoPlay//定义自动播放 function prevPhoto(){play(-1)}//前翻 function nextPhoto(){play(1)}//后翻 function autoPlay()//自动播放 { if (doAutoPlay) { clearInterval(doAutoPlay) doAutoPlay=null $("pp").innerHTML="Play" } else { play(1) doAutoPlay=setInterval("play(1)",3000)//定义自动播放频率 $("pp").innerHTML="Pause" } } function stopPlay()//停止播放 { clearInterval(doAutoPlay) doAutoPlay=null photoIndex=0 play(0) $("pp").innerHTML="Play" } function play(act)//执行动作 { if (preIma.length!=0) { if (doPlay) {clearInterval(doPlay)} doPlay=setInterval(switchPhoto,10) photoIndex=(photoIndex+act+preIma.length)%preIma.length } } function switchPhoto()//切换照片 { eval("opacity"+direct) setOpa(opacity) if (opacity <= 1) { direct="++" $("photo").src=preIma[photoIndex].src } else if (opacity >= 10) { direct="--" clearInterval(doPlay) } } function setOpa(opacity)//改变透明度 { if ($("photo").style.filter!=null) {$("photo").style.filter="alpha(opacity="+opacity*10+")"} else {$("photo").style.opacity=opacity/10} } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
相册

JavaScript图片放大镜效果代码[代码比较简单]
实用漂亮的放大镜效果，基于JavaScript代码实现，貌似代码不太多，但效果确实不错，因调用的图片比较大，所以运行效果后请稍等一会，等待图片加载。
2011-02-02
javascript实现的三维正方体(兼容ie7,ff)
2008-02-02
js实现图片加载时候逐渐出现的杂色效果
有一些网站在加载图片的时候不是一下子就出来了，而是由模糊到清淅，或是由一种不占用过多网络资源的方式先大致显示，然后再慢慢加载，避免因用户等不及将网页关掉，像马赛克效果、沙子效果等
2010-08-08
自适应图片大小的弹出窗口
[蓝色]自适应图片大小的弹出窗口...
2006-07-07
推荐一个不错的图片浏览效果
推荐一个不错的图片浏览效果...
2007-06-06
javascript 图片放大效果函数
图片放大效果实现代码，需要的朋友可以参考下。
2009-11-11
javascript双向放大缩小广告代码
比较罕见的javascript双向放大缩小图片效果代码，鼠标上下移动即可看到效果
2008-05-05
js循环输出图片，不足的要补0
群了朋友需要循环输出数字顺序的图片，就是前面需要加0补到3为图片，所以我给出了下面的代码
2008-06-06
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。...
2007-03-03
JS 文件大小判断的实现代码
有时候我们的图片上传等功能，需要验证客户端的图片大小，比较只能上传小于100K的图片，这里客户端先简单的验证下。
2010-04-04