Question

我试图遍历下面的代码并在它们之间交叉淡入淡出，但是当我的函数运行时，我只能让一个图像淡出，其余的什么都不做，我的代码有问题吗，我我是 JS 的菜鸟，第一个图像淡出，其余的只是保持静态，是不是我的代码做错了什么。

HTML FILE
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">
      <img src="./best1.png" alt="" class="image1 active" />
      <img src="./best2.png" alt="" class="image2" />
      <img src="./best3.png" alt="" class="image3" />
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
Javascript
const active = document.querySelector(".active");
const header = document.querySelector(".header");
console.log(header.firstElementChild);
// console.log(active);

function cycleImages() {
  console.log(active.nextElementSibling);
  let next =
    active.nextElementSibling.length > 0
      ? active.nextElementSibling
      : header.firstElementChild;
  next.style.zIndex = 2;
  // function fadeOut(el) {
  //   el.style.opacity = 1;
  //   (function fade() {
  //     if ((el.style.opacity -= 0.1) < 0) {
  //       el.style.display = "none";
  //     } else {
  //       requestAnimationFrame(fade);
  //     }
  //   });
  // }
  function fadeOutEffect() {
    // var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
      if (!active.style.opacity) {
        active.style.opacity = 1;
      }
      if (active.style.opacity > 0) {
        active.style.opacity -= 0.1;
        active.style.zIndex = 1;
        active.style.display = "block";
        active.classList.remove("active");
        next.style.zIndex = 3;
        next.classList.add("active");
        console.log(next);
      } else {
        clearInterval(fadeEffect);
      }
    }, 200);
  }
  // setInterval(fadeOutEffect, 400);
  fadeOutEffect();
  // console.log(next);
}
document.addEventListener("DOMContentLoaded", setInterval(cycleImages(), 200));
// cycleImages();

Answer 1

您可以在纯 CSS 本身中处理实际的不透明度转换。

因此，在 JavaScript 方面剩下要做的就是决定我们想要循环的给定元素是否应该处于活动状态。

// Get all matching elements, with class "cycleImage
const cycleImages = document.querySelectorAll(".cycleImage");

function cycle() {
  for (let i = 0; i < cycleImages.length; i++) {
    if (cycleImages[i].classList.contains('active')) {
      cycleImages[i].classList.remove('active');
      // If the new index we want to set to active is out of bounds, start back at the beginning
      const newActive = i + 1 >= cycleImages.length ? 0 : i + 1;
      cycleImages[newActive].classList.add('active');
      break; // If we have already encountered our solution, we can break out of the loop early.
    }
  }
}

document.addEventListener("DOMContentLoaded", () => setInterval(cycle, 2000));

.cycleImage.active {
  z-index: 2;
  opacity: 1;
}

.cycleImage {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.2s;
  /* For test display only, remove from here */
  height: 100px;
  width: 100px;
}

.image1 {
  background-color: blue;
}

.image2 {
  background-color: red;
}

.image3 {
  background-color: green;
}


/* Until here */

<div class="header">
  <img src="./best1.png" alt="" class="cycleImage image1 active" />
  <img src="./best2.png" alt="" class="cycleImage image2" />
  <img src="./best3.png" alt="" class="cycleImage image3" />
</div>

淡入淡出动画

1 个答案: