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

Question

我最近在玩一些 Javascript - 我正在尝试只使用 Vanilla Javascript 而不使用 jQuery 等库创建一个小型幻灯片 - 事实上在这个小project 我想学习如何在真实网站中使用和实施它。

这是我的 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)
}

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

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

Answer 1

我认为一种可能的解决方案是利用 css 不透明度属性的过渡。然后用JavaScript到add/remove合适的cssclass.

//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>

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

How to create fade in/out transitions between elements of image array in Vanilla Javascript - non background image

html

javascript

image

fading