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