如何在 Vanilla Javascript 中的图像数组元素之间创建淡入/淡出过渡 - 非背景图像答案

【问题标题】：How to create fade in/out transitions between elements of image array in Vanilla Javascript - non background image如何在 Vanilla Javascript 中的图像数组元素之间创建淡入/淡出过渡 - 非背景图像
【发布时间】：2018-11-27 11:27:58
【问题描述】：

我最近在玩一些 Javascript - 我正在尝试只使用 Vanilla Javascript 而没有像 jQuery 这样的库来创建一个小幻灯片 - 事实上在这个小项目中我想学习如何在真实网站中使用和实现它.

这是我的 HTML 标记：

<body onload="changeImage()">
    <div class="logo">
        <img src="logo.png" class="logo_image" id="imageholder"/>
    </div>

我的想法是使用一个带有 img 标签的 HTML div 容器——在 Javascript 程序的每次迭代中，图像都会淡出，改变它的源，然后它会用新的图像淡入 - 等等。在这一点上，我创建了一个糟糕的解决方案，它只将这个想法结合在一起：

function changeImage()
{
    var imgArray = new Array();
    imgArray[0] = "logo.png";
    imgArray[1] = "logo2.png";
    imgArray[2] = "logo3.png";
    imgArray[3] = "logo4.png";
    imgArray[4] = "logo5.png";
    var i = 0;

    var container = document.getElementById("imageholder");
    setInterval(() => {

        if(i == 5)
        {
            i = 0;
        }
        fadeout(container);
        container.src = imgArray[i];
        fadein(container);
        i++;
    }, 2500)
}

function fadeout(container)
{
    var op = 1;

    var timer = setInterval(() => {
        if (op <= 0.0)
        {
            clearInterval(timer);
        }
        container.style.opacity = op;
        op -=0.1;
    }, 1);
}

function fadein(container)
{
    var op = 0.0;

    var timer = setInterval(() => {
        if (op >= 1)
        {
            clearInterval(timer)
        }
        container.style.opacity = op;
        op += 0.1;
    }, 100)
}

我的幻灯片不是流畅地播放，而是首先闪烁新图像，然后逐渐淡入。我知道我应该优化它，但是如何优化呢？

我知道有更好的解决方案，但到目前为止，我未能找到任何适合我的想法的解决方案。

【问题讨论】：

标签： javascript html image fading

【解决方案1】：

我认为一种可能的解决方案是使用带有 opacity 属性的 css 过渡。然后使用 JavaScript 添加/删除适当的 css 类。

//get all the imgs in the "slide" div and change to an array of img objects
var slide = document.getElementById("slide");
var arr = Array.prototype.slice.call(slide.children);

//initialize css
arr.map(function(imgObj) {
  imgObj.classList.add("slide-img");
});

//showing the first slide
arr[0].classList.add("show");

//initializing values
var currentSlide = 1;
var slideLength = slide.children.length;
var prevSlide = 0;

//interval function
setInterval(function() {
  if (currentSlide >= slideLength)
    currentSlide = 0;

  arr[prevSlide].classList.remove("show");
  arr[currentSlide].classList.add("show");

  prevSlide = currentSlide;
  currentSlide++;

}, 5000)

#slide img {
  position: absolute;
}

.slide-img {
  opacity: 0;
  transition: opacity 2s;
}

.show {
  opacity: 1;
}

<div id="slide">
  <img src="https://via.placeholder.com/468x160?text=img1" />
  <img src="https://via.placeholder.com/468x160?text=img2" />
  <img src="https://via.placeholder.com/468x160?text=img3" />
</div>

【讨论】：

这是一个绝妙的主意 - 简单而高效。我完全忘记了在 javascript 中进行 css 操作的可能性。看来我毕竟需要重新学习一些东西。感谢 XTOTHEL 的快速回复。我会试试你的解决方案。