Javascript fadeIn更改背景图像jquery

我有以下代码：

<script>
    var images = [
      "images/achtergronden/bg1.png",
      "images/achtergronden/bg2.png",
      "images/achtergronden/bg3.png",
      "images/achtergronden/bg4.png"
    ]
  $(document).ready(function(){
    var i = 0;
    setInterval(function() {
          document.body.style.backgroundImage = "url(" + images[i] + ")";
          i = i + 1;
          if (i == images.length) {
            i =  0;
          }
    }, 5000);
   });
</script>

变量图像=[
“images/achtergronden/bg1.png”，
“images/achtergronden/bg2.png”，
“images/achtergronden/bg3.png”，
“images/achtergronden/bg4.png”
]
$（文档）.ready（函数（）{
var i=0；
setInterval（函数（）{
document.body.style.backgroundImage=“url”（“+images[i]+”）；
i=i+1；
if（i==images.length）{
i=0；
}
}, 5000);
});

---

现在我希望背景图像淡入淡出。这是可能的吗？

是的，这是可能的：-

var图像=[
"https://cdn.pixabay.com/photo/2018/06/23/16/22/romanesco-3493007_960_720.jpg",
"https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg",
"https://cdn.pixabay.com/photo/2012/08/27/14/19/evening-55067_960_720.png",
"https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513_960_720.jpg"
]
$（文档）.ready（函数（）{
var i=0；
setInterval（函数（）{
$（'#imageDiv'）。淡出（“慢”，
函数（）{
imageDiv.style.backgroundImage=“url（“+images[i]+””）；
i=i+1；
if（i==images.length）{
i=0；
}
$（'#imageDiv'）.fadeIn（“慢”）
});
},5000);
});
#imageDiv{宽度：500px；高度：300px；}
可能是您可以尝试以下方法：


$（文档）.ready（函数（）{
变量图像=[
"https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg?auto=compress&cs=tinysrgb&h=350",
"https://images.pexels.com/photos/46231/water-lilies-pink-water-lake-46231.jpeg?auto=compress&cs=tinysrgb&h=350"
]
image.forEach（函数（img）{
$（'.container'）。追加（''）；
});
var images=$（'.container>img'）；
images.first（）.addClass（'active'）；
setInterval（函数（）{
var current=images.filter（'.active'）；
current.removeClass（“活动”）；
var next=（current.next（）.length？current.next（）：images.eq（0））；
next.addClass（'active'）；
}, 5000);
});
.container>img{
不透明度：0；
位置：绝对位置；
-webkit转换：所有1s线性；
过渡：所有5s线性；
}
.container>img.active{
不透明度：1；
}