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