轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())
- 轮播的实现原理:
- 先将需要展示的图片及它们的父容器设置为相同的尺寸(等宽等高),并且将超出父容器以外的部分隐藏,这样就可以保证同时只显示其中一张图片;
- 对于左右滚动效果的轮播,需要将图片无间距地排成一横排(这里可以使用绝对定位、浮动等方法来实现)。
当我们点击切换按钮的时候,改变图片整体的left值,实现视觉上向左或向右的滚动; - 对于渐变效果的轮播,需要让图片层层覆盖,并且先展示其中一张,其它的进行隐藏。
当我们点击切换按钮的时候,让正在被展示的图片消失,同时根据index值,找到对应序号的图片并展示即可。
- 实现轮播的过程中通常会用到以下几个函数:
playNext():绑定html中向右的按钮,展示下一张图片;
playLast():绑定html中向左的按钮,展示上一张图片;
setBullet():绑定html中用于切换轮播图的若干个导航按钮,直接切换到被点击按钮所对应的图片;
autoPlay():自动进行轮播;
stopAuto():停止自动轮播。