如何更改每张随机图像以平滑淡入下一张图像？

科克

我没有运气就尝试了几种不同的方法。我希望当前图像慢慢淡出并淡入下一张图像。

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

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

达迪比特

我使用的技巧是使用背景图像而不是真实图像。这允许使用一些简单的CSS为所有内容设置动画。对于仅JS解决方案，我建议使用jQuery。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。