图片轮播--基于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：

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

效果：