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）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

当img src发生变化时，为图像添加Slidein过渡效果？

1 个答案: