轮播的原理

滑动轮播
1.轮播的图片水平排列
2.给出一个与图片相同大小的视窗包裹图片列，设置overflow: hidden，这样视窗就只能看到一张图片
3.通过position：absolute或者transform来移动整个图片列，实现轮播的基本逻辑；
4.将第一张和最后一张图片克隆分别放到末尾和首部，目的是为了当轮播滚动到最后一张图时，那么它的下一张就会到克隆第一张图，这个时候马上把整个图片列回归到真实的第一张，达到无限循环轮播
5.可以抽离出一些函数分别实现一些按钮功能，如：

function 播放下一张() {
  //...
}

function 播放上一张() {
  //...
}

再绑定按钮事件，轮播更具交互性

渐变轮播
1.与滑动轮播的布局基本类似，不过这里图片要重叠在一起，可以对单张图片进行position：absolute实现，且display：none
2.渐变轮播的核心是确定渐变离开的图片和渐变进入的图片。
当图片渐变离开时，下一张图片应该渐变进入。
渐变效果可以使用jQuery的fadeIn()和fadeOut()实现
3.与滑动轮播类似，可以抽离出一些函数，实现播放上一张和下一张的功能按钮，让轮播更具交互性

!!下面是两个demo，图片较大，防止bug，图片加载完成前不会进行轮播，耐心等待!!
滑动轮播
https://leeeozhang.github.io/Demos/carousel-slide/
渐变轮播
https://leeeozhang.github.io/Demos/carousel-fade/