Question

我正在制作一个图像滑块插件，该插件可以很好地处理单个实例，但是当页面上有多个实例时，变量将在这些实例之间共享，尤其是currentPosition。如何沙盒化它们并使实例隔离？

我尝试将其与我可以找到的任何教程拼凑在一起，并且还在SO上研究了类似的问题，但它们没有帮助。这是代码：

var slider = $('.slider').mySlider();

...

;(function ($) {
  var defaults = {
    auto: false,
    delay: 4000,
    controls: true,
    controlsPosition: 'inside', //inside, outside, neighbors
    prevHtml: '<i class="material-icons">chevron_left</i>',
    nextHtml: '<i class="material-icons">chevron_right</i>',
    width: 70,
    transitionSpeed: 400,
    onLoad: function() {},
    onSlideEnd : function() {}
  };

  var mySliderInit = function (el, options) {
    var settings = $.extend({}, defaults, options || {}),
    el = $(el);
    el.wrap('<div class="mySlider-outerwrapper"><div class="mySlider-wrapper"></div></div>');

    var outerWrapper = el.closest('.mySlider-outerwrapper'),
    wrapper = el.closest('.mySlider-wrapper');

    var numSlides = el.find('li').length,
    numElements = numSlides+4,
    wrapperWidth = wrapper.width(),
    slideWidth = wrapperWidth*(settings.width)/100,
    sideWidth = wrapperWidth*((100 - settings.width)/2)/100;

    var slides = el.find('li');
    slides.width(slideWidth);

    //first move
    var index = 0;
    var slideMovement = wrapperWidth*settings.width/100;
    var firstMovement = currentPosition = -(slideWidth-sideWidth+slideWidth);
    el.css('transform', 'translateX('+(firstMovement)+'px)');

    if(settings.controls){
      outerWrapper.append('<a href="#" class="mySlider-nav mySlider-prev">'+settings.prevHtml+'</a>');
      outerWrapper.append('<a href="#" class="mySlider-nav mySlider-next">'+settings.nextHtml+'</a>');
    }

    function moveSlider(direction){
      if(direction == 'forward'){
        index++;
        currentPosition -= slideWidth;
      } else if(direction == 'backward'){
        index--;
        currentPosition += slideWidth;
      }
      $(slides[index+2]).addClass('active').siblings().removeClass('active');
      el.css('transform', 'translateX('+currentPosition+'px)');

    }

    outerWrapper.on('click', '.mySlider-next', function(e){
      e.preventDefault();
      moveSlider('forward');
    });

    outerWrapper.on('click', '.mySlider-prev', function(e){
      e.preventDefault();
      moveSlider('backward');
    });

    return this;
  };

  $.fn.mySlider = function (settings){
    return this.each(function(){
      new mySliderInit($(this), settings);
    });
  }

}(jQuery));

Answer 1

根据w3的javascript范围：If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

根据您的console.log-您的代码似乎适用于index变量，根据您单击的滑块，其值具有不同。 currentPosition变量未声明，而是直接分配一个值。尝试在代码区域以var index = 0;

插入行var currentPosition

---不是解决方案的一部分---

几年前，我发现了一个自建幻灯片的非常简单的想法。我将其用于图像轮播，其中仅显示一个图像。但是也许您可以找出使它适应幻灯片的方法。

该转盘的想法是，根据方向，将第一个元素简单地移动到末尾，或将最后一个元素移动到第一个位置。在我的示例中，没有控件，但是有一个简单的向前单击事件

$(".mySlideElement").on("click", function(){ //the click event on any slide element
var myParent = $(this).parent(); //get the parent of your current set of slide elements
var myElements = myParent.find(".mySlideElement"); //get all slide elements
$(myElements).first().appendTo(myParent); //take the first one and move it to the end
})

我在这里构建了一个小型jsfiddle：https://jsfiddle.net/6e9xk5wz/1/

jQuery-跨实例共享变量

1 个答案: