图片模式切换的代码

window.onload = function(){
    var zImg = document.getElementById('img1');//拿到图片的ID
    var zP1 = document.getElementById('p1');//拿到图片最上面的文字ID
    var zP2 = document.getElementById('p2');//拿到图片最下面的文字ID
    var zBtn1 = document.getElementById('leftbuttom');//拿到图片内左按钮的ID
    var zBtn2 = document.getElementById('rightbuttom');//拿到图片内右按钮的ID
    var zBtnone = document.getElementById('button1');//拿到循环切换按钮的ID
    var zBtntwo = document.getElementById('button2');//拿到顺序切换按钮的ID
    var zButtom = document.getElementById('buttom');//拿到最下面的说明文字ID
    var arrImg = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];//建立图片数组
    var arrText = ['图片一','图片二','图片三','图片四'];//建立图片内最下面的文字数组
    var num = 0;//建立变量并初始化为0，要用这个变量控制图片切换
    var tunOff = true;//控制模式切换变量

    zBtnone.onclick = function(){//循环模式
        zButtom.innerHTML = '图片可从最后一张跳转到第一张循环切换';
        tunOff = true;//
    };
    zBtntwo.onclick = function(){//切换模式
        zButtom.innerHTML = '图片只能到最后一张或只能到第一张切换';
        tunOff = false;//
    };
    //初始化
    function fn1(){
        zImg.src = arrImg[num];
        zP1.innerHTML = 1 + num + '/'+ arrImg.length;
        zP2.innerHTML = arrText[num];
    }
    fn1();
    zBtn2.onclick = function(){
        num++;
        if(num == arrImg.length){//当检测到变量num的值等于图片数组的长度时，再判断模式
            if(tunOff){//如果是循环模式，则num重置为0
                num = 0;
            }
            else{//如果是切换模式，就弹出提示框，然后将变量num的值改为图片数组长度-1，再点击的话，num也是等于arrImg的长度减1
                alert('这已经是最后一张了，不能再往后了');
                num = arrImg.length-1;
            }
        }
        fn1();
    };
    zBtn1.onclick = function(){
        num--;
        if( num == -1 ){//如果切换到第一张还是点击向前切换的话，
            if(tunOff){//当为循环模式的时候，将arrImg的长度-1赋值给num，使其跳到最后一张
                num = arrImg.length-1;
            }
            else{
                alert('这已经是第一张了，不能再往前了');//当为切换模式的时候，切换到第一张的话再向前切换就会提示，然后重置num 等于0
                num = 0;
            }
        }
        fn1();//执行代码块
    };

};