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"
  });
}

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

更新了小提琴here。

如何使JQuery滑块一次加载元素集

1 个答案: