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

Question

我尝试了一些不同的事情，但没有运气。 我希望当前图像慢慢淡出并淡入下一个图像。

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

Answer 1

我使用的技巧是使用背景图像而不是真实图像。 这允许使用一些简单的 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>

Answer 2

如果你想做动画，那么我建议你查看一个库来帮助你。 这里我使用的是 jQuery，我所需要的基本上是delay()和fadeOut() ，尽管在大多数其他流行的库中应该可以找到等价物。

另外：我正在设置图像的z-index ，以便显示的第一个图像具有最高的 z-index，第二个图像是第二高的，依此类推。 工作代码示例...

 $('#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>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-10-06 20:04:51

解决方案2
1 2020-10-06 21:36:20

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-10-06 20:04:51

解决方案2 1 2020-10-06 21:36:20

解决方案1
1 已采纳 2020-10-06 20:04:51

解决方案2
1 2020-10-06 21:36:20