javascript - 在 SlidesJS 中禁用 "wrap around"

Question

我正在使用SlidesJS ，这是一个非常可定制的幻灯片分页插件。

这是我的初始化。

$('.slides').slidesjs
({
    width: 300,
    height: 300,
    navigation: false,             // It's for swiping in an iOS web app
    pagination: false,
    generatePagination: false
});

但是，我不希望幻灯片以“相反的方式”环绕。我不知道有没有这个术语，所以我画了这个插图:

Green = Next
Blue = Previous

我想要的是禁用从 4 -> 1 或从 1 -> 4 的滑动。我还没有为此找到内置功能或属性。但是，有合理的解决方法吗？

Answer 1

伙计们!我成功了。
花了几个小时。

最初重新创建的问题是 here

我的工作解决方案，如下所述，是 here .

我找到了在哪里放置此循环效果的开关。
AND 我将其设置为新的选项 ==> 循环(真/假)!!!
如果 looping 选项设置为 false...它不会循环。

defaults = {
  width: 940,
  height: 528,
  start: 1,
  navigation: {
    active: true,
    effect: "slide"
  },
  pagination: {
    active: true,
    effect: "slide"
  },
  play: {
    active: false,
    effect: "slide",
    interval: 5000,
    auto: false,
    swap: true,
    pauseOnHover: false,
    restartDelay: 2500
  },
  effect: {
    slide: {
      speed: 500
    },
    fade: {
      speed: 300,
      crossfade: true
    }
  },
  callback: {
    loaded: function() {},
    start: function() {},
    complete: function() {}
  },
  looping: false                    // Looping effect from last image to first and vice-versa
};

我稍微修改了 Plugin.prototype._slide 函数来实现此目的。
我基于 var 添加了一个新条件，我将其称为 OK_Proceed。

默认情况下，此变量为 true。
当尝试转到图像索引 -1 或 data.total 时，其值变为 false...但前提是循环选项设置为 false。

我希望保留原来的功能...
;)

var OK_Proceed=true;                                // ADDED var
    console.log( this.options.looping );
    if (next === -1) {
      if( this.options.looping ){
        next = this.data.total - 1;
      }else{
          OK_Proceed=false;
      }
    }
    if (next === this.data.total) {
      if( this.options.looping ){
          next = 0;
      }else{
          OK_Proceed=false;
      }
    }

当此 OK_Proceed 为 false 时:脚本完全绕过动画函数。
它被一个小的 10px“反弹”效果所取代。

剩下要做的唯一一件事就是重置data.animating值:

$.data(_this, "animating", false);

这是完整的功能:

Plugin.prototype._slide = function(number) {            console.log("Line 430 - _slide: ");
  var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
    _this = this;
  $element = $(this.element);
  this.data = $.data(this);                             console.log( JSON.stringify( $.data(this) ) );
  if (!this.data.animating && number !== this.data.current + 1) {
    $.data(this, "animating", true);
    currentSlide = this.data.current;               console.log("Line 437 - currentSlide: "+currentSlide);
    if (number > -1) {
      number = number - 1;
      value = number > currentSlide ? 1 : -1;               console.log("Line 440 - value: "+value);
      direction = number > currentSlide ? -this.options.width : this.options.width;
      next = number;
    } else {
      value = this.data.direction === "next" ? 1 : -1;
      direction = this.data.direction === "next" ? -this.options.width : this.options.width;
      next = currentSlide + value;                  console.log("Line 446 - next: "+next);
    }   var OK_Proceed=true;                                // ADDED var
    console.log( this.options.looping );
    if (next === -1) {
      if( this.options.looping ){
        next = this.data.total - 1;
      }else{
          OK_Proceed=false;
      }
    }
    if (next === this.data.total) {
      if( this.options.looping ){
          next = 0;
      }else{
          OK_Proceed=false;
      }
    }
    if(OK_Proceed){this._setActive(next);                           // ADDED condition
    slidesControl = $(".slidesjs-control", $element);
    if (number > -1) {
      slidesControl.children(":not(:eq(" + currentSlide + "))").css({
        display: "none",
        left: 0,
        zIndex: 0
      });
    }
    slidesControl.children(":eq(" + next + ")").css({
      display: "block",
      left: value * this.options.width,
      zIndex: 10
    });
    this.options.callback.start(currentSlide + 1);
    if (this.data.vendorPrefix) {
      prefix = this.data.vendorPrefix;
      transform = prefix + "Transform";
      duration = prefix + "TransitionDuration";
      timing = prefix + "TransitionTimingFunction";
      slidesControl[0].style[transform] = "translateX(" + direction + "px)";
      slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
      return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
        slidesControl[0].style[transform] = "";
        slidesControl[0].style[duration] = "";
        slidesControl.children(":eq(" + next + ")").css({
          left: 0
        });
        slidesControl.children(":eq(" + currentSlide + ")").css({
          display: "none",
          left: 0,
          zIndex: 0
        });
        $.data(_this, "current", next);
        $.data(_this, "animating", false);
        slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
        slidesControl.children(":not(:eq(" + next + "))").css({
          display: "none",
          left: 0,
          zIndex: 0
        });
        if (_this.data.touch) {
          _this._setuptouch();
        }
        return _this.options.callback.complete(next + 1);
      });
    } else {
      return slidesControl.stop().animate({
        left: direction
      }, this.options.effect.slide.speed, (function() {
        slidesControl.css({
          left: 0
        });
        slidesControl.children(":eq(" + next + ")").css({
          left: 0
        });
        return slidesControl.children(":eq(" + currentSlide + ")").css({
          display: "none",
          left: 0,
          zIndex: 0
        }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
      }));
    } } else { 
    console.log("HERE");
    $.data(_this, "animating", false);
    console.log( JSON.stringify( $.data(this) ) );

    // Bouncing effect
    $(".slidesjs-control").stop().animate( { "left" : "-=10px" }, 100, "easeInOutBounce", function(){
        $(".slidesjs-control").animate( { "left" : "+=10px" }, 100, "easeInOutBounce");
    });

     }                      // End added condition
  }
};

我从所有console.logs中清除了这段代码并创建了一个zip file ready to use .

编辑后的第二天
为了使“触摸”的行为与鼠标单击的链接相同，还需要修改另外两个函数...上面的 .zip 文件也反射(reflect)了这些更改...

针对点击修改的函数为:_slide。
针对点击修改的函数为:_setuptouch 和 _touchmove。

有两个类可供您修改:bounceForward 和 bounceBackward。

lastest demo is here 。在支持触摸的设备上尝试一下。