Javascript vanila JS转盘中的mouseenter clearInterval（）
我有一个带3张幻灯片的无限旋转木马。在帮助下，我能够分离功能。当我把鼠标放在这张幻灯片上时，我希望功能滑块停止，当我取下鼠标时，它会再次工作Javascript vanila JS转盘中的mouseenter clearInterval（）,javascript,html,css,Javascript,Html,Css,我有一个带3张幻灯片的无限旋转木马。在帮助下，我能够分离功能。当我把鼠标放在这张幻灯片上时，我希望功能滑块停止，当我取下鼠标时，它会再次工作 ClearInterval是通过addEventListner使用的，但它不起作用清除间隔（移动）在移动功能中也不起作用 我测试的最后一个函数是这个。我应该做什么来实现这个功能清除间隔（滑块）不工作 函数滑块（）{ 让幻灯片=document.queryselectoral（“.slide”）， slider=document.querySelector
ClearIntervaladdEventListner函数滑块（）{
让幻灯片=document.queryselectoral（“.slide”），
slider=document.querySelector（“.slider”），
last=slider.lastElementChild，
first=slider.firstElementChild，
btn=document.queryselectoral（“.btn”）；
slider.insertBefore（最后一个，第一个）；
btn.forEach（btn=>{
btn.addEventListener（“点击”，移动）；
});
setInterval（函数（）{
运动({
目标：{
id:“下一个”
}
});
}, 8000);
功能运动（e）{
slider=document.querySelector（“.slider”）；
last=slider.lastElementChild；
first=slider.firstElementChild；
const activeSlide=document.querySelector（“.active”）；
如果（e.target.id==“下一步”）{
slider.insertBefore（first、last.nextSibling）；
activeSlide.classList.remove（“active”）；
activeSlide.nextElementSibling.classList.add（“活动”）；
}否则{
slider.insertBefore（最后一个，第一个）；
activeSlide.classList.remove（“active”）；
activeSlide.previousElementSibling.classList.add（“活动”）；
}
}
}
滑块（）；
让幻灯片=document.queryselectoral（“.slide”）；
对于（i=0；i*{
保证金：0；
填充：0；
}
.滑块{
位置：相对位置；
宽度：100vw；
最大宽度：100%；
高度：120px；
保证金：自动；
溢出：隐藏；
}
.幻灯片{
宽度：100%；
高度：300px；
位置：绝对位置；
文本对齐：居中；
-webkit转换：0.6s易用性；
过渡：0.6s缓解；
-webkit转换：转换（-100%，0）；
转换：转换（-100%，0）；
}
.slide.active{
-webkit转换：转换（0,0）；
变换：平移（0,0）；
}
.slide.active~.slide{
-webkit转换：翻译（100%，0）；
转换：转换（100%，0）；
}
* {
-webkit框大小：边框框；
框大小：边框框；
}
身体{
文本对齐：居中；
}
.幻灯片{
背景：#222；
颜色：白色；
填充：30px；
}
钮扣{
边缘顶部：20px；
边界：无；
边界半径：0；
背景：aliceblue；
颜色：#333；
填充：10px；
光标：指针；
}
幻灯片一
试验
幻灯片二
试验
幻灯片三
1234
上
下一个
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 120px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
</style>
<body>
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>
</body>
<script>
var sliderInterval = '';
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider");
console.log("slider=========",slider);
let last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
sliderInterval = setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 1000);
}
slider();
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
console.log("slides[i]=========",slides[i]);
slides[i].addEventListener('mouseenter', function(){
console.log("on mouseenter");
clearInterval(sliderInterval);
})
slides[i].addEventListener('mouseleave', function(){
sliderInterval = setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 1000);
})
}
</script>
</html>
* {
保证金：0；
填充：0；
}
.滑块{
位置：相对位置；
宽度：100vw；
最大宽度：100%；
高度：120px；
保证金：自动；
溢出：隐藏；
}
.幻灯片{
宽度：100%；
高度：300px；
位置：绝对位置；
文本对齐：居中；
-webkit转换：0.6s易用性；
过渡：0.6s缓解；
-webkit转换：转换（-100%，0）；
转换：转换（-100%，0）；
}
.slide.active{
-webkit转换：转换（0,0）；
变换：平移（0,0）；
}
.slide.active~.slide{
-webkit转换：翻译（100%，0）；
转换：转换（100%，0）；
}
* {
-webkit框大小：边框框；
框大小：边框框；
}
身体{
文本对齐：居中；
}
.幻灯片{
背景：#222；
颜色：白色；
填充：30px；
}
钮扣{
边缘顶部：20px；
边界：无；
边界半径：0；
背景：aliceblue；
颜色：#333；
填充：10px；
光标：指针；
}
幻灯片一
试验
幻灯片二
试验
幻灯片三
1234
上
下一个
var sliderInterval=''；
功能运动（e）{
slider=document.querySelector（“.slider”）；
last=slider.lastElementChild；
first=slider.firstElementChild；
const activeSlide=document.querySelector（“.active”）；
如果（e.target.id==“下一步”）{
slider.insertBefore（first、last.nextSibling）；
activeSlide.classList.remove（“active”）；
activeSlide.nextElementSibling.classList.add（“活动”）；
}否则{
slider.insertBefore（最后一个，第一个）；
activeSlide.classList.remove（“active”）；
activeSlide.previousElementSibling.classList.add（“活动”）；
}
}
函数滑块（）{
乐