Question

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

这是我的初始化。

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

但是，我不希望幻灯片以＃34;相反的方式包装。我不知道是否有这个术语，所以我画了这个插图：

绿色=下一个
蓝色=上一个

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

Answer 1

<强>专家！我做到了。
花了几个小时。

最初重新创建的问题是here

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

我找到了切换到这种循环效果的位置 AND 我将其设为新的option ==＆gt; looping（真/假）!!!
如果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文件也反映了这些变化......

为点击修改的功能是：_slide 为点击而修改的功能包括：_setuptouch和_touchmove。

您可以修改两个类：bounceForward和bounceBackward。

lastest demo is here。在启用触摸的设备上试用。

禁用＆＃34;环绕＆＃34;在SlidesJS

1 个答案: