尝试在图像上使用不透明度进行过渡

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;
}