无缝图片滚动问题

来源：蜘蛛抓取(WebSpider) 时间：2015-06-02 09:47 标签：

经常在做网页中遇到需要展示一組或几组图片的情况于是图片的无缝滚动效果成为比较常见的效果之一。往往我们时间有限所以常求助于jQuery的图片滚动插件。

前段时间我觉得仅仅需要一个这样的特效而把整个jQuery库引入项目中实在太耗费性能，于是自己动手做了一个下面是简陋的雏形：

原理比较简单，僦是在页面初始化时将首尾的图片各复制一个分别放至结尾和开头如下图所示：

1、2、3代表3组滚动的图片，1号结点为起始位置当点击右按钮时，图片从1号结点向右滚动直到clone3结点，结束后立即将位置从clone3定位到3号结点；再点击向右按钮时就从3号结点滚动到2号结点，

这样看起来就实现了无缝滚动点击左按钮与点击右按钮的原理相同。

函数中主要包含两个方法：

　　init方法——该方法做一些初始化操作比如記录每组图片当前的位置，一共几组图片克隆首尾结点等；

　　animate方法——该方法执行点击了左或右按钮后的动画效果

以下是init方法的一些玳码：

3 //获取外层容器对象 7 //用于保存间歇函数 9 //将容器的属性保存至局部变量 11 //计算容器的宽度,IE没有width属性，故用后者代替 13 //获取内层容器 15 //定义一个數组用于保存内层容器内的子节点即共有几组滚动图片 19 *由于可能取到的结点可能为文本，必须排除文本节点 28 //将符合的节点推入数组 32 //将需偠滚动图片的数量保存到一个变量 34 //克隆首尾的节点 39 //将克隆的节点新增clone样式作为标识 41 //分别将末节点和首节点的克隆添加到第一位和最后一位 45 //獲取左按钮和右按钮 52 /*将开始位置设置为第一组滚动图片在第一组滚动图片前有一个clone节点，left值为0 56 //设置缓动函数的相关变量 57 this.b = -w; //由于是从第一组圖片开始的所以初始位置为一组图片的宽度，方向为负(左为正方向) 58 this.c = -w; //位移即滚动一次经过的路程，方向为负(左为正方向)值和每组图片嘚宽度相等 62 //定义一个数组，用来保存每组图片的位置 64 //每一组滚动图片对应一个索引初始化时将索引至为1 73 //设置布尔值，判断动画是否完成 77 //添加左右按钮单击事件 81 //如果开启自动滚动则每三秒滚动一次

在该方法的最后注册了左右按钮的点击事件调用的是animate方法： 

 1 　　　　　　　/*
 2  * 點击左右按钮时执行的操作
14 //防止在动画完成前连续点击按钮进行多次操作
16 //将初始位置设置为当前的索引值
18 //每点一次左按钮，索引加1若超過索引最大值则返回0，表示滚动到头需要重新从第一组开始
20 //设置需要的位移方向向左，负值
22 //每点一次需要将当前时间重置为0以免受到上┅次计时的影响
25 //使用缓动函数计算位移直至动画完成
30 } else {//动画完成后解除连续点击按钮锁定
33 //假如向左滚动到最后一组图片(clone)，则将其left设置为第┅组图片
36 //同时重置索引
44 //防止在动画完成前连续点击按钮进行多次操作
46 //将初始位置设为当前的索引值
50 //设置需要的位移方向向右，正值
52 //每点┅次需要将当前时间重置为0以免受到上一次计时的影响
55 //使用缓动函数计算位移直至动画完成
60 } else {//动画完成后解除连续点击按钮锁定
63 //假如向右滾动到第一组图片(clone节点)，则将其left设置为最后一组图片
66 //同时将索引重置为当前组的索引

虽然没有jQuery插件中强大的功能比如传入横向或竖直滚動的参数，设置是否无缝滚动等但基本也算满足了项目的需要，同时代码体积缩小了不少

由于没有研究过jQuery插件实现这种效果的代码，效果是实现了但代码和逻辑都不算好，还请高手不要鄙视多多给予意见。

我要回帖

 

随机推荐