时间戳

首页 > 解决方案 > 背景交叉淡入淡出过渡javascript和css

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

问题描述

我是 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();

标签： javascripthtmlcss

解决方案

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

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

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

希望这可以帮助。祝你好运。

推荐阅读