纯js大图幻灯片播放方法实例页面

展示

随便点击下面的图片查看大图:

回到相关文章 >>

代码

HTML代码:
<p id="demoImgList">
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm4.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm5.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm6.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm7.jpg" />
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm8.jpg" />
</p>
            
JS代码:
<script type="text/javascript" src="../js/zxx.albumshow.js"></script>
var oImgs = document.getElementById("demoImgList").getElementsByTagName("img");
var l = oImgs.length, urlArr = [];
for(var i=0; i<l; i++){
    urlArr.push(oImgs[i].src.replace("s256","s512"));
    oImgs[i].onclick = function(i){
        return function(){
            fnPicShow(urlArr,i);
        }
    }(i);
}