关于焦点轮播图的布局疑问和点击bug

Question

第一个问题  关于布局的疑问就是

 我是用一个div相对定位，里面再有一个div绝对定位，放链接图片，然后就是外面的div设置了一张图片显示的宽度，其他隐藏，但还是出现上一张图片的边缘，想了许久没有搞懂为什么？

第二个问题  关于点击按钮的

我测试了下，再不添加showbutton这个函数时，图片是可以无限循环滚动的，加上浏览器报错也是提示showbutton函数最后的if判断和最后一句出现 undefriend好像，不过还是没查出个所以然，所以请求哪位大神帮我看下

以下是html代码

          <div id="img_box" >
                    <div class="img_banner" id="img_banner" style="left:-730px;">
                        <a href="#"><img src="images/banner5.jpg"></a>
                        <a href="#"><img src="images/banner1.jpg"></a>
                        <a href="#"><img src="images/banner2.jpg"></a>
                        <a href="#"><img src="images/banner3.jpg"></a>
                        <a href="#"><img src="images/banner4.jpg"></a>
                        <a href="#"><img src="images/banner5.jpg"></a>
                        <a href="#"><img src="images/banner1.jpg"></a>
                   </div>
                   <!--上一张和下一张的按钮-->
                  <div id="page">
                         <a href="#" id="perv"><</a>
                         <a href="#" id="next">></a>
                  </div>
                  <!--1至5的页签按钮-->
                  <div id="button">
                       <a href="#" id="1" class="on">1</a>
                       <a href="#" id="2">2</a>
                       <a href="#" id="3">3</a>
                       <a href="#" id="4">4</a>
                       <a href="#" id="5">5</a>
                  </div>
           </div>

css代码（出问题的这一部分）

#img_box{
                 width:730px;
                 height:454px;
                 overflow:hidden;
                 position:relative;
                 float:left;
                 z-index:2;
                 margin:12px;
                 margin-right:0px;
}
.img_banner{
                width:5110px;
                height:454px;
                position:absolute;
                z-index:3;
}

js代码

window.onload = function(){
             var imgbox = document.getElementById('imgbox');
             var list = document.getElementById('img_banner');
             var perv = document.getElementById('perv');
             var next = document.getElementById('next');
             var buttons = document.getElementById('button').getElementsByTagName('a');
             var index =1;
         
             function showbutton(){
                    for(i=0; i<buttons.length; i++){
                          if(buttons[i].className = "on"){
                              buttons[i].className ="";
                          }
                        
                    }
                      buttons[ index - 1 ].className ="on";      谷歌就是这里报错
            }

             //封装成一个函数，并给它传入一个参数
             function animate(off){
                      var newleft =  parseInt(list.style.left) +off;
                      alert(newleft);
                      list.style.left =  newleft+'px';
                      
                      
                      if(newleft > -730){
                         list.style.left = -3650 +"px";  
                      }
                      if(newleft <-3650){
                         list.style.left = -730 +"px";  
                      }
             }                                  
            next.onclick = function(){
                      index += 1;
                      showbutton();                  
                      animate(-730);
                      return false;
             }
             perv.onclick = function(){
                      index -= 1;
                      showbutton();
                      animate(730);
                      return false;
          }                
}

Answer 1

问题已经解决了，点击的bug一个是@重成说的 关于赋值= 和==的 这个错误，不得不说犯了一个低级错误，另一个错误的地方就是没有给按钮加判断，当点击next按钮时要加一个关于index的判断，点击到第五张图片时，图片回到第一张，所以按钮也要回到第一个，所以index这个时候要等于1，很奇怪的是谷歌等浏览器都是报错className，只有火狐才是报错index-1  underfind;