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

</div> 
</center>

　　 [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://dl.glzy8.com/img/online/slide/.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F.gif" id="photo" style=""></div> 
</body> 
</html> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%0D%0Afunction%20tM(Message)%20%0D%0A%7B%20%0D%0A%24(%22testMessage%22).innerHTML%3DMessage%20%0D%0A%7D%20%0D%0Afunction%20dR(topr)%20%0D%0A%7B%20%0D%0Adocument.write(topr)%20%0D%0A%7D%20%0D%0Afunction%20%24(eleId)%20%0D%0A%7Breturn%20document.getElementById(eleId)%7D%20%0D%0A%2F%2F%E9%A2%84%E8%BD%BD%E5%9B%BE%E7%89%87%20%0D%0Avar%20imasrc%3Dnew%20Array(%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10254068.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10254629.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10255187.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10255626.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10260076.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10260471.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10261022.jpg%22%20%0D%0A%2C%22http%3A%2F%2Fimg.glzy8.com%2Fonline%2Fslide%2F10261479.jpg%22)%2F%2F%E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84%E5%86%99%E5%85%A5%E6%95%B0%E7%BB%84%20%0D%0Avar%20preIma%3Dnew%20Array()%20%0D%0Avar%20dB%3Dnew%20Date()%20%0D%0Afor%20(i%3D0%3Bi%20%3C%20imasrc.length%3Bi%2B%2B)%2F%2F%E9%A2%84%E8%BD%BD%E6%89%80%E6%9C%89%E5%9B%BE%E7%89%87%20%0D%0A%7B%20%0D%0ApreLoadImg(i)%20%0D%0A%7D%20%0D%0Afunction%20preLoadImg(imgIndex)%2F%2F%E9%A2%84%E8%BD%BD%E6%8C%87%E5%AE%9A%E5%9B%BE%E7%89%87%E5%9B%BE%E7%89%87%20%0D%0A%7B%20%0D%0ApreIma%5BimgIndex%5D%3Dnew%20Image()%20%0D%0ApreIma%5BimgIndex%5D.imgReadyStatus%3Dfalse%20%0D%0ApreIma%5BimgIndex%5D.imgIndex%3DimgIndex%20%0D%0ApreIma%5BimgIndex%5D.onload%3DimgLoad%20%0D%0ApreIma%5BimgIndex%5D.onerror%3DimgError%20%0D%0ApreIma%5BimgIndex%5D.onabort%3DimgAbort%20%0D%0ApreIma%5BimgIndex%5D.src%3Dimasrc%5BimgIndex%5D%20%0D%0A%7D%20%0D%0Afunction%20imgLoad()%2F%2F%E9%A2%84%E8%BD%BD%E5%AE%8C%E6%88%90%20%0D%0A%7B%20%0D%0Athis.imgReadyStatus%3Dtrue%20%0D%0A%7D%20%0D%0Afunction%20imgError()%2F%2F%E9%A2%84%E8%BD%BD%E5%A4%B1%E8%B4%A5%20%0D%0A%7B%20%0D%0ApreLoadImg(this.imgIndex)%20%0D%0A%7D%20%0D%0Afunction%20imgAbort()%2F%2F%E9%A2%84%E8%BD%BD%E5%8F%96%E6%B6%88%20%0D%0A%7B%20%0D%0ApreIma.splice(this.imgIndex%2C1)%20%0D%0A%7D%20%0D%0Avar%20checkAgain%20%0D%0Afunction%20checkImgReadyStatus()%2F%2F%E6%A3%80%E7%B4%A2%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81%20%0D%0A%7B%20%0D%0Avar%20imgReadyStatus%3Dtrue%20%0D%0Avar%20persent%3D0%20%0D%0Avar%20dE%3Dnew%20Date()%20%0D%0Afor%20(i%3D0%3Bi%20%3C%20preIma.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif%20(!preIma%5Bi%5D.imgReadyStatus)%20%0D%0A%7BimgReadyStatus%3Dfalse%7D%20%0D%0Aelse%20%0D%0A%7Bpersent%2B%2B%7D%20%0D%0A%7D%20%0D%0AtM(%22%E5%AE%8C%E6%88%90%3A%22%2B(persent%2FpreIma.length*100).toFixed(2)%2B%22%25%3Cbr%3E%E8%BD%BD%E5%85%A5%3A%22%2Bpersent%2B%22%E5%BC%A0%E5%9B%BE%E7%89%87%3Cbr%3E%E6%B6%88%E8%80%97%E6%97%B6%E9%97%B4%3A%22%2B((dE-dB)%2F1000).toFixed(0)%2B%22%E7%A7%92%22)%2F%2F%E6%98%BE%E7%A4%BA%E8%BF%9B%E5%BA%A6%20%0D%0Aif%20(imgReadyStatus)%20%0D%0A%7B%20%0D%0A%24(%22photoContrl%22).style.display%3D%22block%22%20%0D%0AautoPlay()%20%0D%0AclearTimeout(checkAgain)%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0AcheckAgain%3DsetTimeout(checkImgReadyStatus%2C1000)%2F%2F%E6%A3%80%E7%B4%A2%E9%A2%91%E7%8E%87%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AcheckImgReadyStatus()%20%0D%0A%0D%0A%2F%2F%E5%B9%BB%E7%81%AF%E7%89%87%E6%95%88%E6%9E%9C%20%0D%0Avar%20photoIndex%3D0%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E5%9B%BE%E7%89%87%E7%B4%A2%E5%BC%95%20%0D%0Avar%20opacity%3D10%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E9%80%8F%E6%98%8E%E5%BA%A6%20%0D%0Avar%20direct%3D%22--%22%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E9%80%8F%E6%98%8E%E5%BA%A6%E7%9F%A2%E9%87%8F%20%0D%0Avar%20doPlay%2F%2F%E5%AE%9A%E4%B9%89%E6%92%AD%E6%94%BE%20%0D%0Avar%20doAutoPlay%2F%2F%E5%AE%9A%E4%B9%89%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%20%0D%0Afunction%20prevPhoto()%7Bplay(-1)%7D%2F%2F%E5%89%8D%E7%BF%BB%20%0D%0Afunction%20nextPhoto()%7Bplay(1)%7D%2F%2F%E5%90%8E%E7%BF%BB%20%0D%0Afunction%20autoPlay()%2F%2F%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%20%0D%0A%7B%20%0D%0Aif%20(doAutoPlay)%20%0D%0A%7B%20%0D%0AclearInterval(doAutoPlay)%20%0D%0AdoAutoPlay%3Dnull%20%0D%0A%24(%22pp%22).innerHTML%3D%22Play%22%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aplay(1)%20%0D%0AdoAutoPlay%3DsetInterval(%22play(1)%22%2C3000)%2F%2F%E5%AE%9A%E4%B9%89%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E9%A2%91%E7%8E%87%20%0D%0A%24(%22pp%22).innerHTML%3D%22Pause%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20stopPlay()%2F%2F%E5%81%9C%E6%AD%A2%E6%92%AD%E6%94%BE%20%0D%0A%7B%20%0D%0AclearInterval(doAutoPlay)%20%0D%0AdoAutoPlay%3Dnull%20%0D%0AphotoIndex%3D0%20%0D%0Aplay(0)%20%0D%0A%24(%22pp%22).innerHTML%3D%22Play%22%20%0D%0A%7D%20%0D%0Afunction%20play(act)%2F%2F%E6%89%A7%E8%A1%8C%E5%8A%A8%E4%BD%9C%20%0D%0A%7B%20%0D%0Aif%20(preIma.length!%3D0)%20%0D%0A%7B%20%0D%0Aif%20(doPlay)%20%7BclearInterval(doPlay)%7D%20%0D%0AdoPlay%3DsetInterval(switchPhoto%2C10)%20%0D%0AphotoIndex%3D(photoIndex%2Bact%2BpreIma.length)%25preIma.length%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20switchPhoto()%2F%2F%E5%88%87%E6%8D%A2%E7%85%A7%E7%89%87%20%0D%0A%7B%20%0D%0Aeval(%22opacity%22%2Bdirect)%20%0D%0AsetOpa(opacity)%20%0D%0Aif%20(opacity%20%3C%3D%201)%20%0D%0A%7B%20%0D%0Adirect%3D%22%2B%2B%22%20%0D%0A%24(%22photo%22).src%3DpreIma%5BphotoIndex%5D.src%20%0D%0A%7D%20%0D%0Aelse%20if%20(opacity%20%3E%3D%2010)%20%0D%0A%7B%20%0D%0Adirect%3D%22--%22%20%0D%0AclearInterval(doPlay)%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20setOpa(opacity)%2F%2F%E6%94%B9%E5%8F%98%E9%80%8F%E6%98%8E%E5%BA%A6%20%0D%0A%7B%20%0D%0Aif%20(%24(%22photo%22).style.filter!%3Dnull)%20%0D%0A%7B%24(%22photo%22).style.filter%3D%22alpha(opacity%3D%22%2Bopacity*10%2B%22)%22%7D%20%0D%0Aelse%20%0D%0A%7B%24(%22photo%22).style.opacity%3Dopacity%2F10%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程

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

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