轮播实现

轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(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