题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
- 左右轮播实现原理:
- 最外层可视窗口设置与图片宽高相等, 并使用
overflow: hidden,内部容器高度与图片高度相等, 宽度为所有轮播图片宽度之和, 并使用绝对定位, 以便通过left值控制左右滚动 - 如果要左右无限滚动, 需要克隆last img放在容器内最前面, 克隆first img放在最后, 这样当轮播到第一张还想向前, 轮播到最后一张还想向后, 先展示克隆的img , 紧接着通过修改css left值立即替换为真正的首尾img, 由于没有使用动画, 且是相同的图片, 所以肉眼看不出变化, 但实际已经从临时展示的克隆img变为原DOM中的img
- 最外层可视窗口设置与图片宽高相等, 并使用
- 渐变轮播实现原理:
- 与左右轮播相仿, 但更简单, 内部img不需要左右水平排列, 只需要全部绝对定位, 叠加在一起, 然后全部
display: none; - js中需要在加载后, 就立即执行一致轮播函数, 淡入首张img,接下来监听事件, 通过淡出当前图片, 淡入预期图片, 来达到渐变轮播
- 与左右轮播相仿, 但更简单, 内部img不需要左右水平排列, 只需要全部绝对定位, 叠加在一起, 然后全部
- 关于抽象函数or接口:
抽象出函数or接口, 代码更有条理, 每个函数控制在20行内, 降低单个函数的复杂度, 提高代码复用性; 由不同的函数部件, 协同完成; 降低了bug排查难度和耦合性; 同时也方便后续维护, 修改, 或新增功能 - 关于轮播可以抽象出的接口如:
- playNext() 切换到下一张
- playPre() 切换到上一张
- setBullet() 设置状态指示符号
- autoPlay() 自动轮播
- stopAuto() 停止自动轮播
