javascript - 如何向图像 slider 添加过渡/动画？

Question

如何在图像变化时添加过渡效果？

当数组循环遍历图像时，如何添加过渡以使其更加平滑。

var i = 0;
var images = [];
var time = 3000;


images[0] =  'test.jpg';
images[1] =  'test1.jpg';
images[2] =  'test2.jpg';


function changeImg() {
    document.slide.src = images[i];

    if(i < images.length - 1) {
        i++
    } else {
        i = 0;

    }



    setTimeout("changeImg()", time);
}

window.onload = changeImg;

Answer 1

我最简单的方法是将所有图像放入 1 个包装器中。 然后使用循环按元素索引设置事件图像。 像这样的事情

<style>
  .wrapper { position: relative; }
  .wrapper img {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s opacity;
    position: absolute;
  }
  .wrapper img.active {
    opacity: 1;
    visibility: visible;
    position: relative;
  }
</style>
<div class="wrapper">
  <img src={images[0]} />
  <img src={images[1]} />
  <img src={images[2]} />
  <img src={images[3]} />
</div>