轮播的实现
2018-01-22 本文已影响0人
1w1ng
轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
-
布局：
让父容器相对定位，设定宽高为一个图片的宽高，并且设置overflow:hidden溢出隐藏；在父容器中设置一个图片容器，高度为图片高，宽度为图片宽*图片个数(这一点由js来设置，因为它的个数不是一定的)；在父容器内部设置多个包含a链接(方便跳转链接)和li元素，给img设置好宽高，li元素左浮，横向排成一排，左右轮播键和底部的圆点都可通过绝对定位确定位置。 -
实现逻辑：
通过移动容器的位置来展现不同的图片，达到切换效果。将尾部图片和首部图片clone后，分别放在首尾并相应增加图片容器的宽度；当运动到clone首图片时，立即移动到真实首图片，当运动到clone尾图片时，就立即将其移动到真实尾图片，这样我们的肉眼看上去就是连贯循环的，从而达到无限左右滚动效果。另外当快速切换到不同页面时就需要知道当前正在展现的是哪一页，可以设置一个标记位，初始值为0，每次切换时这个标记位的值都要跟着改变。 -
函数接口：
autoPlay()//自动循环播放
playNext()//切换到下一张图片
playPre()//切换到上一张图片
setBullet()//底部导航按钮切换效果
