Web笔记 · · By/蜜汁炒酸奶

轮播图设置不同速度

前言

最近有个小需求,需要对已用的轮播图做修改,使前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  
}

this.each 中优先定义如下变量:

var pn = c.preNum, // 用于新自动运行间隔的前n个节点
    pI = c.preInterTime, // 新的自动运行间隔
    tmpP = p;   // 用于代替当前节点数p做加减运算的

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)
}

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)
}

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)
  }
}

4. 调用

$(function() {
    focusBoxEv.init();
});
var focusBoxEv = {
  // ...
  init: function() {
    // ...
    $(".focusBox").slide({
    	// ...
      delayTime: 300,
      interTime: 3000,
      preNum: 3,
      preInterTime:600,
      // ...
    });
  
  }
};

源码与演示

待完善

评论已关闭

example
C
蜜汁炒酸奶

当前处于试运行期间,可能存在不稳定情况,敬请见谅。

欢迎点击此处反馈访问过程中出现的问题