轮播图设置不同速度
前言
最近有个小需求，需要对已用的轮播图做修改，使前n个节点能够以一个自定义的速度运行，后面的以原来设置的速度运行。看完源码后对其做了下面的这些修改。
通过搜索相关字段，感觉这个应该是比较老版的SuperSlide插件，改完后看了下当时最新版SuperSlide v2.1.3，发现好多变量名字换成了可读性较强的，类似本文中的 ab 函数对应新版的 setInter 自动播放函数，其他的自行对应下修改，应该可以适配该版本（未做实际测试，请以实际情况为准，也可能需要略微修改才能适配）。
当前仅做记录，演示和源码会在后期放出。
实现方式
1.添加自定义属性
a.fn.slide.defaults 中添加2个默认属性： preNum 和 preInterTime ，用于设置前preNum页以preInterTime 速度播放。
a.fn.slide.defaults = {
// ...省略原始默认值
preNum: 0,
preInterTime:500
}
1
2
3
4
5
2
3
4
5
this.each 中优先定义如下变量：
var pn = c.preNum, // 用于新自动运行间隔的前n个节点
pI = c.preInterTime, // 新的自动运行间隔
tmpP = p; // 用于代替当前节点数p做加减运算的
1
2
3
2
3
2. 新增不同速度的定时方法
在原本的定时函数 ab 之后新增用于赋值原本自动运行间隔的函数 ab2 和新的自动运行间隔(即速度)的函数 pnb 。
2.1 原本自动运行间隔的函数 ab2
// k为圆点节点数量，下同,pn和k类似，都是从1开始，tmpP代表即将跳转到的节点位置，从0开始。
ab2 = function(a){
H = setInterval(function() {
tmpP = p;
w ? tmpP-- : tmpP++;
// 即将跳转的节点位置是否在新自动运行间隔的节点数之后
// tmpP<pn 意味着当前节点还在preNum范围内。
// tmpP=pn 意味着当前节点是preNum中最后一个节点。
if(tmpP<=pn) {
// 清除正在运行的定时间隔
clearInterval(H);
// 执行新定时间隔
pnb();
} else {
// 执行原本定时间隔
p = tmpP,
_();
// tmpP==k 意味着新的循环即将开始，定时任务需要重置为新的定时间隔
// 若不清除，新循环开始时会先执行ab2再执行pnb，实际运行间隔将成为这两个的定时间隔之和
if(tmpP==k) {
clearInterval(H);
pnb();
}
}
}, a ? a : r)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2.2 新的自动运行间隔(即速度)的函数 pnb
pnb = function(a) {
H = setInterval(function() {
tmpP = p;
w ? tmpP-- : tmpP++;
// 即将跳转的节点位置是否在新自动运行间隔的节点数之后
if(tmpP<=pn) {
// 执行新定时间隔
p = tmpP,
_();
// 当前新间隔的节点数小于实际圆点数，且当前节点是preNum中最后一个节点，说明到了中间的过渡节点
// 若不清除，下一个节点会先执行pnb再执行ab2，实际运行间隔将成为这两个的定时间隔之和
if(pn<k&&tmpP==pn) {
clearInterval(H);
ab2();
}
} else {
// 清除正在运行的定时间隔
clearInterval(H);
// 执行原本定时间隔
ab2();
}
}, a ? a : pI)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3. 调整原本调用有的定时方法
var ab = function(a) {
// pn>0 存在新运行间隔的节点数
if(pn>0) {
// 根据当前节点位置选择执行函数
if(p<pn) {
clearInterval(H);
pnb();
} else {
clearInterval(H);
ab2();
}
} else {
// 不存在新运行间隔的节点数设置，按原本速度的逻辑执行
H = setInterval(function() {
w ? p-- : p++, _()
console.log("ab H w p: 2",w,p);
}, a ? a : r)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4. 调用
$(function() {
focusBoxEv.init();
});
var focusBoxEv = {
// ...
init: function() {
// ...
$(".focusBox").slide({
// ...
delayTime: 300,
interTime: 3000,
preNum: 3,
preInterTime:600,
// ...
});
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
源码与演示
待完善
预览
除特别注明外，本站所有文章均为 竹风清语 原创，转载请注明出处来自： lunbotushezhibutongsudu
Loading comments...
预览
暂无数据