圖像在鼠標懸停時停止切換但在鼠標移開時恢復

Question

我的圖像在彼此之間切換，當您 hover 在它們上方切換時，它們會停止，但是當您移開鼠標時，它不想恢復切換。 我究竟做錯了什么？

<script>
   var t;

  addEventListener("load", () => {
    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();
    function nextSlide() {
      slides[index++ % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
      t = setTimeout(nextSlide, 500);
    }
  });

   $(".portfolio-image").mouseover(function () {
    if (t) {
      t = clearTimeout(t);
  }
  });

  $(".portfolio-image").mouseout(function () {
    if (t) {
      t = setTimeout(nextSlide, 500);
  }
  });

Answer 1

也許這可以幫助你：

$(".portfolio-image").mouseover(function () {
    if (t) {
      clearTimeout(t);
  }
  });

Answer 2

問題是“setTimeout”被調用一次，你想改用“setInterval”和“clearInterval”。

Answer 3

好的，我在你們的幫助下解決了它。 setInterval 更適合這個任務，我不得不將它放在與變量t相同的 scope 中，因為它沒有被讀取。

  var t;

  addEventListener("load", () => {

    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();
    t = setInterval(nextSlide, 500);
    function nextSlide() {
      slides[index++ % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
    }

   $(".portfolio-image").mouseover(function () {
      clearInterval(t);
  });

  $(".portfolio-image").mouseout(function () {
    t = setInterval(nextSlide, 100);
  });

  });

謝謝！