javascript img 幻燈片不褪色

Question

我有一個 javascript 每 5 秒更改一次 IMG，它工作正常。 問題是我試圖在它上面添加一個淡入淡出過渡效果，但它沒有被應用到它上面。 我在哪里 go 錯了？ 任何幫助表示贊賞。 提前致謝。

 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它只是播放不好。 您可以通過將元素放置在視圖區域之外來“隱藏”元素； Second since you already have predefined images in the html, you don't have to duplicate them in javascript, you can cycle through html elements instead and set active class:

 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>