每隔几秒钟在循环上淡入图像并在 mouseenter 上停止并在 mouseleave 上开始

Question

我试图每隔几秒钟在循环上淡入图像，并希望在将鼠标悬停在 div 上时停止循环，并在从 div 悬停时再次启动循环。图像正在正确淡入，但是当我将鼠标悬停时 循环没有停止。请帮帮我。当鼠标悬停在选项 div 上时，它应该停止，当鼠标移出它时，它应该开始。

<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 事件，但我无法让它工作，所以我使用了一个计时器。这个想法是使用mouseover & mouseout 在容器上设置data- 属性。这样，计时器可以知道退出和“暂停”。然后在鼠标移出时，再次开始过渡。

编辑：添加单独的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>