Question

我有一个Javascript代码可以随机更改背景图像并且工作正常，但非常粗糙。我想在图像之间进行某种转换，我想使用fadeIn（慢）但不知道如何将它合并到我的代码中，有人可以帮助我吗？干杯！

JAVASCRIPT

window.onload = function () {
 // Array of Images
  var backgroundImg=["https://image1.com",
                    "https://image2.com",
                    "https://image3.com",
                    "https://image4.com"
                    ]

    setInterval(changeImage, 5000);
   function changeImage() {   
    var i = Math.floor((Math.random() * 3));

    document.getElementById("sectionAbout").style.backgroundImage = "url('"+backgroundImg[i]+"')";

  }
}

Answer 1

简单的解决方案是将过渡处理传递给您的浏览器，您应该关注的是背景变化。

假设我们想要为身体背景设置动画。

以下是使用颜色的工作示例，但也可以使用图片完成backgroundImage backgroundColor

＆＃13;

var arr = ['blue', 'red', 'pink', 'yellow', 'brown']
var i = 0;
document.getElementById('l').addEventListener('click', function() {

  document.body.style.backgroundColor = arr[i];
  i++
  if (i == arr.length)
    i = 0;
});

＆＃13;

body {
  transition: background ease 2s;
}

＆＃13;

<button id="l">OK</button>

＆＃13;

编辑：如果是图片，您可能希望避免因未加载图片而引起的生涩动画。

＆＃13;

var arr = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g", "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"];
var i = 1;
var img = new Image();

img.onload = function() {
  document.body.style.backgroundImage = 'url(' + img.src + ')';
  i++;
  if (i == arr.length)
    i = 0;
  setTimeout(function() {
    img.src = arr[i];
  }, 5000);
};

img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA";

＆＃13;

body {
  transition: background ease 2s;
}

＆＃13;

Answer 2

尝试使用https://greensock.com/gsap，它在转换和动画处理方面非常有效。许多专家将其用于有效的过渡或动画管理。

Answer 3

当您通过javascript更改backgroundImage时，图像会在脚本执行时加载，因此会出现明显的延迟。解决方案是在css中加载图像或通过js预加载。

在下面的解决方案中，我通过css添加了图像，因此没有滞后。因为Firefox不支持background-image的转换，所以脚本按照正确的顺序对图像进行z索引并淡化它们（在不透明度上使用css动画）。

HTML：

<div id="sectionAbout">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

的CSS：

#sectionAbout {
  height: 100vh;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}

.fadeIn {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.img:nth-of-type(1) {
  z-index: 1;
  background-image: url(http://picsum.photos/400/300?image=1);
}

etc..

JS：

var imgDivs = document.querySelectorAll(".img");

setInterval(changeImage, 2000);
var i = 0;

function changeImage() {
    i++;
  el = imgDivs[i%4];
  el.classList.remove("fadeIn");
  // force css animation restart
  // (https://css-tricks.com/restart-css-animation/)
  void el.offsetWidth;
  el.style.zIndex = i;
  el.classList.add("fadeIn"); 
}

有关工作示例，请参阅此处： https://jsfiddle.net/tfc0kyp3/3/

在这个多变的背景图片javascript中包含一个淡入淡出（慢）

3 个答案: