How can I change each random image to fade smoothly into next image?

Question

I tried few different things with no luck. I want the current image to slowly fade out and fade into the next image.

HTML

<div class="TestRotator " , style="text-align: center; padding-top: 20px; padding-bottom: 50px;">
                <img
                  src="/Users/loh/Documents/app1/images/0.png"
                  ,
                  height="130"
                  id="rotator"
                  ,
                  class="img-fluid, rounded image-hover"
                  alt="Responsive image"
                />
              </div>
              <script src="js_src/imagechanger.js"></script>

JS

(function () {
  var rotator = document.getElementById("rotator"); // change to match image ID        
  var imageDir =
    "/Users/loh/Documents/app1/images/";
  var delayInSeconds = 3;
  var num = 0;
  let currentIndex = 0;
  const totalImages = 16;
  const  changeImage = function () {
    var incre = Math.floor(Math.random() * (totalImages-1) ) + 1;
    num += incre;
    num = num % totalImages;
    rotator.src = imageDir  + num + ".png";
    
  };
  setInterval(changeImage, delayInSeconds * 1000);
})();

score 1 · Accepted Answer · answered Oct 06 '20 at 20:04

The trick I used is to use a background image instead of a real image. This allows to use some simple CSS to animate everything. For a JS only solution I suggest using jQuery, tho.

<html>
<head>
    <style>
        #view {
            background-image: url("/pictures/0.png");
            transition: background-image 1s;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="view"></div>
    <script>
        const view = document.getElementById("view");     
        const imageDir = "/pictures/";
        const delayInSeconds = 2; //more then #view transition timing
        const totalImages = 4; //0.png; 1.png; ...; 4.png;
        var i = 0;
        const  changeImage = () => {
            i += Math.floor(Math.random() * (totalImages-1) ) + 1;;
            i %= totalImages;
            view.style["background-image"] = `url(${imageDir}${i}.png)`;
        };
        changeImage(); //call immediately without having to wait for delayInSeconds
        setInterval(changeImage, delayInSeconds * 1000);
    </script>
</body>

Here's an explanation for the main difference of `` and `background-image`: https://stackoverflow.com/a/18753880/9373031 — DadiBit, Oct 06 '20 at 20:07

score 1 · Answer 2 · answered Oct 06 '20 at 21:36

If you want to do animation, then I recommend looking into a library to help with that. Here I'm using jQuery, and all I need are basically delay() and fadeOut(), though equivalents should be found in most other popular libraries.

In addition: I am setting the z-index of the images, so that the first image to show has the highest z-index, the second image the second-highest, and so on. Working code example...

$('#image1').delay(1000).fadeOut(500);
$('#image2').delay(2000).fadeOut(500);
$('#image3').delay(3000).fadeOut(500);
$('#image4').delay(4000).fadeOut(500);
$('#image5').delay(5000).fadeOut(500);
$('#image6').delay(6000).fadeOut(500);

div {
  position:fixed;
  background-color:white;
  font-size:500%;
}

#image1 {
  z-index:10;
}

#image2 {
  z-index:9;
}

#image3 {
  z-index:8;
}

#image4 {
  z-index:7;
}

#image5 {
  z-index:6;
}

#image6 {
  z-index:5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="image5"></div>
<div id="image6"></div>

Thanks! Appreciate the help. @DadiBit solution worked out great for what I was looking for — ikol, Oct 07 '20 at 19:12

How can I change each random image to fade smoothly into next image?

2 Answers2