轮播图

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

原理:
克隆第一张图片插入到最后一张图的后面,克隆最后一张图插入到第一张图的,这样,当滚动到最后一张的时候,显示的是克隆的第一张图片,在没滚完之际快速的切到真实的第一张图片,当在第一张往后滚动的时候,同理,显示的是克隆的最后一张,然后快速的切换到真实的最后一张,这样用户感觉不到,就跟无缝滚动的一样。在显示上,对最外层的容器使用,相对定位,并使它的宽度和轮播图的宽度一样,超出部分隐藏,对于要轮播的图片,使用浮动,使它们水平排列,包裹图片的父容器用绝对定位,然后操作图片便宜的距离,就可以达到滚动的效果。
抽出的函数:

1.点击时图片往前滚动
playNext(){}
2.点击时图片往后滚动
playPre(){}
3.设置轮播图下方的点
setDot(){}
4.轮播图无限循环
autoPlay(){}
5.轮播
slider(){}

实现视频中的左右滚动无限循环轮播效果

效果预览
代码
因为没有阻止a的默认事件,狠狠的坑了自己一个下午!

实现一个渐变轮播效果

效果预览
代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容