javascript - 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 复制到旧图片标签并重复算法)

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>

希望对你有帮助。