轮播的实现

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

image.png
  • 首先把需要展示的图片放到一排,并放一个刚好能容纳它们的容器中。
  • 容器放在一个视窗中,视窗刚好容纳一个图片的宽度;容器超出视窗的部分会被隐藏。
  • 每次让容器左右移动整倍于视窗的宽度,实现轮播换图。
  • 为了无缝轮播,把首尾各复制一份,如图中所示;每次移到首尾时立即复位。
  • 应该会用到的函数有:
    向前移动:playPre(len)
    向后移动:playNext(len)
    让图标跟随图片移动:setBullet

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

预览地址:http://js.jirengu.com/mofet

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

预览地址:http://js.jirengu.com/povep#

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容