我的js没有效果，不知道哪里错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
*{margin:0;padding:0;text-decoration: none;}
body{padding:20px;}
#container{width:500px; height:400px;margin:0 auto; border:3px solid #333;overflow:hidden;position: relative;}
#list{ width:3500px; height:400px; position: absolute;z-index: 1;}
#list img{ width:600px; height:400px;float:left;}
#buttons{position: absolute;height:10px; width:100%; z-index: 2; bottom: 20px; left:250px;}
#buttons span{ cursor: pointer; float:left; border:1px solid #fff; width:10px; height:10px; border-radius:50%; background:#333;margin-right:10px; }
#buttons .on{background: red;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align: center; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute;z-index:2;top:180px;color:white; }
.arrow:hover{ background: rgba(0,0,0,0.7);}
#container:hover .arrow{ display:block;}
#prev{ left:20px;}
#next{ right:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById('container');
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(-500);
}
prev.onclick=function(){
animate(500);
}
}
</script>
</head>
<body>
<div id="container">
<div id="list">
<img src="images/5.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/5.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
</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>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
