for里面可以不添加 break跳出循环，buttons也可以不加index自定义属性

<div id="buttons">

<span  class="on"></span>

<span ></span>

<span ></span>

<span ></span>

<span ></span>

</div>

 <a href="javascript:;" id="prev" class="arrow"><</a>

<a href="javascript:;" id="next" class="arrow">></a>

   </div>

   <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");

  var index=0;

  function showButton(){

    for(i=0;i<buttons.length;i++){

    if(buttons[i].className=="on"){

  buttons[i].className="";

}

   }

    buttons[index].className="on"

  }