超简单的走马灯效果

虽然走马灯的效果看起来很简单，网上也有很多的教程能够直接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去计算。