新闻轮播banner轮播解析

搬了办公室，先来撸一撸先，今天就来撸一撸前端最常用的一个效果，轮播，不管是文字轮播还是banner轮播还是页面轮播，各种各样，网上的插件也很多，由于时间有限，主要是将实现原理，如果是一点基础也没有的话那我也没办法了。实现方法主要分三类：

1.通过改变定位的left值来实现水平轮播，有个性的也可以通过改变margin来实现，主要是用定时器不断改变数值达到动的效果

2.第二种主要是通过使用css3,比如用css3的animation，或者transition等来实现，其实也是和第一种一样，通过改变left等来实现，不过这里不需要定时器，css3动画会自动加上过度效果，当然不用定位也是可以的，用transform:translateX(-100%)属性来做到，这是本人比较喜欢的方法，但是需要ie10以上才能兼容，好消息是现在市场上好多公司都直接用了，完全鄙视低版本ie。

3.对于那些非要低版本ie的项目，我们吐槽了以后还是要做的，比较咱就是个搬砖的，老板有需求，得满足是不，第三种方法就是为了满足老板的，简单粗暴，推荐使用：

使用jq的scrollLeft()方法和定时器配合使用，有些没用过的小伙伴可能会觉得好奇怪，这个方法不是用来水平滚动的吗？可是现在我们需要的是轮播，不是滚动条啊，哈哈，

别想那么多，用过才知道，为了帮助正在被老板和ie糟蹋的小伙伴，我就详细的说说这个吧。

html：

<ul class='box'>//这个是轮播要显示的区域，设置宽度高度，然后记得设置溢出隐藏

<li class='new'>这是第一条新闻啊啊啊啊啊</li>

<li class='new'>这是第二条新闻哦哦哦哦哦</li>

<li class='new'>这是第三条新闻了了了了了</li>

</ul>

然后用定时器设置没一段时间增加scrollLeft(number)方法里面的number，如果number大于li总长度之和说明已经滚动完了，怎么处理自己看着办

就是这么简单，如果看着这些文字还不能自己写出来可以给我留言