轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?
在实现轮播之前首先要确定要实现什么样的轮播:
- 对于无限滚动轮播:
将图片排成一行,并将一个供轮播的窗口固定大小,隐藏超出范围的图片,并在第一张图片前添加复制的最后一张图片,在最后一张图片后添加复制的第一张图片,当触发点击下一张图片的事件时,根据方向移动图片位置来滚动显示图片,滚动到最后一张图片或第一张图片时,再次滚动要跳转到第一张的图片或最后一张图片的位置。 - 对于无限渐进渐出的轮播:
所有的图片都叠放在一起,开始时统一设置display:none,然后通过fadeout当前页,fadeIn需要展示的图片。
其次,需要考虑一些细节问题:
- bullets与图片滚动的同步问题。
- 若需要在快速点击时,判断轮播是否处于动画中,就要利用jQuery中的
is(':animated')
或者引入isAnimated
变量动态判断。 - 若对于快速点击,需要轮播同时响应用户的点击,并且不让用户等的太久,可以利用jQuery中的stop()函数。例如:
$node.stop(true).animate()
这样可以取消当前的动画队列,从而快速到达用户想要的位置。 - 自动播放问题,是否添加自动播放,当用户鼠标放在轮播上时,取消自动播放,提高用户体验。(注意使用
setTimeout()
来模拟setInterval()
) - 对于轮播图片比较多,可以考虑通过懒加载的方式来节省流量,提高用户体验。
完成一个轮播是,必要的一些函数接口和变量:
- 变量:
- idx(0): 始终跟随当前显示图片的索引。
- imgCount: 图片的数量。
- isAnimated(false): 当前是否处于动画中。
- 函数:
- autoPlay() 和 stopAuto()
- play(num) 这是最稳重要的轮播函数,num可以是目标idx与当前所在idx的差值,可正可负,为正时,向前滚动num个,为负时,向后滚动num个。在这其中,要注意idx的变化与计算(特别是当idx处于最大和最小时),可以利用:
idx = (idx + num + imgCount) % imgCount
(视具体情况而定) - setBullet() 函数,在play()中被调用。用来同步bullets(下方小点)的变化。
一些轮播实例
1
1
1
11
1
11
1
11
1