背景交叉淡入淡出过渡javascript和css

Question

我是 javascript 新手。我编写了一个简单的代码，在 javascript 中每 5 秒随机更改一次背景，但是，它看起来很可怕。
加载图片和过渡都很跳跃，看起来一点也不好看。当我用谷歌搜索这个问题时，所有代码看起来都超级复杂，我也不允许使用外部链接寻求帮助（这是一个学校项目）。

我想要在我的代码中实现交叉淡入淡出过渡，我看到人们使用 CSS 来实现，但为此，你必须添加每张图片，等等等等，我希望它可以重复使用，对我来说写一次就行了，如果我加多图就不用改了，希望大家理解，希望对大家有所帮助！！！ :)

代码：

function random_pic() {
  // image array
  var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];

  // execute code every 5 seconds
  window.setInterval(function() {
      // create a random number between 0 and 4
      var num = Math.floor(Math.random() * 4);
      // set the background to one of the images in the array
      document.body.style.backgroundImage = images[num];
    },
    5000);
}

random_pic();

Answer 1

我了解到您有两个不同的问题需要解决。 最大的问题是交叉淡化问题。另一个问题是图像的性能和加载。

由于这是一项学校作业，我认为分享能够完成这项工作的确切代码并不是一个好主意，但我会给你一些指导，你可以使用它们来获得所需的结果。

1. 对于交叉淡入淡出，您需要有 2 个元素使用淡入淡出动画（css 不透明度）来创建效果。
2. 一旦淡出的元素完全淡出，将图像源换成新的，然后淡入，同时另一个元素淡出并重复此过程。
3. 通过在图像对用户不可见时更改图像的来源，您可能会有更好的外观和感觉，因为图像会在显示给用户之前加载。
4. 要获得高性能，请确保您使用的图像的文件大小尽可能小。作为参考，我会尽量将它们保持在 100kb 以下。
5. 您也可以考虑预加载图像，但这对于学校作业来说可能有点过头了。

希望这会有所帮助。祝你好运。