关于焦点轮播图的布局疑问和点击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;