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

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

这就是我处理图像淡入淡出的方式，好处是它直到图像实际加载后才开始，所以淡入时它永远不会断断续续JSvar image = document.querySelector('img');var img = 1;window.setInterval(changeImage,5000);&nbsp;function changeImage() {&nbsp; &nbsp; image.classList.remove('fadeIn')&nbsp; &nbsp; image.src = 'img/'+img+'.jpg'&nbsp; &nbsp; img++&nbsp; &nbsp; if (img == 6) {&nbsp; &nbsp; &nbsp; img = 1;&nbsp; &nbsp; }&nbsp;}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&nbsp; void(image.offsetHeight)&nbsp; image.classList.add('fadeIn')})CSS我通常用动画来做到这一点，如下所示#slideshow-home img {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; opacity: 0;}@keyframes fadeIn {&nbsp; 0% {&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 1;&nbsp; }}.fadeIn {&nbsp; animation:fadeIn 2s forwards;}