轮播的实现

题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

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

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

地址

题目3： 实现一个渐变轮播效果, 效果范例

地址