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/

本周我用fadeIn，fadeOut尝试了数千个解决方案，但没有任何成功。

我希望像瑞安航空公司主页上的滑块一样创建过渡效果。

有什么建议吗？感谢。

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

2 个答案: