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

我正在尝试使用JQuery制作一个无限水平的标签滑块

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

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

下面是我目前拥有的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();

var元素=$（'.tab容器li'）；
变量滑块=$（'.tab容器'）；
var sliderWrapper=$（'.wrapper'）；
var totalWidth=sliderRapper.innerWidth（）；
var elementWidth=element.outerWidth（）；
var sliderWidth=0；
var positionSlideX=slider.position（）.left；
var newPositionSlideX=0；
滑块滑动器。附加（“”）；
元素。每个（函数（）{
sliderWidth=sliderWidth+$（this）.outerWidth（）+1；
});
slider.css({
“宽度”：滑块宽度
});
$（'.next slide'）。单击（函数（）{
如果（newPositionSlideX>（总宽度-滑块宽度））{
newPositionSlideX=newPositionSlideX-元素宽度；
slider.css({
“左”：newPositionSlideX
}，check（））；
};
});
$（'.prev slide'）。单击（函数（）{
如果（newPositionSlideX>=-sliderWidth）{
newPositionSlideX=newPositionSlideX+elementWidth；
slider.css({
“左”：newPositionSlideX
}，check（））；
};
});
函数检查（）{
如果（滑块宽度>=totalWidth&&newPositionSlideX>（totalWidth-sliderWidth））{
$（'.next slide'）.css({
“右”：0
});
}否则{
$（'.next slide'）.css({
“right”：-$（this.width（））
});
};
if（newPositionSlideX<0）{
$（'.prev slide'）.css({
“左”：0
});
}否则{
$（'.prev slide'）.css({
“left”：-$（this.width（））
});
};
};
$（窗口）。调整大小（函数（）{
totalWidth=sliderRapper.innerWidth（）；
检查（）；
});
检查（）；

通过跟踪最左侧可见幻灯片的索引，可以大大简化此操作。这是一种更普遍的做法

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

var元素=$（'.tab容器li'）；
变量滑块=$（'.tab容器'）；
var sliderWrapper=$（'.wrapper'）；
var firstVisibleSlide=0；
var nextButton；
滑片预旋（“”）；
下一个按钮=$（“.next slide”）；
$（'.next slide'）。单击（函数（）{
if（slider.prop（“offsetLeft”）+slider.width（）>nextButton.prop（“offsetLeft”））{
动议（1）；
}
});
$（'.prev slide'）。单击（函数（）{
如果（第一次可见幻灯片>0）{
移动（-1）；
};
});
函数移动（dif）{
左var；
firstVisibleSlide+=dif；
left=-1*element.eq（firstVisibleSlide.prop（“offsetLeft”）；
slider.css({
“左”：左+像素
});
}

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

---

更新的小提琴

通过跟踪最左侧可见幻灯片的索引，可以大大简化此操作。这是一种更普遍的做法

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

var元素=$（'.tab容器li'）；
变量滑块=$（'.tab容器'）；
var sliderWrapper=$（'.wrapper'）；
var firstVisibleSlide=0；
var nextButton；
滑片预旋（“”）；
下一个按钮=$（“.next slide”）；
$（'.next slide'）。单击（函数（）{
if（slider.prop（“offsetLeft”）+slider.width（）>nextButton.prop（“offsetLeft”））{
动议（1）；
}
});
$（'.prev slide'）。单击（函数（）{
如果（第一次可见幻灯片>0）{
移动（-1）；
};
});
函数移动（dif）{
左var；
firstVisibleSlide+=dif；
left=-1*element.eq（firstVisibleSlide.prop（“offsetLeft”）；
slider.css({
“左”：左+像素
});
}

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

---

更新的小提琴

您提供的小提琴中的左右箭头不起作用？您提供的小提琴中的左右箭头不起作用？