Question

我有一个 javascript，它每 5 秒更改一次 IMG，它工作正常。问题是我尝试在其上添加淡入淡出过渡效果，但并未对其应用。我哪里做错了？任何帮助表示赞赏。提前致谢。

let images = ['Img2.jpg', 'Img3.jpg', 'Img4.jpg', 'Img5.jpg'];

let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');

function change() {
  imgElement.src = images[index];
  index > 1 ? index = 0 : index++;
}

window.onload = function() {
  setInterval(change, 5000);
};

.mainDisplay {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 2%;
}

.mainDisplay img {
  width: 75%;
  height: 600px;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

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

<div class="mainDisplay">
  <img id="mainDisplayImg" src="Img1.jpg">
  <img class="slide active" src="Img2.jpg" style="display: none">
  <img class="slide" src="Img3.jpg" style="display: none">
  <img class="slide" src="Img4.jpg" style="display: none">
  <img class="slide" src="Img5.jpg" style="display: none">
</div>

Answer 1

首先，如果您想要任何类型的过渡，请不要使用 display: none，因为它播放效果不佳。您可以通过将元素放置在视图区域之外来“隐藏”元素；其次，由于您已经在 html 中预定义了图像，您不必在 javascript 中复制它们，您可以在 html 元素中循环并设置 active 类：

let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
const slides = document.querySelectorAll(".mainDisplay .slide");
function change() {
  if (++index >= slides.length)
    index = 0;

  for(let i = 0; i< slides.length; i++)
    slides[i].classList.toggle("active", i == index);
}

window.onload = function() {
  setInterval(change, 2000);
};

.mainDisplay {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 2%;
}

.mainDisplay img {
  width: 75%;
  height: 600px;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  position: absolute;
  top: -100wh; /* hide from view */
}

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

<div class="mainDisplay">
  <img class="slide active" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj">
  <img class="slide" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
  <img class="slide" src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w1024-h683-n-l50-sg-rj">
  <img class="slide" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
</div>

Answer 2

这应该对你有用。

const imgElement = document.querySelectorAll('.slide');
let i = 1;
window.onload = function () {
  setInterval(function () {
  i = i % 5;
  imgElement[i].classList.add('active');
  imgElement[i].previousElementSibling?.classList.remove('active');
  if (i == 0 && imgElement[4].classList.contains('active')) {
      imgElement[4].classList.remove('active');
  }
  i++;
  }, 5000);
};





.mainDisplay {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 2%;
 }

.mainDisplay img {
 width: 75%;
 height: 600px;
}

.slide {
 width: 100%;
 height: 100%;
 display: none;
}

.active {
 display: block;
 animation: fadeIn 1s;
}

 @keyframes fadeIn {
   0% {
     opacity: 0;
   }
   100% {
    opacity: 1;
  }
}





<div class="mainDisplay">
    <!-- <img id="mainDisplayImg" src="./Img1.jpg" /> -->
    <img class="slide active" src="./Img1.jpg" />
    <img class="slide" src="./Img2.jpg" />
    <img class="slide" src="./Img3.jpg" />
    <img class="slide" src="./Img4.jpg" />
    <img class="slide" src="./Img5.jpg" />
  </div>

javascript img 幻灯片不褪色

2 个答案: