图片轮播--基于JS数组实现

之前发布过一款js图片轮播,是利用js调整margin来实现的轮播,代码、思路、逻辑比较复杂,今天介绍一款相当简单的图片轮播–基于JS数组实现。
设计思路:
定义一个数组mypic,用于存放三张图片地址,mypic[0]是第一张图片的地址,mypic[1]是第二张图片的地址,mypic[2]是第三张图片的地址。利用JS获取到的节点改变其src=mypic[i],做到图片变换。

js代码:

window.onload=initLinks;
    var mypic=new    Array("tplb2/t1.jpg","tplb2/t2.jpg","tplb2/t3.jpg");
    //定义数组来存放图片地址
    var thispic=0;
    function initLinks(){
        document.getElementById('befLink').onclick=turnBef;
        document.getElementById('nexLink').onclick=turnNex;
    }
    function turnBef(){
        if(thispic==0){
            thispic=mypic.length;
        }
        thispic--;
        document.getElementById('tplbimg').src=mypic[thispic];
        return false;
    }
    function turnNex(){
        thispic++;
        if(thispic==mypic.length){
            thispic=0;
        }
        document.getElementById('tplbimg').src=mypic[thispic];
        return false;
    }

html:

class="tplb"> "tplb2/t1.jpg" id="tplbimg" alt="" width="500" height="300"> type="button" id="befLink" value="上一张"> type="button" id="nexLink" value="下一张">

效果:
图片轮播--基于JS数组实现_第1张图片

你可能感兴趣的:(JavaScript)