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

问题

I was recently playing with some Javascript - and I was trying a create a small slideshow using only Vanilla Javascript with no libraries such as jQuery - in fact in this small project I want to learn how to use and implement it in real website.

Here is my HTML markup:

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

My idea was to use a HTML div container with img tag in it - in each iteration in Javascript program the image will fade out, change it's source and then it will fade in back with new image - and so on. At this point I've created an awful solution what only holds the idea together:

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

Instead of doing it fluently my slideshow is first blinking with new image and then is fading in with it. I know that I should optimize it but how?

I know there are a much better solutions but up to now I failed badly to find any good fit to my idea.

回答1:

I think one possible solution is to utilize css transitions with the opacity property. Then use JavaScript to add/remove the appropriate css class.

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

来源：https://stackoverflow.com/questions/53498656/how-to-create-fade-in-out-transitions-between-elements-of-image-array-in-vanilla

标签

javascript

html

image

fading