如何使用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;
}

Answer 2

HTML代码

<div id = "myDiv"></div>

CSS代码

#myDiv{
   width: <yourDivWidth>;
   height: <yourDivHeight>;
   background-size: cover;
  }

JavaScript代码

var box = document.getElementById("myDiv");    
var imagesList = ["url('images/1.jpg')", "url('images/2.jpg')", "url('images/3.jpg')"];

i = 0;
box.style.backgroundImage = imagesList[i];

function nextImg(){
   box.style.backgroundImage = imagesList[i+1];
   //box.style.width = "1366px";
   //box.style.height = "1366px";
   //declare your width and height of div in css and give background-size: cover;.
   i = i+1;
   if(i == imagesList.length){
     i = 0;
     box.style.backgroundImage = imagesList[i];
   }
}

window.onload = setInterval(nextImg, 6000);

等待6秒钟，然后查看背景图像的变化。
如果您还想在前6秒设置背景图像，则可以在CSS中进行设置。
如果您有任何疑问，请发表评论。