fadeOut() 函数与 setInterval

Question

我正在尝试创建图像之间的过渡效果但没有成功。

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

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

https://jsfiddle.net/vvwcfkfr/1/

这周我尝试了数千种使用淡入淡出的解决方案，但都没有成功。

我想创建一种过渡效果，例如 Ryanair 主页上的滑块。

有什么建议吗？谢谢

Answer 1

您可以使用 CSS 中的 transition: background-image 0.3s; 之类的东西来实现图像之间的淡入淡出，但它们的大小必须相同。否则也会有调整大小的动画。

Answer 2

jquery淡入淡出怎么样。 https://jsfiddle.net/vvwcfkfr/121/

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

fadeOut() 函数与 setInterval

fadeOut() function with setInterval

javascript

jquery

slideshow

transitions