javascript-当li元素不均分时,jQuery列表滑块停止

如果有人对这个问题有更好的描述性标题,请告诉我；我想不出一个好标题来形容我的问题.

无论如何,我有一些jQuery代码,允许我通过一次显示3个li元素来轮流浏览列表项.

但是,当我所拥有的li元素的数量不能被3整除时,我遇到了一个问题.

这是jQuery：

$( document ).ready(function() {
var j = 1;
var inbetween = 7000; //milliseconds   
function page() {
  var jmax = $("#leader-slider li").length;
  var count = 3;

  var start = j;
  var end = j + count - 1;
  var complete = 0;
  console.log(j, start, end);

  var range = $('#leader-slider li:nth-child(n+'+ start + '):nth-child(-n+'+  end +')');
  range
    .fadeIn(400)
    .delay(inbetween)
    .fadeOut(400, 'swing', function() {
      if (j++ >= jmax) {
        j = 1;
      }

      if (++complete >= count) {
        page();  
      }
    });
};
page();
});

当我有3,6,9,12等时,这可以很好地工作. li元素.但是,一旦我有一个不能被3整除的数字(例如8),它将循环遍历所有数字,但是在显示最后一个li元素后,它将停止旋转并且不再显示.

解决方法:

之所以发生这种情况,是因为如果您在jQuery中找不到三个元素,那么您的complete绝对不会大于或等于.

在我看来,您已经在检测到何时超出此处的li元素数量：

 if (j++ >= jmax) {
    j = 1;
  }

如果此方法正常运行,则可以在此处调用页面方法：

 if (j++ >= jmax) {
    j = 1;
    page();
 } else if (++complete >= count) {
    page();  
 }