javascript - 在此可变背景图像 javascript 上包含淡入(慢速)

Question

我有一段 Javascript 代码可以随机更改背景图像并且工作正常，但非常粗糙。我想在图像之间进行某种过渡，我想使用 fadeIn(slow) 但不知道如何将其合并到我的代码中，有人可以帮助我吗？干杯!

JavaScript

window.onload = function () {
 // Array of Images
  var backgroundImg=["https://image1.com",
                    "https://image2.com",
                    "https://image3.com",
                    "https://image4.com"
                    ]

    setInterval(changeImage, 5000);
   function changeImage() {   
    var i = Math.floor((Math.random() * 3));

    document.getElementById("sectionAbout").style.backgroundImage = "url('"+backgroundImg[i]+"')";

  }
}

Answer 1

简单的解决方案是将转换处理传递给您的浏览器，您应该关心的是背景变化。

假设我们想要为 body 背景设置动画。

这是使用颜色的工作示例，但也可以使用图像来完成，只需使用 backgroundImage 代替 backgroundColor

var arr = ['blue', 'red', 'pink', 'yellow', 'brown']
var i = 0;
document.getElementById('l').addEventListener('click', function() {

  document.body.style.backgroundColor = arr[i];
  i++
  if (i == arr.length)
    i = 0;
});

body {
  transition: background ease 2s;
}

<button id="l">OK</button>

编辑:如果是图像，您需要避免由于图像未加载而导致的动画抖动。

var arr = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g", "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"];
var i = 1;
var img = new Image();

img.onload = function() {
  document.body.style.backgroundImage = 'url(' + img.src + ')';
  i++;
  if (i == arr.length)
    i = 0;
  setTimeout(function() {
    img.src = arr[i];
  }, 5000);
};

img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA";

body {
  transition: background ease 2s;
}