[英]onmouseover and onmouseout setInterval
我一直被这个问题困扰。 我正在为我的应用程序使用 slider。 为了滑动我正在使用splide-js的应用程序。 我的图像 slider 工作正常。
我已将我的 slider 与我的li
元素连接起来。 我想制作自定义onmouseover
和onmouseout
事件。 当用户在li
上触发mouseover
时,它将暂停,当mouseout
时,它将恢复幻灯片。
我正在检查这个Stack Overflow 帖子,并试图通过使用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>
请在鼠标悬停时初始化并重新初始化间隔,如果存在间隔,则在鼠标退出时取消它。
请尝试以下代码。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.