jQueryTools Scrollable和通用轮播图片原理分析

其实无论是jQueryTools Scrollable还是常见的页面图片轮播，其原理都差不多。我这里简单分析一下其原理，请看下图



滑动器（视窗，好比电影放映机镜头或幕布）：即是整个可视窗口，浏览器仅显示窗口范围内的内容，超出范围的内容被隐藏
滑块容器（好比电影胶带）：必须将其设置的足够宽或足够高，最少为 滑动单元宽度*(滑动单元数量+2)，总之尽量设置大点，大了咱不怕。
滑动单元（好比电影胶带上的一张张胶片）：如果是水平滑动，则需要横向排列，垂直滑动时使用纵向排列

轮播滑动器初始化时自动在滑动单元之前添加最后一个滑动单元的副本，在最后一个滑动单元之后添加第一个滑动单元的副本，这样做是为了保证首尾相接的地方平滑移动，当滑动单元副本移动结束之后立即移动整个滑块容器到初始位置，这个过程是一瞬间发生的，所以感觉不到滑块容器的移动。

至于导航的切换则简单了，当滑动单元就位之后通过回调函数切换当前导航，这是jQueryTools Scrollable自动完成的，这里我们就不详述了。

jQueryTools Scrollable具体用法请查看jQueryTools Scrollable详解