雖然走馬燈的效果看起來很簡單，網上也有很多的教程能夠直接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去計算。

?

轉載于:https://www.cnblogs.com/hongyafang/p/7987768.html

總結

以上是生活随笔為你收集整理的超简单的走马灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。