您正在使用语句const slides = slideshow.children;定义幻灯片。幻灯片显示共有4个直接子项，因此计数器在技术上是正确的（请参见幻灯片1、幻灯片2、幻灯片3和slideshow-controls）。
获得您想要的幻灯片的一种方法是使用const slides = document.getElementsByClassName("slide")。我希望这能有所帮助！

你的幻灯片div查尔兹抛出4，因为你的第四个div是幻灯片控件。你可能想在计数器上加-1或者重新定义你的div。祝你好运！

问题是你的slides变量没有被分配到正确的元素列表中，正如前面的答案所说，你应该用document.getElementsByClassName('slide')或document.querySelectorAll('.slide')替换slideshow.children，使用两者中的任何一个。
通过使用slideshow.children，您不会得到.slide类，而是得到#slideshow的所有子类。
因此，第67行中的变量应如下所示：

const slides = document.querySelectorAll('.slide');

或

const slides = document.getElementsByClassName('.slide');

如果有人需要查看代码：这是他发送的codepen中的JS代码，下次将代码添加到此处

<script>
  const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;

function goToSlide(n) {
  slides[currentSlide].classList.remove("active");
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
  updateSlideshowCounter();
}

function nextSlide() {
  goToSlide(currentSlide + 1);
}

function prevSlide() {
  goToSlide(currentSlide - 1);
}

function updateSlideshowCounter() {
  const slideshowCounter = document.getElementById("slideshow-counter");
  slideshowCounter.textContent = `${currentSlide + 1} / ${slides.length}`;
}

const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);

const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);

updateSlideshowCounter();

</script>

你应该保持幻灯片控件出你的幻灯片div。我附上下面的代码。运行它，并检查。

const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;

function goToSlide(n) {
  slides[currentSlide].classList.remove("active");
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
  updateSlideshowCounter();
}

function nextSlide() {
  goToSlide(currentSlide + 1);
}

function prevSlide() {
  goToSlide(currentSlide - 1);
}

function updateSlideshowCounter() {
  const slideshowCounter = document.getElementById("slideshow-counter");
  slideshowCounter.textContent = `${currentSlide + 1} / ${slides.length}`;
}

const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);

const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);

updateSlideshowCounter();

#slideshowbox {
  position: relative;
  width: 400px;
  height: 300px;
}

#slideshow {
  position: relative;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px black solid;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slide.active {
  opacity: 1;
}

#slideshow-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

#prev-button,
#next-button {
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

#prev-button {
  margin-right: 20px;
}

#next-button {
  margin-left: 20px;
}

#slideshow-counter {
  margin: 0 20px;
}

<div id="slideshowbox">
  <div id="slideshow">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <div id="slideshow-controls">
    <button id="prev-button">Prev</button>
    <span id="slideshow-counter"></span>
    <button id="next-button">Next</button>
  </div>
</div>