HTML常用组件——轮播组件
学习前端有段时间了，一直在学却没能好好总结一下不足的地方，所以想写个可以自己不断完善的demo库
so， 这次写了两种特效的组件。一种是滚动特效，一种是透明度渐变特效的。下面挨着挨着分析一下实现原理，希望有所帮助（代码可以GitHub自取~）
1. 透明度渐变效果的轮播
相比滚动效果这个效果相对简单。
首先分析布局：
首先一定有一个最外层容纳的容器，用于包含内部滚动图片。其次内部就是存放图片的组件。
可以像上面这样。当然也可以换成列表的形式。
定位部分。透明度渐变，我们需要内层所有替换的图片位置是相同的，通过覆盖的效果隐藏。
所以内层的每个rect的position属性设置为absolute，（left:0,top:0）（注意外层容器必须要设置position属性）。因为初始显示一张图片，所以可以将第一张的display置为block，其余置为none。
为了简化之后js的透明度操作，我们可以将每个rect的transition属性添加一个时间。
可以看出布局很简单，下面来说说关键的js代码部分。
因为图片是定时切换，所以要使用setInterval或者setTimeout函数。我这里使用的是setTimeout。
不清楚setTimeout或者setInterval用法的可以戳：https://segmentfault.com/a/1190000007469371
首先在页面加载完毕的时候要触发定时器。
声明一个全局定时器，我在这里规定2500ms触发：
timer = setTimeout('utils.goPlay()', 2500)
我们要获取这些图片组件，所以：
var rects = document.getElementByClassName('rect')
每到一个定时的时候我们将上一个时刻显示的图片的display属性置为none，而将下一张的display置为block。
if (obj.className.match(/showing/)) {
return
}
for (var i = 0; i < carousel.getCount(); ++i) {
var children = carousel.getChildrens()[i]
children.className = children.className.replace(/\sshowing/, '')
}
obj.className += ' showing'
在这里我为了简便，添加了一个showing类用来添加display属性。由此便可实现简便效果的轮播。
具体代码已经上传至GitHub。
2.滚动效果的轮播
首先布局部分。HTML代码大同小异，都是一个父组件包含下面的图片，同样可采用列表。
不同的是由于是滚动效果，变化的是每一个图片相对于父组件的left位置变化，因此需要在里面添加一个p容器。
对于最外层的父组件，相当于一个显示窗口。
如图所示，父组件就是图中粗线的部分，而实际的图片布局为1,2,3,4横向排布，但是只有进入粗线框的部分才会显示。
因此我们可以发现父组件一定要设置overflow:hidden属性。
而子组件的横向排布可以使用float:left来解决。
js部分也是需要一个定时器，每隔一段时间就设置组件的left值，来进行左右移动，以达到滚动效果的目的。具体代码也可以参照GitHub。
