轮播的实现
2017-09-22 本文已影响0人
zh_yang
1、 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
image.png
- 首先把需要展示的图片放到一排，并放一个刚好能容纳它们的容器中。
- 容器放在一个视窗中，视窗刚好容纳一个图片的宽度；容器超出视窗的部分会被隐藏。
- 每次让容器左右移动整倍于视窗的宽度，实现轮播换图。
- 为了无缝轮播，把首尾各复制一份，如图中所示；每次移到首尾时立即复位。
- 应该会用到的函数有：
向前移动：playPre(len)
向后移动：playNext(len)
让图标跟随图片移动：setBullet
2、实现左右滚动无限循环轮播效果
预览地址：http://js.jirengu.com/mofet
