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

Question

I am trying to fade in images on loop for every few seconds and wanted to stop the loop on hover over div and again start the loop when hover out from div. Images are fading in properly but when I mouse over loop is not stopping. Kindly help me out. When mouseover on option div it supposed to stop and when mouseout from it, it supposed to start.

<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

The easiest way to do it with a timer. I tried to use a transitionend event but I couldn't get it to work so I went with a timer. The idea is to use mouseover & mouseout to set a data- attribute on the container. That way, the timer can know to bail out and "pause". Then on mouseout, start the transitions again.

Edit : Added separate div to pause rotations by request. Scroll the run output window to see it.

 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>