如何让 JQuery 滑块一次加载一组元素

Question

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

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

目前（请参阅 fiddle），滑块一次加载一张幻灯片，并且根据浏览器的大小，它还会切掉每张幻灯片的一部分。我该如何解决？谢谢

这是我目前拥有的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。

如何让 JQuery 滑块一次加载一组元素

How to make JQuery slider load sets of elements at a time

html

javascript

css

jquery

load