背景淡入淡出过渡 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

我读到您有两个不同的问题需要解决。最大的问题是交叉淡入淡出问题。另一个问题是图像的性能和加载。由于这是一项学校作业，我认为分享使这项工作有效的确切代码并不是一个好主意，但我会给您一些指导，您可以使用它们来获得所需的结果。对于交叉淡入淡出，您需要有 2 个使用淡入淡出动画（CSS 不透明度）来创建效果的元素。一旦淡出的元素完全淡出，将图像源交换为新的图像源，然后将其淡入，同时另一个元素淡出并重复该过程。通过在用户不可见时更改图像的来源，您可能会获得更好的外观和感觉，因为图像将在显示给用户之前加载。为了获得高性能，请确保您使用的图像的文件大小尽可能小。作为参考，我会尽量将它们控制在 100kb 以下。您还可以考虑预加载图像，但这对于学校作业来说可能太过分了。希望这可以帮助。祝你好运。