原版鼠标悬停循环功能 Javascript

Question

我正在尝试创建图像轮播，并希望在用户将鼠标悬停在 div 的左侧和右侧时水平滚动。我有两个“不可见的” divs 用于左右控件，并给了它们 eventListeners:

right.addEventListener("mouseover", goRight)

function goRight() {
    document.getElementById('images').scrollLeft += 20;
}

left.addEventListener("mouseover", goLeft)

function goLeft() {

    document.getElementById('images').scrollLeft -= 20;
}

当我将鼠标悬停在它们上面时，它会滚动一次，但我希望它一直滚动直到我鼠标移开。当我悬停在控件上时，如何使 goRight()/goLeft() 循环？

Answer 1

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

上使用 clearInterval()

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

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

原版鼠标悬停循环功能 Javascript

Loop Function on Mouseover in Vanilla Javascript

javascript

mouseover