轮播
2017-11-06 本文已影响0人
饥人谷_星璇
轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
- 轮播的实现原理是将所有的轮播图排成一排，然后让这一列的图片使用绝对定位和设置CSS的动画效果的left来进行位移，打到动态切换图片的目的。接着将这一列图片的第一张和最后一张复制然后第一张放到最后，最后一张放到最前，当滚动到这两张图片之时，将动画执行完毕之后再直接回到第一张或者最后一张，这样就可以实现一个左右滚动无限循环的轮播效果。当使用按钮直接切换图片之时，就需要知道需要切换的图片位置与当前图片位置，可以给每一张图片设置一个标记数字，第一张图为0，以此类推，这样的话需要切换到的图片的数字减去当前图片的数字就是需要切换的数字。
- 接口：
play(curIndex):切换图片以及设置切换的图片的数量，curIndex为1表示切换到下一张图片，-1表示切换到上一张图片。
setButton():将当前显示图片代表的按钮特殊显示（比如实心）
