轮播的实现原理是怎样的?可以抽象出哪些函数(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定位到真正的最后一个图片的位置