图片模式切换的代码

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--;
<
4000
span style="color:#cc7832;">        if( num == -1 ){//如果切换到第一张还是点击向前切换的话，
if(tunOff){//当为循环模式的时候，将arrImg的长度-1赋值给num，使其跳到最后一张
num = arrImg.length-1;
}
else{
alert('这已经是第一张了，不能再往前了');//当为切换模式的时候，切换到第一张的话再向前切换就会提示，然后重置num 等于0
num = 0;
}
}
fn1();//执行代码块
};

};