- 1.jpg
- 2.jpg
- 3.jpg
- 4.jpg
- ViewPager.html
- 思路图
先把最后一张和第一张 clone 出来,分别放到第一张前面和最后一张后面,当第一张图片想要看到末尾滚动过来的图片时直接进行滚动可以看到 clone 的最后一张图片,此时在滚动完成之后立刻把原来的最后一张图片调整到展示窗口位置,因为是同一张图片用户看不出变化过程。同样最后一张图片往前滚动的原理相同,当用户在最后一张图片想向后看时直接进行滚动看到了 clone 的第一张图片,此时再把原来的第一张图片调整到展示窗口位置。
- 左右滑动切换控制:实现点击控制向前滑动后者向后滑动图片的效果,图片无限循环,可根据需要传入不同数量的图片
- 底栏图片位置展示和控制:实现图片滑动同步切换,点击可控制滑动到所选的图片
- 图片自动切换:初始化图片自动滑动切换,当鼠标位于轮播上方时,关闭自动切换;当鼠标离开轮播区域时,打开自动切换
- 面向对象:通过函数定义了 ViewPager 类
- 抽象重复重写 prototype
- 实现无限循环轮播 jQuery 插件