使用Javascript使背景淡入

Question

您好，下面是我的JS代码，用于每30秒更改一次背景图片。 我也从研究中得到了这个示例代码，请有人告诉我如何将示例代码集成到我的JS中，所以变化的图像逐渐淡出，因为我根本不知道从哪里开始并且完全迷失了方向。

我的JS

<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>

我要集成的示例JS

var img = document.getElementById("fade");

var fadeLength = 5500;
var opacity = 0;
 var startTime = Date.now();

requestAnimationFrame(function me() { 
// It's faded in, stop animating!
if (opacity >= 1) {
   return;   
}

opacity = (Date.now() - startTime) / fadeLength;
img.textContent = opacity;    
img.style.opacity = opacity;        
requestAnimationFrame(me);
});

还有没有一种方法可以在不使用CSS的情况下使背景适合j​​avascript中的浏览器窗口？

谢谢，请有人帮忙！

Answer 1

一种解决方案是使用CSS过渡。 无需JS转换。

transition: background-image 6s;

例