超简单的走马灯效果

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

总结

以上是生活随笔为你收集整理的超简单的走马灯效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。