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

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

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

Trying to make a transition with opacity on images

javascript

transition

image

slideshow

opacity