javascript - 如何让 JQuery slider 一次加载一组元素

Question

我正在尝试使用 JQuery 制作无限水平选项卡 slider 。

我的目标是让 slider 在页面加载时仅加载前 10 张幻灯片，当单击下一页按钮时，它会加载接下来的 10 张幻灯片，依此类推。它不应在开始时加载所有幻灯片以节省加载时间，并且仅在单击右箭头时加载接下来的 10 张幻灯片。

目前(请参阅 fiddle )， slider 一次加载一张幻灯片，并且根据浏览器的大小，它还会剪切每张幻灯片的部分内容。我该如何解决？谢谢。

这是我目前拥有的 Javascript 代码

var element = $('.tab-container li');
var slider = $('.tab-container');
var sliderWrapper = $('.wrapper');
var totalWidth = sliderWrapper.innerWidth();
var elementWidth = element.outerWidth();
var sliderWidth = 0;
var positionSlideX = slider.position().left;
var newPositionSlideX = 0;

sliderWrapper.append('<span class="prev-slide"><</span><span class="next-slide">></span>');

element.each(function() {
  sliderWidth = sliderWidth + $(this).outerWidth() + 1;
});

slider.css({
  'width': sliderWidth
});

$('.next-slide').click(function() {
  if (newPositionSlideX > (totalWidth - sliderWidth)) {
    newPositionSlideX = newPositionSlideX - elementWidth;
    slider.css({
      'left': newPositionSlideX
    }, check());
  };
});

$('.prev-slide').click(function() {
  if (newPositionSlideX >= -sliderWidth) {
    newPositionSlideX = newPositionSlideX + elementWidth;
    slider.css({
      'left': newPositionSlideX
    }, check());
  };
});

function check() {
  if (sliderWidth >= totalWidth && newPositionSlideX > (totalWidth - sliderWidth)) {
    $('.next-slide').css({
      'right': 0
    });
  } else {
    $('.next-slide').css({
      'right': -$(this).width()
    });
  };

  if (newPositionSlideX < 0) {
    $('.prev-slide').css({
      'left': 0
    });
  } else {
    $('.prev-slide').css({
      'left': -$(this).width()
    });
  };
};

$(window).resize(function() {
  totalWidth = sliderWrapper.innerWidth();
  check();
});
check();

Answer 1

您可以通过跟踪最左侧可见幻灯片的索引来简化这一过程。这是一种更常见的做法。

var element = $('.tab-container li');
var slider = $('.tab-container');
var sliderWrapper = $('.wrapper');
var firstVisibleSlide = 0;
var nextButton;

sliderWrapper.prepend('<span class="prev-slide"><</span>').append('<span class="next-slide">></span>');

nextButton = $(".next-slide");

$('.next-slide').click(function() {
  if (slider.prop("offsetLeft") + slider.width() > nextButton.prop("offsetLeft")) {
        move(1);
  }
});

$('.prev-slide').click(function() {
  if (firstVisibleSlide > 0) {
    move(-1);
  };
});

function move(dif){ 
  var left;

  firstVisibleSlide += dif; 
  left = -1 * element.eq(firstVisibleSlide).prop("offsetLeft");
  slider.css({
      'left': left + "px"
  });
}

如果您要加载图像，并且希望它们延迟加载以提高性能，则可以将它们设置为显示的背景属性。就像跟踪上面第一张可见幻灯片一样，跟踪最后一张可见幻灯片非常容易，并且您可以根据需要在显示之前加载任意数量的幻灯片。

更新了 fiddle here 。