Question

我使用下面的代码在一对滑块中移动图像，但第一个滑块在重置前跳了一步。滑块1 = 5张图片，滑块2 = 6张图片

function summarySlider(count) {
  var itemWidth = '20.2';
  var itemList = $('.summary-item-list');
  $(itemList).css('transform', 'translateX(-'+ (itemWidth * count) +'%)');
}
$(window).on("load", function () {
  $('.summary-v2-block').each(function(index){
    var count = 0;
    var limit = $(this).find('.summary-item').length;
    setInterval(function() {
      if (count === limit) {
        count = 0;
      }
      console.log(index, limit,  count);
      summarySlider(count);
      count++;
    }, 2500);
  });
});

我认为发生的事情是索引0实际上是第二个滑块，索引1是第一个滑块。它向后计算指数？如何将索引0作为第一个滑块？

这是控制台输出（索引，限制，计数）

0 5 0

1 6 0

0 5 1

1 6 1

0 5 2

1 6 2

0 5 3

1 6 3

0 5 4

1 6 4

0 5 0

1 6 5

0 5 1

1 6 0

Answer 1

问题不在于时间，而是你的summarySlider函数正在寻找并操纵两个滑块中存在的元素。

您可以传递父滑块元素的另一个参数，并使用find()使其特定于实例

function summarySlider($slider, count) {
  var itemWidth = '20.2';
  var itemList = $slider.find('.summary-item-list');
  $(itemList).css('transform', 'translateX(-'+ (itemWidth * count) +'%)');
}
$(window).on("load", function () {
  $('.summary-v2-block').each(function(index){
    var count = 0;

    var $slider=$(this);// to pass to `summarySlider()`

    var limit = $(this).find('.summary-item').length;
    setInterval(function() {
      if (count === limit) {
        count = 0;
      }
      console.log(index, limit,  count);
      summarySlider($slider, count);
      count++;
    }, 2500);
  });
});

jQuery计数器+每次重置

1 个答案: