JS 相冊效果自動播放[本地整合]

2019-11-21 01:31:33

字體：大中小

供稿：網(wǎng)友

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

可控制漸隱漸現(xiàn)：

<html> <body> <div   class="iwvjtn8m0"   id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div> <div   class="iwvjtn8m0"   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.VeVB.COm/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.VeVB.COm/online/slide/10254068.jpg" ,"http://img.VeVB.COm/online/slide/10254629.jpg" ,"http://img.VeVB.COm/online/slide/10255187.jpg" ,"http://img.VeVB.COm/online/slide/10255626.jpg" ,"http://img.VeVB.COm/online/slide/10260076.jpg" ,"http://img.VeVB.COm/online/slide/10260471.jpg" ,"http://img.VeVB.COm/online/slide/10261022.jpg" ,"http://img.VeVB.COm/online/slide/10261479.jpg")//圖片路徑寫入數(shù)組 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()//檢索加載狀態(tài) { 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="--"http://初始化透明度矢量 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)//執(zhí)行動作 { 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需刷新才能執(zhí)行]

上一篇：javascript iFrame研究

下一篇：firefox getyear() getFullYear數(shù)獲取年份的問題