当鼠标悬停在div上时停止转盘滑动

Question

我制作了(取自w3(一个幻灯片样式的菜单。我希望当用户悬停在菜单上时，幻灯片放映会停止，用户手动控制，然后在用户离开容器时继续播放。

目前，自动播放不起作用，因为我的事件侦听器尝试失败，没有调用该函数。我用我流畅的大脑尝试了各种方法，在showSlides上添加了只有在正确的情况下才有效的参数。setTimeout很难确定我应该把它放在哪里，如果我把它留在showSlides中，它会创建这个无休止的循环。

编辑：添加了一个丢失的大括号

html

<div class="hero-navigate">

<a href="" class="">BEGINNERS</a>
<a href="" class="">UNDER 18's</a>
<a href="" class="">EXPERIENCED</a>
<a href="" class="">CLASSES</a>
<a href="" class="">GROUPS</a>
<a href="" class="">INFO</a>
</div>

scss

a {
width: min-content;
display: block;
color: #fae3df;
text-decoration: none;
font-family: lato, sans-serif;
font-weight: 900;
font-size: 4.5vw;
white-space: nowrap;
transform: skew(0deg, -6deg);
line-height: 5.5vw;
transition: 0.2s;
}
a:hover, .hover {
color: #31368a;
font-size: 5vw;
transition: 0.5s;
}

js

let slideIndex = 0;     
const hero = document.querySelector('.hero-navigate');
const aTags = document.querySelectorAll('.hero-navigate a');
document.addEventListener('mousemove', (event) => {
if(event.target !== hero){
setTimeout(showSlides(), 1800);
}});
function showSlides() {
// code removing current hover
var i;

for (i = 0; i < aTags.length; i++) {
aTags[i].classList.remove("hover");
}
//adding hover using slideIndex
slideIndex++;
if (slideIndex > aTags.length) {slideIndex = 1}
aTags[slideIndex-1].classList.add('hover')
} 

Answer 1

首先删除mousemove事件。当你一次又一次地移动鼠标时，它就会触发。这就是它跳跃的原因。当你悬停在某个东西上时，你只想让它取消计时器。所以悬停时，取消时间。mouseout，重新启动计时器。

Answer 2

这似乎有效：

let slideIndex = 0;     
const hero = document.querySelector('.hero-navigate');
const aTags = document.querySelectorAll('.hero-navigate a');
document.addEventListener('DOMContentLoaded', function(){

aTags.forEach(e => e.addEventListener('mouseenter', function(i){
const active = document.querySelector('.hover');
active.classList.remove("hover");
e.classList.add("hover");
slideIndex = Array.prototype.indexOf.call(e.parentNode.children, e);
}))
setInterval(
hero.onmouseleave = function() {
showSlides();
}, 1800
)
})
function showSlides() {
// code removing current hover
var i;

for (i = 0; i < aTags.length; i++) {
aTags[i].classList.remove("hover");
}
//adding hover using slideIndex
slideIndex++;
if (slideIndex > aTags.length) {slideIndex = 1}
aTags[slideIndex-1].classList.add('hover')
}

删除了一个：悬停

.hover {
color: #31368a;
font-size: 5vw;
transition: 0.5s;
}