HTML常用组件——轮播组件

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')

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'

具体代码已经上传至GitHub。

2.滚动效果的轮播

首先布局部分。HTML代码大同小异，都是一个父组件包含下面的图片，同样可采用列表。

不同的是由于是滚动效果，变化的是每一个图片相对于父组件的left位置变化，因此需要在里面添加一个div容器。

对于最外层的父组件，相当于一个显示窗口。

如图所示，父组件就是图中粗线的部分，而实际的图片布局为1,2,3,4横向排布，但是只有进入粗线框的部分才会显示。

因此我们可以发现父组件一定要设置overflow:hidden属性。

而子组件的横向排布可以使用float:left来解决。

js部分也是需要一个定时器，每隔一段时间就设置组件的left值，来进行左右移动，以达到滚动效果的目的。具体代码也可以参照GitHub。