Question

我有可以在彼此之间切换的图像，当您将鼠标悬停在它们上面时，它们会停止，但是当您移开鼠标时，它并不想恢复切换。我在做什么错了？

<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 相同的作用域，因为它未被读取。

  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);
  });

  });

谢谢！

鼠标悬停时图像停止切换，但鼠标悬停时恢复

3 个答案: