图片幻灯片将无法正常运行

Question

我正在制作图像 slideshow/carousel，其中有播放、暂停和停止按钮。当您按下播放键时，图像预计每 1 秒更改一次。但是一旦到达最后一张图片，它就不会返回到第一张图片。这有什么理由吗？共有19张照片，它们将按顺序移动。每张照片都有相同的 URL 除了 link 的末尾根据其在 19 个顺序中的顺序变化。

    <script>
  var count = 1;
  let mainElement = document.querySelector("div.main>.imgSub");
  let URL = "https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_";
  let thumbnailsElement = document.querySelector("div.thumbnails");
  thumbnailsElement.children[count-1].classList.add('selected');
    function next() {
        if (count < 19) {
          count++;
            if (count < 10) {
               console.log("count:" + count);
                x = URL + "0" + count + ".jpg";
            } else {
                x = URL + count + ".jpg";
            }
        } else {
            count = 1;
            x = URL + "0" + count + ".jpg";
        }
        mainElement.setAttribute('src', x);
        thumbnailsElement.children[count].classList.remove('selected');
        thumbnailsElement.children[count-1].classList.add('selected');
        thumbnailsElement.children[count-2].classList.remove('selected');
    }
    function prev() {
        if (count > 1) {
            if (count < 10) {
                count--;
                x = URL + "0" + count + ".jpg";
            } else {
                count--;
                x = URL + count + ".jpg";
            }
        } else if (count == 19) {
            count = 1;
            x = URL + count + ".jpg";
        }
        mainElement.setAttribute('src', x);
        thumbnailsElement.children[count].classList.remove('selected');
        thumbnailsElement.children[count-1].classList.add('selected');
        thumbnailsElement.children[count-2].classList.remove('selected');
    }
    //play stop reset buttons
    let timer;
    let nowPlaying = false;
    function autoPlay() {
      next();
      timer = setTimeout(function() {autoPlay();}, 1000);
    }
    function play() {
      if (nowPlaying == true) {
        return;
      }
      nowPlaying = true;
      autoPlay();
    }
    function stop() {
      clearTimeout(timer);
      nowPlaying = false;
    }
    function reset() {
      stop();
      thumbnailsElement.children[count].classList.remove('selected');
      thumbnailsElement.children[count-1].classList.remove('selected');
      count = 1;
      thumbnailsElement.children[count-1].classList.add('selected');
      URL = URL + "01.jpg";
      mainElement.setAttribute('src', URL);
    }
</script>

Answer 1

thumbnailsElement.children[count-2].classList.remove('selected');

当 count 的值为 1 时，此行会出错。因此，考虑到您的代码，将 'count++' 移动到 if-else 语句的末尾，即

  if (count < 19) {
      if (count < 10) {
         console.log("count:" + count);
          x = URL + "0" + count + ".jpg";
      } else {
          x = URL + count + ".jpg";
      }
  } else {
      count = 1;
      x = URL + "0" + count + ".jpg";
  }
    count++;    //changed statement
    mainElement.setAttribute('src', x);
    thumbnailsElement.children[count].classList.remove('selected');
    ...

我还认为 prev() 函数和 else if 语句中存在错误。应该是，

 else if (count == 2) {
    count = 19;
    x = URL + count + ".jpg";
}

有 2 而不是 1，因为在 next() 函数中计数永远不会变为 1

图片幻灯片将无法正常运行

Image slideshow will not function properly

html

image

slideshow

carousel