轮播图

1.轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

• 横向轮播：

• 布局：让父容器相对定位，设定宽高为一个图片的宽高，并且overflow:hidden（超出部分不显示）；在父容器中设置一个图片容器，高度为图片高，宽度为图片宽*图片个数；在底部设置小圆点，绝对定位居于父容器底部；

• 逻辑：一开始将尾图片和首图片clone后，分别放在首尾；增加图片容器的宽度；封装向前/向后翻页的方法（包含动画，动画锁，变化小圆点状态）；最后为按钮添加事件（逻辑处理代码）

• 全局变量：curPage（当前第几张图片）和isAnimate（动画加锁）
  封装函数：play(n):封装向后n页（n可以是负数），playNext:向后，playPre:向前。

• 淡入淡出、自动轮播图

• 布局：类似与横向轮播。但是图片是绝对布局，可以互相覆盖。一开始只有第一张图片是显示，其他隐藏。

• 逻辑：与横向轮播类似，不需要clone首尾图片、重设宽度，但要设置定时器循环翻页

• 全局变量和封装函数：与横向轮播类似，方法play(n)

2.实现视频中的左右滚动无限循环轮播效果

代码
展示

3.实现一个渐变轮播效果, 效果范例

代码
展示