为什么加了if(){return}后，点按钮还是会出现图片混乱的问题
<!DOCTYPE html>
<html>
<head>
<title>焦点轮播图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none;}
body{padding: 50px}
#container{
width: 600px;
height: 400px;
border: 1px solid black;
overflow: hidden;/*将超出容器部分(超出图片)隐藏*/
position:relative;/*相对定位*/
}
#buttons{
position: absolute;/*绝对定位*/
height: 10px;
width: 100px;
z-index: 2;/*设置元素的堆叠顺序*/
bottom: 20px;
left: 250px;
}
#buttons span{
border-radius: 50%;
width: 10px;
height: 10px;
border: 1px solid #a1a1a1;
background-color: #dddddd;
cursor:pointer;/*设置鼠标移动到该元素上时变化为手指指示*/
float: left;
margin-right: 5px;
}
#buttons .on{
background: orangered;
}
.arrow{
background-color:rgba(0,0,1,.3);
width: 40px;
height: 40px;
z-index: 2;
position: absolute;
text-align: center;
font-weight: bold;
font-size: 36px;
cursor:pointer;
top:180px;
display: none;
line-height: 39px;
color: white;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow {
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
#list{
width:4200px;
height:400px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
}
</style>
<script type="text/javascript">
window.onload=function(){
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var index=1;
function turO(){
for (var i=0;i<buttons.length;i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
function Smove(a){
list.style.left=list.offsetLeft+a+"px";
var newL=list.offsetLeft+a;
if (newL>600) {
list.style.left=-2400+'px';
}
else if(newL<-3600){
list.style.left=-600+'px';
}
}
prev.onclick=function(){
if (index==1) {
index=5;
}
else{index-=1;
}
turO();
Smove(600);
}
next.onclick=function(){
if (index==5) {
index=1;
}
else{index+=1;
}
turO();
Smove(-600);
}
for (var i = 0;i<buttons.length;i++) {
buttons[i].onclick=function(){
if(this.className == 'on') {
return;
}
var newindex=parseInt(this.getAttribute('index'));
var mo=-600*(newindex-index);
Smove(mo);
index=newindex;
turO();
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/5.jpg" alt="5">
<img src="img/1.jpg" alt="5">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</div>
</body>
</html>
