如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。