进阶17 轮播

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

• 将轮播的图片放置在一条直线上
  1.创建一个容器用来展示轮播图片的窗口<div class="carouselr">，只留出一个图片的宽度，其它图片均不可见overflow:hidden;position:relative;。
  2.克隆第一张和最后一张图片放置在直线的最后和最前，当滚动上述两个图片时，回到该复制体原图片的位置。
  3.发生滚动时根据需要向左或向右偏移(imgCount+2)*图片宽度的位置，使窗口中的图片达到看似向左或向右滑动的效果。
• 将轮播的图片放置在同一垂直平面上，记录当前图片编号和要滚动到的图片编号，轮播时显示要滚动到的图片，隐藏掉之前的图片
• playNext(); // 点击“下一个”按钮("<a class="arrow next")，使图片向左滑动
playPrev(); //点击“上一个”按钮("<div class="arrow pre")，使图片向右滑动
setBullet(); //根据当前展示图片的索引，将`class=active`的样式切换到对应的tab

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

Carousel-demo

题目3：实现一个渐变轮播效果, 效果范例

渐变轮播效果