为什么我的箭头和小圆点跟着第一张图片跑？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style type="text/css">
*{margin:0;padding: 0}
body{padding: 20px}
a{text-decoration: none}
#contaier{
margin:0 auto;
width: 1070px;
height: 338px;
background:2px solid red;
overflow:hidden;
position: relative;}
#list{width: 6420px;height: 338px;position: absolute;z-index: 1;}
#list img{float: left; }
#buttons {position: absolute; height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 535px; margin-left: 10px; }
#buttons span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius:10px; }
#buttons .on{background: orangered;}
.arrow{cursor: pointer;
line-height:40px;
/* display: none; */
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index:2;top: 140px;
background: rgba(0,0,0,0.3);
}
.arrow:hover{background-color: rgba(0,0,0,0.7);}
#contaier:hover .arrow{display: block;}
#prev{position:absolute; left: 20px;}
#next{position:absolute; left: 1010px;}
</style>
</head>
<body>
<div id="contaier">
<div id="list" style="left: 0px ;">
<img src="images/04.jpg">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
<img src="images/04.jpg">
<img src="images/01.jpg">
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
</div>
<script type="text/javascript">
var container=document.getElementById('contaier');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
list.style.left=parseInt(list.style.left)+offset+'px';
}
next.onclick=function(){
animate(-1070);
}
prev.onclick=function(){
animate(1070);
}
</script>
</body>
</html>
