尝试对图像进行不透明度的过渡

Question

就像我的标题所说，我试图在图像上进行不透明度（0 到 1，间隔 2 秒）的过渡，但我不知道如何实现。过渡仅适用于第一张图像，但不适用于其他图像，我不明白为什么。所以我希望你能帮助我理解我的错误，我是 javascript 的新手。预先感谢您，这是我的代码我的 HTML 文件：<img src="img/1.jpg" alt="slide-photo">我的 CSS 文件：#slideshow-home img {    width: 100%;    opacity: 0;    transition: 1s ease-in-out;}我的JS文件：var image = document.querySelector('img');var img = 1 ;window.setInterval(changeImage, 2000); function changeImage() {    image.setAttribute('src', 'img/' + img + '.jpg');     image.style.opacity = 1;     img++;     if(img === 6) {         img = 1;     }}

Answer 1

这就是我处理图像淡入淡出的方式，好处是它直到图像实际加载后才开始，所以淡入时它永远不会断断续续

JS

var image = document.querySelector('img');

var img = 1;

window.setInterval(changeImage,5000); 

function changeImage() {

    image.classList.remove('fadeIn')

    image.src = 'img/'+img+'.jpg'

    img++

    if (img == 6) {

      img = 1;

    } 

}

image.addEventListener('load', () => { // This function looks at the image and every time an image is loaded i.e whenever it gets a new src, it does a fade in animation

  void(image.offsetHeight)

  image.classList.add('fadeIn')

})

CSS

我通常用动画来做到这一点，如下所示

#slideshow-home img {

    width: 100%;

    opacity: 0;

}

@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.fadeIn {

  animation:fadeIn 2s forwards;

}