轮播图
2017-07-16 本文已影响0人
小囧兔
轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()
原理：
克隆第一张图片插入到最后一张图的后面，克隆最后一张图插入到第一张图的，这样，当滚动到最后一张的时候，显示的是克隆的第一张图片，在没滚完之际快速的切到真实的第一张图片，当在第一张往后滚动的时候，同理，显示的是克隆的最后一张，然后快速的切换到真实的最后一张，这样用户感觉不到，就跟无缝滚动的一样。在显示上，对最外层的容器使用，相对定位，并使它的宽度和轮播图的宽度一样，超出部分隐藏，对于要轮播的图片，使用浮动，使它们水平排列，包裹图片的父容器用绝对定位，然后操作图片便宜的距离，就可以达到滚动的效果。
抽出的函数：
1.点击时图片往前滚动
playNext(){}
2.点击时图片往后滚动
playPre(){}
3.设置轮播图下方的点
setDot(){}
4.轮播图无限循环
autoPlay(){}
5.轮播
slider(){}
实现视频中的左右滚动无限循环轮播效果
效果预览
代码
因为没有阻止a的默认事件，狠狠的坑了自己一个下午！
