关于 轮播 的几点总结

1- 轮播的实现原理是怎样的?如果实现,会抽象出哪些函数(or接口)供使用?(比如 play())

  • 轮播的原理实际上是将所有图片的水平排列,但是视口只有一张图片的宽度,切换图片的时候实际上是包含全部水平图片的大盒子在移动。
    如果要实现左右滚动无限循环的效果就需要在图片列表开头和结尾分别添加最后一张图和第一张图。
  • 函数:会抽象出控制动画的playNext()、playPrev(),还有控制小按钮的setBullet(),自动播放 autoPlay()。

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

无限轮播效果
代码

3- 实现一个渐变轮播效果, 效果范例

渐变轮播效果
代码

- 其他参考:

渐变轮播
无限轮播
滚动轮播1
渐变轮播2

推荐阅读更多精彩内容