web前端-js小记(17)-轮播的实现

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

1. 滚动轮播的实现原理：
   设置所有的图片无缝隙的放在同一行，并对每张图片设置position:absolute;先再浏览器改变left数值，确定是否可以进行滚动，再编写JS，在第一张图片前clone最后一张图片，在最后一张图片后clone第一张图片，每次移到clone的图片的时候进行css({left})设置，让图片回到真正想要到的图片上。设置一个变量len,记录需要显示的下一张图片距离当前显示图片的距离个数，然后animate()方法进行滑动。
2. 渐变轮播：
   对所有的图片设置隐藏并设置position:absolute;然后再浏览器修改每个图片的display，判断是否可以滚动，通过fadeIn()和fadeOut()渐变图片。
3. 接口：
   前进函数，后退函数
   选择函数
   自动轮播函数

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

代码

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

代码

(mission 17)