javascript - 是否可以使用 setInterval() 函数在图像之间进行转换？

Question

现在图像只是一张一张地切换，我希望在图像出于用户体验目的而更改时添加某种过渡。

在 HTML 中看起来是这样的:

<img id="image" src="img5.png" style="width:100%">

脚本如下所示:

var imageSources = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png"]

var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
    index++;
} , 2000);

Answer 1

我为你准备了一个解决方案:

<img id="myimage" src="http://www.dumpaday.com/wp-content/uploads/2019/12/1-45.jpg">
<script>
var images = [
    "http://www.dumpaday.com/wp-content/uploads/2019/12/1-45.jpg",
    "http://www.dumpaday.com/wp-content/uploads/2019/12/2-73.jpg",
    "http://www.dumpaday.com/wp-content/uploads/2019/12/3-66.jpg"
];
var index = 0;
var myImage = document.getElementById("myimage");
var i = 0;
setInterval(function() {
    if (++i % 2) {
        myImage.style.opacity = 0.1;
    } else {
        myImage.src = images[index = (index + 1) % images.length];
        myImage.style.opacity = 1;
    }
}, 2000);
</script>
<style>
    img {
      transition: opacity 1s;
    }
</style>

注意样式。

fiddle :https://jsfiddle.net/m3rxwbdv/