超簡單的走馬燈效果

雖然走馬燈的效果看起來很簡單，網上也有很多的教程能夠直接copy，然而還是第一次研究這個的實現方法。

先把div給定義出來，寫好布局。

<div class="wrapper">
       <div id="box">
              <div>slide1</div>
              <div>slide2</div>
              <div>slide3</div>
              <div>slide4</div>
              <div>slide5</div>
              <div>slide6</div>
              <div>slide1</div>
              <div>slide2</div>
              <div>slide3</div>
              <div>slide4</div>
         </div>
  </div>    

在實際滾動中，其實只有6個div，后面的4個div是為了做成一個假象，形成一個無縫銜接。

css:

*{padding:0;margin:0;}
.wrapper{position:relative;width:1200px;overflow: hidden;margin:0 auto;height: 300px;}
#box{width:3100px;position: absolute;}
#box div{width:300px;height: 300px;margin:0 5px;background: #dfdfff;float: left;}

#box的寬度為3100px來自於一個div的寬度為300px，再加上左右的margin為5px，所以實際寬度為310px，總共有10個div，即#box的寬度為3100px，假設你還需要多添加幾個div，就按這個方法設置寬度就行。

js：

            var num = 1;
            setInterval(function(){
                num--;
                var insider = document.getElementById("box");
                insider.style.cssText="left:"+num+"px";
                if(num<-1860) num=1;
            },5);

js中主要是通過setInterval來實現循環滾動，其中的1860就是前6個div的寬度，如果有添加多的div，還是按照300px+10px去計算。