小圆点不能正常亮起
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0 ;padding: 0}
#container {width: 200px;overflow: hidden;position: relative;height: 200px}
#list {width: 1000px;position: absolute;}
.v {float: left;width: 200px;height: 200px;background: red}
#buttons {position: absolute;right: 10px;bottom: 10px;}
#buttons span {display: block;width: 10px;height: 10px;border-radius: 50%;background: gray;float: left;margin: 0 5px;}
#buttons .on {background: orange}
.arrow {display: block;width: 10px;height: 40px;background: rgba(125,125,125,.5);line-height: 40px;position: absolute;top: 80px;}
#prev {left: 0}
#next {right: 0}
</style>
<script>
window.onload=function(){
var container=document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var index=1;
function show(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className =="on"){
buttons[i].className = "";
break;
}
}
buttons[index - 1].className ="on";
}
next.onclick=function(){
show();
index += 1;
}
prev.onclick=function(){
show();
index -= 1;
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-200px">
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
</body>
</html>我的小圆点不能正常亮起来，点击next()的时候index不能正常+1；点击第二次的时候第二个小圆点才亮起来，有大神解释一下吗？
