每隔几秒钟在循环中淡入图像，在mouseenter时停止，在mouse离开时开始

Question

我试图每隔几秒钟在循环中淡入一次图像，并希望在悬停在div上时停止循环，当悬停在div外时再次启动循环。图像正在正确淡入，但当我鼠标悬停时循环没有停止。请帮帮我。当mouseover在选项div上时，它应该停止，当mouseout离开它时，它需要启动。

<div class="fadein">
<img
id="f1"
src="assets/img/main-banners/financial-planning.svg"
alt=""
/>
<img
id="f2"
style="display: none;"
src="assets/img/main-banners/retirement-planning.svg"
alt=""
/>
<img
id="f3"
style="display: none;"
src="assets/img/main-banners/tax-planning.svg"
alt=""
/>
<img
id="f4"
style="display: none;"
src="assets/img/main-banners/investment-planning.svg"
alt=""
/>
</div>
<ul class="fianance-options">
<li class="option option-1"></li>
<li class="option option-2"></li>
<li class="option option-3"></li>
<li class="option option-4"></li>
</ul>

var $next = 1; // fixed, please do not modfy;
var $current = 0; // fixed, please do not modfy;
var $interval = 4000; // You can set single picture show time;
var $fadeTime = 800; // You can set fadeing-transition time;
var $imgNum = 4; // How many pictures do you have
$(document).ready(function () {
$(".fadein").css("position", "relative");
$(".fadein img").css({
position: "absolute",
width: "100%",
height: "100vh",
left: "-10%",
top: "35px"
});
nextFadeIn();
});
function nextFadeIn() {
//make image fade in and fade out at one time, without splash vsual;
$(".fadein img")
.eq($current)
.delay($interval)
.fadeOut($fadeTime)
.end()
.eq($next)
.delay($interval)
.hide()
.fadeIn($fadeTime, nextFadeIn);
// if You have 5 images, then (eq) range is 0~4
// so we should reset to 0 when value > 4;
if ($next < $imgNum - 1) {
$next++;
} else {
$next = 0;
}
if ($current < $imgNum - 1) {
$current++;
} else {
$current = 0;
}
}
var myTimer = setInterval(nextFadeIn, 5000);
$(".option").mouseleave(function () {
myTimer = setInterval(nextFadeIn, 5000);
console.log("start");
});
$(".option").mouseenter(function () {
clearInterval(myTimer);
console.log("stop");
});

Answer 1

使用计时器最简单的方法。我尝试使用transitionend事件，但无法使其工作，所以我使用了计时器。其思想是使用CCD_ 2&CCD_ 3以在容器上设置CCD_。这样，计时器就可以知道要退出并"退出"；暂停"；。然后在mouseout上，再次开始转换。

编辑：添加单独的div以根据请求暂停旋转。滚动运行输出窗口查看。

window.addEventListener("DOMContentLoaded", () => {
let faders = document.querySelectorAll(".faders");
let pauser = document.querySelector("#pauser");
faders.forEach((fader) => {
rotateChildren(fader);
fader.addEventListener("mouseover", () => {
fader.dataset.pause = true;
});
fader.addEventListener("mouseout", () => {
delete fader.dataset.pause;
rotateChildren(fader);
});
pauser.addEventListener("mouseover", () => {
fader.dataset.pause = true;
});
pauser.addEventListener("mouseout", () => {
delete fader.dataset.pause;
rotateChildren(fader);
});
});
});
function rotateChildren(container) {
let idx = parseInt(container.dataset.index);
container.children.item(idx).classList.add("show");
setTimeout(() => {
if (container.dataset.pause) return;
container.children.item(idx).classList.remove("show");
idx++;
if (idx >= container.children.length) idx = 0;
container.dataset.index = idx;
rotateChildren(container);
}, 2000);
}

.faders {
position: relative;
display: inline-block;
margin: 1em;
width: 200px;
height: 200px;
}
.faders img {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
opacity: 0;
transition: opacity 3s;
}
.faders .show {
opacity: 1;
}
#pauser {
margin: 1em;
padding: 2em 1em;
background-color: #444;
color: #ddd;
font-family: sans-serif;
}

<div class="faders" data-index="0">
<img src="https://picsum.photos/200?random=1" alt="" />
<img src="https://picsum.photos/200?random=2" alt="" />
<img src="https://picsum.photos/200?random=3" alt="" />
<img src="https://picsum.photos/200?random=4" alt="" />
</div>
<div class="faders" data-index="0">
<img src="https://picsum.photos/200?random=5" alt="" />
<img src="https://picsum.photos/200?random=6" alt="" />
<img src="https://picsum.photos/200?random=7" alt="" />
<img src="https://picsum.photos/200?random=8" alt="" />
</div>
<div id="pauser">Optional Pauser</div>