Vanilla Javascript 中鼠标悬停时的循环函数

Question

我正在尝试创建图像轮播，并希望当用户将鼠标悬停在 div 的左侧和右侧时水平滚动。我为左右控件设置了两个“不可见”div，并为它们提供了事件监听器：right.addEventListener("鼠标悬停", goRight)function goRight() {     document.getElementById('images').scrollLeft += 20; }left.addEventListener("鼠标悬停", goLeft)function goLeft() {    document.getElementById('images').scrollLeft -= 20; }当我将鼠标悬停在它们上方时，它会滚动一次，但我希望它不断滚动，直到我鼠标移开。当我悬停在控件上时，如何使 goRight()/goLeft() 循环？

Answer 1

一种解决方案是使用setInterval()应该在 上取消的方法mouseout。您可以存储间隔 id 并clearInterval()使用mouseout：

const delay = 100;

let intervalId;

function goLeft() {

  intervalId = setInterval(

    () => (document.getElementById('images').scrollLeft -= 20),

    delay,

  );

}

function goRight() {

  intervalId = setInterval(

    () => (document.getElementById('images').scrollLeft += 20),

    delay,

  );

}

function stopScrolling() {

  clearInterval(intervalId);

}

left.addEventListener('mouseover', goLeft);

left.addEventListener('mouseout', stopScrolling);

right.addEventListener('mouseover', goRight);

right.addEventListener('mouseout', stopScrolling);

Answer 2

您可以创建一个布尔值，当用户将鼠标悬停在元素上时，该布尔值将为“true”。

// for the right side:

let mouseOverRight = false;

right.addEventListener("mouseenter", function(){

    mouseOverRight = true;

});

right.addEventListener("mouseleave", function(){

    mouseOverRight = false;

});

然后使用间隔，将延迟更改为您想要的任何速度

window.setInterval(function(){

  if (mouseOverRight)

  /// Scroll logic here

}, 300);

当然，你也必须对左侧做同样的事情。