无限循环轮播的实现
2019-10-12 本文已影响0人
饥人谷1904_陈俊锋
思路
第一种思路是：操作DOM结构，第一张图片想要往前看到末尾滚动过来的图片时，先把最后一张图片放到第一张图片之前再进行滚动，同样最后一张图片想向后看下一张（第一张）图片时，先把第一张图片当到最后一张图片后面再进行滚动。后续相同情况再操作DOM。
轮播第一种思路.PNG
这样做的问题时是：轮播下方有对应按钮可点击直接切换到对应的图片，如果已经改变DOM结构图片顺序，再点击下方的直接切换按钮，导致需要操作的DOM结构图片可能为多个，操作偏移过程比较复杂。
第二种思路是：先把最后一张和第一张 clone 出来，分别放到第一张前面和最后一张后面，当第一张图片想要看到末尾滚动过来的图片时直接进行滚动可以看到 clone 的最后一张图片，此时在滚动完成之后立刻把原来的最后一张图片调整到展示窗口位置，因为是同一张图片用户看不出变化过程。同样最后一张图片往前滚动的原理相同，当用户在最后一张图片想向后看时直接进行滚动看到了 clone 的第一张图片，此时再把原来的第一张图片调整到展示窗口位置。
文字描述很长看起来有点复杂，让我们结合图片理解一下，图示为第一张图片想往前滚动的情况
轮播第二种思路.PNG
这样做就解决了上面出现的问题
功能介绍：
- 左右滑动切换控制：实现点击控制向前滑动后者向后滑动图片的效果，图片无限循环，可根据需要传入不同数量的图片
- 底栏图片位置展示和控制：实现图片滑动同步切换，点击可控制滑动到所选的图片
- 图片自动切换：初始化图片自动滑动切换，当鼠标位于轮播上方时，关闭自动切换；当鼠标离开轮播区域时，打开自动切换
技术细节：
- 面向对象：通过函数定义了 ViewPager 类
- 抽象重复重写 prototype
- 实现无限循环轮播 jQuery 插件
