在img src更改时为图像添加Slidein过渡效果？

Question

我在.HTML文件中有一个img标签，如下所示：

<img id="xyz"/>

在javascript中，我有如下代码：

let i = 1;
let images = ["src1", "src2", "src3", "src4", "src5"];

let imgDiv = document.getElementById('xyz');
imgDiv.src = images[0];

setInterval(() => {
    momentDiv.src = images[i];
    i++;
    if(i == images.length) i=0;
}, 5000);

imgDiv中的图像每5秒切换一次。

每当“ src”属性更改时，如何为图像赋予动画或过渡效果？

请不要jQuery。

Answer 1

不可能像您想要的那样做。

要制作幻灯片效果，至少需要2张图像。 因此，您需要更新第二张图片的src并将此图片移到第一张图片的上方。 然后，您的第二张图片应成为第一张（您需要将第二张图片的src复制到旧图片标签并重复执行algorytm）

 let i = 1; let images = ["https://picsum.photos/200/200/?image=663", "https://picsum.photos/200/200/?image=662", "https://picsum.photos/200/200/?image=661", "https://picsum.photos/200/200/?image=660", "https://picsum.photos/200/200/?image=659"]; let imgDiv = document.getElementById('xyz'); let imgSecond = document.getElementById('zyx'); imgDiv.src = images[0]; setInterval(() => { imgSecond.src = images[i]; imgSecond.classList.add('active'); i++; if(i == images.length) i=0; setTimeout(function() { imgDiv.src = imgSecond.src; imgSecond.classList.remove('active'); }, 1500); // the same time as transition animation at css. }, 2000); 

 .wrap { position: relative; overflow: hidden; width: 200px; height: 200px; } .wrap > img { position: absolute; top: 0; left: 0; } .wrap > img#zyx { top: 200px; } .wrap > img#zyx.active { top: 0; transition: top 1.5s; } 

 <div class="wrap"> <img id="xyz" width="200" height="200"/> <img id="zyx" width="200" height="200"/> </div> 

希望这对您有所帮助。