Javascript 具有setInterval的fadeOut（）函数

我试图在图像之间创建过渡效果，但没有成功

我使用的代码运行良好，不幸的是图像更改没有任何效果

    var images = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

var imageHead = document.getElementById("image-head");
var i = 0;

setInterval(function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}, 1000);

本周我用fadeIn，fadeOut尝试了上千种解决方案，但都没有成功

我希望创建一个过渡效果，就像瑞安航空主页上的滑块一样

---

有什么建议吗？谢谢。

您可以使用类似于

过渡：背景图像0.3s可以实现图像之间的淡入淡出，但它们的大小必须相同。否则还会出现调整大小的动画。
jquery淡入淡出如何

代码中与淡入淡出相关的部分在哪里？您认为代码中的哪一部分现在应该产生“效果”？代码中没有任何部分可以重现淡入淡出效果。我正在寻找任何一段代码，重现瑞安航空网站的效果。有什么建议吗？这正是我想要的。非常感谢布莱恩。不幸的是，获得的效果有点“丑陋”，我怎样才能获得像瑞安航空网站那样的效果？
setInterval(function() {
      $('#image-head').fadeOut("slow",
        function() {
          imageHead.style.backgroundImage = "url(" + images[i] + ")";
          i = i + 1;
          if (i == images.length) {
            i = 0;
          }
          $('#image-head').fadeIn("slow")
         }
        );

      }, 2000);