轮播的实现原理是怎样的？可以抽象出哪些函数(or接口)供使用？（比如 play()）

轮播的原理是将轮播的图片水平排列，在展示的视口内显示内容，超出视口范围的内容隐藏。通过设置位置偏移在视口内显示出需要看到的内容。

实现轮播效果思路

HTML，CSS部分：

图片放置在ul标签内，外部包裹div,设置position:relative.隐藏视口外的内容overflow：hidden；ul设置position：absolute。li内的img设置左浮动。

js部分：

• 获取ul节点，获取图片数量imgCount、获取图片长度imgWidth，声明pageIndex记录当前图片位置。
• clone第一张图片添加在图片列表的最后，clone最后一张图片添加在图片列表的最前面，因为在最前面添加了一张图片，所以需要一个向右图片宽度的偏移。
• 获取图片列表的宽度，ul内的图片数量+clone的两张图片
• 定义函数playNext(len),playPre(len)
• playNext(): 执行该函数时使用动画将ul向左偏移一个图片(假设len=1)的宽度，动画结束后，将pageIndex加1，同时判断curIndex是否为最后一个图片(此时显示的其实是第一个图片)，如果是的，则将ul定位到真正的第一个图片的位置(使用css方法的left进行设置)
• playPre(): 该函数与playNext移动的方向相反，执行该函数时，使用动画将ul向右偏移一个图片的宽度，动画结束后，将pageIndex减1，同时判断pageIndex是否为第一个图片(此时显示的其实是最后一个图片)，如果是的，则将ul定位到真正的最后一个图片的位置