平滑背景图像变化 javascript

Question

var div = document.querySelector('.content');
var arr = ["pic1_LR.jpg", "pic2_LR.jpg", "pic3_LR.jpg"];

var index = 0;
var iterations = 0;

var updateImage = function () {
if (index >= arr.length) {
index = 0;
iterations++;
}
div.style.backgroundImage = 'url(' + arr[index] + ')';
index++;
}

var interval = setInterval(updateImage, 2000);

Right now it just instantly changes. I want it so that it changes smoothly.

Answer 1

You can use the transition CSS property.

.content {
  transition: background-image 500ms;
}

 var div = document.querySelector('.content'); var arr = ["https://images.unsplash.com/photo-1513151233558-d860c5398176?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZnVuJTIwYmFja2dyb3VuZHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80", "https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80", "https://media.istockphoto.com/photos/watercolor-textured-background-picture-id887755698?k=6&m=887755698&s=612x612&w=0&h=_yEUF8gLpWjZv5IgwuWkecNVt4X4P7vpuFBKCWIuR44="]; var index = 0; var iterations = 0; var updateImage = function () { if (index >= arr.length) { index = 0; iterations++; } div.style.backgroundImage = 'url(' + arr[index] + ')'; index++; } var interval = setInterval(updateImage, 2000);

 .content { width: 100px; height: 100px; transition: background-image 500ms; background-size: cover; }

 <div class="content"> </div>