在指定时间后更改的背景图像之间添加更平滑过渡的简单方法？

Question

我设置了 JavaScript，以便 div#hero 中的背景图像每 5000 毫秒在 3 个不同的图像之间交替。

两个问题：

1. 如何在更改图像时添加平滑的淡入淡出过渡？

2. 函数开始前的前 5000 毫秒，不显示图像。在不等待时间间隔的情况下显示第一张图像的最简单方法是什么，然后在原始页面加载后按间隔时间继续前进？

   var interval_time = 5000;//in milliseconds
   setInterval(carousel, interval_time);
   function carousel(){
   var imgCount = 3;
       var dir = 'images/';
       var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
       var images = new Array
               images[1] = "1.jpg",
               images[2] = "2.jpg",
               images[3] = "3.jpg",
       document.getElementById("hero").style.backgroundImage = "url(" + dir +              images[randomCount] + ")";
   }
   

Answer 1

您有几个选择。我会建议这样的事情：

var interval_time = 5000;//in milliseconds
function carousel(){
    var imgCount = 3;
    var dir = 'images/';
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    var images = ["1.jpg","2.jpg","3.jpg"];
    document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
    setInterval(carousel(), interval_time);
};
document.addEventListener('DOMContentLoaded', function() {
   carousel();
});

希望有帮助！