JS面向对象的应用：轮播的实现

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

• 布局：父容器相对定位，并使其宽高与一张图片的宽高相等，设置溢出隐藏：overflow:hidden,然后在父容器中设置一个图片容器，高度与图片相等，宽度为所有图片的宽度（其宽度由于不固定，故用js来实现），并设置绝对定位，以通过自定义动画的形式使其移动。所有图片设置浮动，使其水平排成一列。再设置一个向前滚动和向后滚动的摁钮,和可以快速移动到相应图片的标记。
• 逻辑：先将首图片和尾图片clone后，分别放在图片容器尾首，设置图片容器的宽度等于(原图片数+2)*图片宽度；每按一次按钮图片容器就向前或向后移动一张图片的宽度的距离。
• 重点：当滚动到clone的首图片时，就立即显示真实的首图片，当滚动到clone的尾图片时，就立即显示真实的尾图片，这样就可以实现肉眼下的无限循环效果。当快速切换到不同页面时就需要知道当前正在展现的是哪一页，可以设置一个标记位，初始值为0，每次切换时这个标记位的值都要跟着改变。
• 函数接口：

autoPlay();
playPre();
playNext();
setBullet();

轮播的实现
JS代码