进阶17 轮播的实现

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

一种左右滚动轮播实现原理：

1. 最外层可视窗口设置与图片宽高相仿，并使用overflow: hidden, 内部容器高度与图片高度相仿，宽度为所有要轮播图片宽度之和，并且绝对定位，以便通过left值控制左右滚动。
2. 如果要左右无限滚动，还需要克隆last img放在容器内最前面，克隆first img放在容器内最后面。这样当轮播到第一张还想pre，或者最后一张还想next时，先展示克隆的img，紧接着通过修改css left值立刻替换为真正的尾张或首张img，由于没有使用动画，并且是一样的图片，所以肉眼上看不出来变化，但实际上已经从临时展示的克隆img，变为原DOM中的img。

一种渐变轮播实现原理：

1. 与上面相仿，但要更简单，内部img不需要左右水平排列，只需要全部绝对定位，叠加在一起，然后全部 display: none
2. js中需要在加载后，就立即执行一次轮播函数，来淡入首张img，接下来受按钮控制，通过淡出当前图片，淡入预期图片，来达到渐变轮播。

关于抽象函数or接口：

首先抽象出函数or接口，是为了让代码更有条理，每个函数控制在20行内，降低单个函数的复杂度，提高代码复用性。 由不同的函数部件，协同完成。降低了bug排查难度和耦合性。 同时也方便后续维护，修改，或者新增功能。 这个就是抽象出函数or接口的意义。

关于轮播，可以抽象出的接口比如：

• playNext() 切换到下一张
• playPre() 切换到上一张
• setBullet() 设置状态指示符号
• autoPlay() 自动轮播
• stopAuto() 停止自动轮播
• ......

2： 实现左右滚动无限循环轮播效果

预览地址

3：实现一个渐变轮播效果

预览地址