onmouseover和onmouseout setInterval

问题描述

我一直被这个问题困扰。我正在为我的应用程序使用滑块。为了滑动应用程序，我使用了splide-js。我的图像滑块工作正常。

我已将滑块与li元素连接在一起。我想进行自定义onmouseover和onmouseout事件。当用户在mouseover上触发li时，它将暂停，而当mouseout时，它将恢复幻灯片。

我当时正在检查此Stack Overflow post，并试图通过使用setinterval来像人一样做逻辑，但无法做到这一点。

const autoPlay = false;
const pauseOnHover = document.getElementById('pause');

function nextSlide() { //I don't what kind logic I should use to pause the slide

}

let  timer = setInterval(function() {
  nextSlide();
},400);


pauseOnHover.onmouseover = () => {
  if( autoPlay) {
    timer
  }
}
pauseOnHover.onmouseout = () => {
  if (autoPlay) {
    clearInterval(timer)
  }
}

<div class='checklist' id="pause">
  <ol>
    <li id="link-1">Assign jobs in an instant.</li>
    <li id="link-2">Always see what's happening.</li>
    <li id="link-3">Easy to set-up & use.</li>
    <li id="link-4">Be more sustainable</li>
  </ol>
</div>

解决方法

请在鼠标悬停时初始化并重新插入间隔，如果存在间隔，请在onmouseout上取消它。

请尝试以下代码。

const autoPlay = false;
const pauseOnHover = document.getElementById('pause');

function nextSlide() {
  //For example I have put console.log,you mat put any code block here.
  console.log("hello");
}

let timer;


pauseOnHover.onmouseover = () => {

  autoplay = true;
  if (!autoPlay) {
    autoplay = true;
    timer = setInterval(function() {
      nextSlide();
    },400);
  }
}
pauseOnHover.onmouseout = () => {

  autoplay = false;
  timer && clearInterval(timer)

}

<div class='checklist' id="pause">
  <ol>
    <li id="link-1">Assign jobs in an instant.</li>
    <li id="link-2">Always see what's happening.</li>
    <li id="link-3">Easy to set-up & use.</li>
    <li id="link-4">Be more sustainable</li>
  </ol>
</div>