javascript - 如何使用 JavaScript 为动态变化的图像背景提供过渡效果

Question

我有一个页面，其中特定 div 的背景图像不断动态变化。我希望能够对图像进行一些过渡效果。该页面在纯 javascript 上运行。这是我的代码:

var bgArray = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
var i = 0;

function myFunction() {
    setInterval(function() {
        if (i == 3) {
            i = 0;
        }
        var urlString = bgArray[i];
        var x = document.getElementById("myDiv");
        x.style.background = "url(" + bgArray[i] + ") no-repeat";
        x.style.backgroundSize = "1366px";
        i = i + 1;
    }, 6000);
}

myFunction();

谢谢。

Answer 1

#myDiv {
  transition: background 1s;
}