Javascript JS slider的幻灯片太多。Can'；我不明白为什么

我有一个滑块，应该只显示三张幻灯片，但它继续（自动或通过单击）到第四张空白幻灯片。我看不出代码中设置了多少张幻灯片。我真的很感激一些受过教育的人

JS

$(document).ready(function() {
  
  var $slider = $(".slider"),
      $slideBGs = $(".slide__bg"),
      diff = 0,
      curSlide = 0,
      numOfSlides = $(".slide").length-1,
      animating = false,
      animTime = 500,
      autoSlideTimeout,
      autoSlideDelay = 6000,
      $pagination = $(".slider-pagi");
  
  function createBullets() {
    for (var i = 0; i < numOfSlides+1; i++) {
      var $li = $("<li class='slider-pagi__elem'></li>");
      $li.addClass("slider-pagi__elem-"+i).data("page", i);
      if (!i) $li.addClass("active");
      $pagination.append($li);
    }
  };
  
  createBullets();
  
  function manageControls() {
    $(".slider-control").removeClass("inactive");
    if (!curSlide) $(".slider-control.left").addClass("inactive");
    if (curSlide === numOfSlides) $(".slider-control.right").addClass("inactive");
  };
  
  function autoSlide() {
    autoSlideTimeout = setTimeout(function() {
      curSlide++;
      if (curSlide > numOfSlides) curSlide = 0;
      changeSlides();
    }, autoSlideDelay);
  };
  
  autoSlide();
  
  function changeSlides(instant) {
    if (!instant) {
      animating = true;
      manageControls();
      $slider.addClass("animating");
      $slider.css("top");
      $(".slide").removeClass("active");
      $(".slide-"+curSlide).addClass("active");
      setTimeout(function() {
        $slider.removeClass("animating");
        animating = false;
      }, animTime);
    }
    window.clearTimeout(autoSlideTimeout);
    $(".slider-pagi__elem").removeClass("active");
    $(".slider-pagi__elem-"+curSlide).addClass("active");
    $slider.css("transform", "translate3d("+ -curSlide*100 +"%,0,0)");
    $slideBGs.css("transform", "translate3d("+ curSlide*50 +"%,0,0)");
    diff = 0;
    autoSlide();
  }

  function navigateLeft() {
    if (animating) return;
    if (curSlide > 0) curSlide--;
    changeSlides();
  }

  function navigateRight() {
    if (animating) return;
    if (curSlide < numOfSlides) curSlide++;
    changeSlides();
  }

  $(document).on("mousedown touchstart", ".slider", function(e) {
    if (animating) return;
    window.clearTimeout(autoSlideTimeout);
    var startX = e.pageX || e.originalEvent.touches[0].pageX,
        winW = $(window).width();
    diff = 0;
    
    $(document).on("mousemove touchmove", function(e) {
      var x = e.pageX || e.originalEvent.touches[0].pageX;
      diff = (startX - x) / winW * 70;
      if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
      $slider.css("transform", "translate3d("+ (-curSlide*100 - diff) +"%,0,0)");
      $slideBGs.css("transform", "translate3d("+ (curSlide*50 + diff/2) +"%,0,0)");
    });
  });
  
  $(document).on("mouseup touchend", function(e) {
    $(document).off("mousemove touchmove");
    if (animating) return;
    if (!diff) {
      changeSlides(true);
      return;
    }
    if (diff > -6 && diff < 6) {
      changeSlides();
      return;
    }
    if (diff <= -6) {
      navigateLeft();
    }
    if (diff >= 6) {
      navigateRight();
    }
  });
  
  $(document).on("click", ".slider-control", function() {
    if ($(this).hasClass("left")) {
      navigateLeft();
    } else {
      navigateRight();
    }
  });
  
  $(document).on("click", ".slider-pagi__elem", function() {
    curSlide = $(this).data("page");
    changeSlides();
  });
  
});

$（文档）.ready（函数（）{
变量$slider=$（“.slider”），
$slideBGs=$（“.slide\uu bg”），
差异=0，
curSlide=0，
numOfSlides=$（“.slide”）。长度为1，
设置动画=错误，
时间=500，
自动滑动超时，
自动滑动延迟=6000，
$pagination=$（“.slider pagi”）；
函数createBullets（）{
对于（变量i=0；i”；
$li.addClass（“slider-pagi__elem-”+i）.data（“page”，i）；
如果（！i）$li.addClass（“活动”）；
$pagination.append（$li）；
}
};
创建项目符号（）；
函数manageControls（）{
$（“.slider control”）.removeClass（“非活动”）；
if（！curSlide）$（“.slider control.left”）.addClass（“非活动”）；
if（curSlide==numOfSlides）$（“.slider control.right”）.addClass（“非活动”）；
};
函数autoSlide（）{
autoSlideTimeout=setTimeout（函数（）{
curSlide++；
如果（curSlide>numOfSlides）curSlide=0；
更改幻灯片（）；
}，自动滑行延迟）；
};
自动滑动（）；
功能更改幻灯片（即时）{
如果（！即时）{
动画=真；
manageControls（）；
$slider.addClass（“动画”）；
$slider.css（“顶部”）；
$（“.slide”）.removeClass（“活动”）；
$（“.slide-”+curSlide.addClass（“活动”）；
setTimeout（函数（）{
$slider.removeClass（“动画”）；
动画=假；
}时间）；
}
clearTimeout（自动滑动超时）；
$（“.slider-pagi__elem”）.removeClass（“活动”）；
$（“.slider-pagi_uuelem-”+curSlide.addClass（“活动”）；
$slider.css（“transform”、“translate3d”（+-curSlide*100+”%，0,0）”）；
$slideBGs.css（“transform”、“translate3d”（+curSlide*50+“%，0,0）”）；
差异=0；
自动滑动（）；
}
函数navigateLeft（）{
如果（动画）返回；
如果（curSlide>0）curSlide--；
更改幻灯片（）；
}
函数navigateRight（）{
如果（动画）返回；
if（curSlide0））diff/=2；
$slider.css（“transform”、“translate3d”（+（-curSlide*100-diff）+“%，0,0）”）；
css（“transform”，“translate3d”（+（curSlide*50+diff/2）+“%，0,0）”）；
});
});
$（文档）.on（“mouseup touchend”，函数（e）{
$（document）.off（“mousemove touchmove”）；
如果（动画）返回；
if（！diff）{
更改幻灯片（正确）；
返回；
}
if（diff>-6&&diff<6）{
更改幻灯片（）；
返回；
}
如果（差异=6）{
导航灯（）；
}
});
$（文档）.on（“单击“，”.slider control”，函数（）{
if（$（this）.hasClass（“左”））{
navigateLeft（）；
}否则{
导航灯（）；
}
});
$（文档）.on（“单击“，”.slider-pagi\uu elem”，函数（）{
curSlide=$（此）.data（“页面”）；
更改幻灯片（）；
});
});

HTML

<div class="slider-container">
  <div class="slider-control left inactive"></div>
  <div class="slider-control right"></div>
  <ul class="slider-pagi"></ul>
  <div class="slider">
    <div class="slide slide-0 active">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">Ives<sup>®</sup> hands-free door pulls</h3>
          <p class="slide__text-desc">Ives offers hands-free pulls and door opening tools that enable pedestrians to operate the door with an arm or foot to avoid contacting surfaces with their hands. This is a cost-effective solution for retrofitting high-traffic mechanical applications to hands-free.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
    <div class="slide slide-1 ">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">LCN<sup>®</sup> touchless actuators</h3>
          <p class="slide__text-desc">Allegion offers no-touch actuators that are installed in place of push buttons and comply with ANSI 156.19 low energy standards. A pedestrian simply waves a hand in front of the wall plate, the technology senses the motion and acknowledges intent to enter. No contact with the door or hardware is required.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
    <div class="slide slide-2">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">Schlage<sup>®</sup> mobile access solutions</h3>
          <p class="slide__text-desc">Schlage Mobile Access Solutions provide comprehensive touchless offering, including mobile enabled multi-technology readers, mobile enabled wireless electronic locks and mobile access credentials.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

新特色产品
艾夫斯®免提门拉手
艾夫斯提供免提拉手和开门工具，使行人能够用手臂或脚操作车门，避免用手接触表面。这是一个经济高效的解决方案，用于将高流量机械应用改装为免提。
了解更多信息
新特色产品
LCN®非接触式执行器
Allegion提供非接触式执行机构，安装在按钮的位置，符合ANSI 156.19低能耗标准。行人只需在墙板前挥动一只手，这项技术就能感应到运动并确认进入的意图。无需接触车门或五金件。
了解更多信息

新特色产品
Schlage®移动接入解决方案
Schlage移动接入解决方案提供全面的非接触式服务，包括支持移动的多技术阅读器、支持移动的无线电子锁和移动接入凭证。
了解更多信息

---

蒂亚

刚刚尝试了以下方法，似乎已经纠正了问题

我改变了这一行：

numOfSlides=$（“.slide”）。长度为1

为此：

numOfSlides=$（“.slide”）。长度为2

---

现在得到了想要的结果…只需要3张幻灯片。希望代码基本上是正确的。

不知道这是否解决了您的问题，但我相信您混淆了长度和索引。这似乎是错误的：numOfSlides=$（“.slide”）.length-1。它应该是numOfSlides=$（“.slide”）。length@MannyAlvarado谢谢你的提示。我不知道你建议的代码是否正确。但无论如何，它都没有达到预期的效果。现在，它显示的不是1张额外的空白幻灯片，而是2张额外的空白幻灯片。所以总共有5个，而应该只有3个。看看你有多少“幻灯片”课程。如果你有三张幻灯片，你应该只有三张。这样你就不需要这样做了。但很好，你解决了你的问题