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();//执行代码块 }; };