javascript - 鼠标悬停在 li 上时，没有顺利更改 img

Question

当我将鼠标悬停在某些幻灯片上时li，img幻灯片中的变化很快。并在 7 秒后img更改为下一个img不正确。应该是平滑的幻灯片，在我悬停后添加class="hover"到下一个。li但我不知道怎么做

https://jsfiddle.net/maplol/1g3Lz5mw/1/

let nextBackground = null;
let timestop = 7000;
let active;
let next;

//when mouse move or not
nextBackground = setInterval(cycleImages, timestop);
$(document).on({
  mousemove: function() {
    if (nextBackground !== null) {
      clearInterval(nextBackground);
    }
    nextBackground = setInterval(cycleImages, timestop);
  },
  mouseout: function() {
    if (nextBackground !== null) {
      clearInterval(nextBackground);
    }
    nextBackground = setInterval(cycleImages, timestop);
  },
  mousein: function() {
    if (nextBackground !== null) {
      clearInterval(nextBackground);
    }
    nextBackground = setInterval(cycleImages, timestop);
  },
});

$(".navigate li")
  .eq(0)
  .append('<img src="/image/mainscl.svg"/>')
  .children("a")
  .addClass("hover");
let i = 1;

//slider - slideshow
$("#slider").hide();

function cycleImages() {
  $(".navigate li").find("img").remove();
  i = i > $(".navigate li").length - 1 ? 0 : i;
  $(".navigate li").find("img").fadeOut();
  $(".navigate li").children("a").removeClass("hover");

  $(".navigate li")
    .eq(i)
    .append('<img src="/image/mainscl.svg"/>')
    .fadeIn()
    .children("a")
    .addClass("hover");

  //slideshow for img
  active = $("#slider .active");
  next =
    $("#slider .active").next().length > 0 ?
    $("#slider .active").next() :
    $("#slider img:first");
  next.css("z-index", -2);
  active.fadeOut(1500, function() {
    active.css("z-index", -3).show().removeClass("active");
    next.css("z-index", -1).addClass("active");
  });
  i++;
}

$("#slider").fadeIn(1500);

let chosen_li = [];
let m = 0;
$(".navigate li")
  .children("a")
  .on("mouseover", function() {
    $(".navigate li").children("a").removeClass("hover");
    let li = $(this);
    $(".navigate li").find("img").remove();
    li.parents("li").append('<img src="/image/mainscl.svg"/>').fadeIn(100);
    li.addClass("hover");
    let index_li = li.parents("li").index();

    chosen_li.unshift(index_li);
    if (chosen_li.length > 2) {
      chosen_li.pop();
    }

    if (chosen_li[1] !== chosen_li[0]) {
      $(".navigate li").eq(chosen_li[1]).children("a").removeClass("hover");
      next = $("#slider img").eq(chosen_li[1]).addClass("active");
    }
    i = chosen_li[0] + 1;

    ////I have issue with that -------------------------------------------------------------
    $("#slider img").hide().removeClass("active");
    active = $("#slider img").eq(chosen_li[0]);
    active.addClass("active")
    next.css("z-index", -2);
    active.fadeOut(1500, function() {
      active.css("z-index", -3).show().removeClass("active");
      next.css("z-index", -1).addClass("active");
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div id="slider">
    <img class="active" src="https://cdn.pixabay.com/photo/2019/05/21/07/11/cat-4218424_960_720.jpg" alt="back">
    <img src="https://cdn.pixabay.com/photo/2020/08/12/07/09/landscape-5481816_960_720.jpg" alt="back">
    <img src="https://cdn.pixabay.com/photo/2019/09/11/02/23/hongkong-4467663_960_720.jpg" alt="back">
    <img src="https://cdn.pixabay.com/photo/2020/11/10/18/09/boy-5730628_960_720.jpg" alt="back">
    <img src="https://cdn.pixabay.com/photo/2020/11/18/22/38/lake-5756911_960_720.jpg" alt="back">
    <img src="https://cdn.pixabay.com/photo/2019/07/05/12/35/yellow-4318482_960_720.jpg" alt="back">
  </div>
  <main>
    <ul class="navigate">
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
    </ul>
  </main>
</section>

section {
  height: 100vh;
  display: flex;
}

#slider {
  z-index: -4;
  position: absolute;
  width: 100%;
  height: 100%;
}

#slider img {
  position: absolute;
  z-index: -3;
  width: 100%;
  height: 100%;
}

#slider img.active {
  z-index: -1;
}

.catalog_text {
  cursor: pointer;
}

main {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.navigate li a {
  font-family: Geometria;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 42px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
}

.navigate li a.hover {
  color: #0d9b8a;
}

.navigate {
  margin-top: 300px;
}

.navigate li img {
  vertical-align: middle;
  margin-left: 10px;
}

标签： javascriptjquerycssslideshow