<style>
body{text-align: center}
#box{width:400px;height:400px;border:5px solid #e5e5e5;margin:20px auto;position:relative;}
#img{width:100%;height:100%;}
#text1{width:100%;height:30px;position:absolute;left:0;top:0;background: #000;text-align:center; line-height:30px;color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
#text2{width:100%;height:30px;position:absolute;left:0;bottom:0;background: #000;text-align:center; line-height:30px; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
a{width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev {left:10px;}
#next {right:10px;}
</style>
<body>
<input id="btn1" type="button" value="循环切换">
<input id="btn2" type="button" value="顺序切换">
<p id="p1">图片可以循环</p>
<div id="box">
<img id="img" />
<p id="text1"></p>
<p id="text2">图片文字加载中……</p>
<a id="prev" href="javascript:void(0)"><</a>
<a id="next" href="javascript:void(0)">></a>
</div>
</body>
<script>
window.onload= function(){
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBox=document.getElementById("box");
var oImg=document.getElementById("img");
var oText1=document.getElementById("text1");
var p1=document.getElementById("p1");
var oText2=document.getElementById("text2");
var oPrev=document.getElementById("prev");
var oNext=document.getElementById("next");
var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
var arrTxt=["文案1","文案2","文案3","文案4"];
var num=0;
var onOff=true; //true 循环 false 走顺序
function fn(){ //开始先定义一个公共函数方便下面调用
oImg.src = arrSrc[num]; //图片的显示路径
oText1.innerHTML= num+1 +"/" + arrTxt.length; //图中二号位置的数字显示
oText2.innerHTML=arrTxt[num]; //图中三号位置的文字显示
}
fn();/*切记，定义之后，这里一定要调用一下*/
//循环按钮
oBtn1.onclick=function(){
onOff=true;
p1.innerHTML="图片会循环"
};
//顺序按钮
oBtn2.onclick=function(){
onOff=false;
p1.innerHTML = "图片按顺序走"
};
oPrev.onclick = function(){
num--; //点击左边的箭头那么就是num--
if(onOff){ //onOff默认是true所以就是走循环了
if(num==-1){ //在一直减的过程中，数组里最小的就是0，所以等于-1的时候要循环下去所以让它显示最后一张
num=arrSrc.length-1;
}
}else{ //否则onOff是false所以就是走顺序了
if(num==-1){ //在一直减的过程中，数组里最小的就是0，所以等于-1的时候没有数据走了，所以让它显示第一张不能点击了
num=0;
alert("已经是第一张了")
}
}
fn();//判断好之后记得调用函数
};
//相反下面就是点击左边的箭头所做出的判断，道理同上
oNext.onclick = function(){
num++;
if(onOff){
if(num==arrTxt.length){
num=0;
}
}else{
if(num==arrTxt.length){
num=arrSrc.length-1;
alert("已经是最后一张了")
}
}
fn();
}
}
</script>