平滑背景图像更改javascript

现在它只是瞬间改变。我希望它能够平稳地进行更改。

您可以使用

转换

CSS属性

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);

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指数=0；
var迭代次数=0；
var updateImage=函数（）{
如果（索引>=arr.length）{
指数=0；
迭代++；
}
div.style.backgroundImage='url（'+arr[index]+'）；
索引++；
}
var interval=setInterval（updateImage，2000）；

.content{
宽度：100px；
高度：100px；
过渡：背景图像500ms；
背景尺寸：封面；
}

你说“平滑”是什么意思？它们彼此淡入？作为提示，这意味着你需要同时看到两个图像。阅读cssanimations@RickardElim是的，我希望他们在javascript中进行淡入转换。再次谢谢@iota@RagingVids很乐意帮忙。你介意帮我看看这个吗：[链接]

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