---恢复内容开始---
经过一天半的思考终于搞定了if嵌套循环过程，很激动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
<style>
body{
text-align:center;}
#but1{
}
#but2{
}
#box{
width:300px;
height:300px;
border:solid 10px #ccc;
position:relative;
margin:0 auto;
background:green;
}
a{
text-decoration:none;
}
#pre{
position:absolute;
left:0;
top:150px;
background:black;
width:30px;
height:30px;
font-size:25px;
text-align:center;
line-height:30px;
}
#next{
position:absolute;
right:0;
top:150px;
background:green;
width:30px;
height:30px;
font-size:25px;
text-align:center;
line-height:30px;
}
#img{
width:300px;
height:300px;
background:black;
}
#p2{
position:absolute;top:0;
margin:0;
width:300px;
height:30px;
text-align:center;
background:red;
line-height:30px;
}
#p3{
position:absolute;bottom:0;
width:300px;height:30px;
text-align:center;
background:red;
margin:0;
line-height:30px;
}
</style>
<script>
window.onload=function(){
var Btn = document.getElementsByTagName(‘input‘);
var p1= document.getElementById(‘p1‘);
var p2= document.getElementById(‘p2‘);
var p3= document.getElementById(‘p3‘);
var img=document.getElementById(‘img‘);
var next=document.getElementById(‘next‘);
var pre=document.getElementById(‘pre‘);
var num=0;
var arrimg=[‘1.jpg‘,‘2.jpg‘,‘3.jpg‘,‘4.jpg‘];
var arrtext=[‘第一张‘,‘第二张‘,‘第三张‘,‘第四张‘];
var onoff =true;
Btn[0].onclick=function(){onoff=true; p1.innerHTML=‘图片循环‘;};
Btn[1].onclick=function(){onoff=false; p1.innerHTML=‘图片顺序‘;};
function be(){
p2.innerHTML=1+num+‘/‘+arrimg.length;
p3.innerHTML=arrtext[num];
img.src=arrimg[num];
};
be();
pre.onclick=function(){num--;if(num==-1){if(onoff){num=arrimg.length-1}else{num=0;alert(‘不能再往前了‘)}}be()}
next.onclick=function(){
num++;
if(num==arrimg.length){if(onoff){num=0;}else{num=arrimg.length-1;alert(‘这是最后一张了‘);}}be();
};
}
</script>
</head>
<body>
<input type="button" value="循环" />
<input type="button" value="顺序" />
<p id="p1">循环</p>
<div id="box">
<a id="next" href="#">></a>
<a id="pre" href="#"><</a>
<p id="p2">图片数量计算中</p>
<img id="img" src="" />
<p id="p3">图片正在加载中</p>
</div>
</body>
</html>
OK来说一说这个NUM++吧，当num不等于arrimg.length的时候那他就不执行下面的循环直接执行be（） 如果num++等于arrimg.length的时候就执行下一个循环了，当onoff为true的时候那么就执行循环的按钮 num变为0重新开始循环，如果为false就执行顺序的按钮num变成arrimg.length-1就变成了最后一张图片。
这么简单的东西理解了这么久，又笨又不努力，也是醉了。是该上床好好反省反省了。
---恢复内容结束---
原文：http://www.cnblogs.com/0o797/p/4850481.html