使用动画创建动态变化的背景图像答案

【问题标题】：Create dynamically changing background images with animation使用动画创建动态变化的背景图像
【发布时间】：2017-06-05 17:14:27
【问题描述】：

我正在尝试创建一个背景图像，该图像每隔几秒钟就会通过动画改变一次，以便下一个图像在另一个图像滑出的同时从右侧滑入。

目前我有一个没有动画的代码；它工作正常，但是图像需要很长时间才能加载。这仅仅是因为我的图像文件太大了吗？有没有办法让它们加载得更快？

我当前的代码是：

HTML：

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

    $(document).ready(function(){
    var header = $('body');

    var backgrounds = new Array(
        'url(DSC_0007.jpg)'
      , 'url(DSC_01110.jpg)'
      , 'url(DSC_0277.jpg)'
      , 'url(DSC_0050.jpg)'
    );

    var current = 0;

    function nextBackground() {
        current++;
        current = current % backgrounds.length;
        header.css('background-image', backgrounds[current]);
    }
    setInterval(nextBackground, 5000);

    header.css('background-image', backgrounds[0]);
    });
    </script>

CSS：

    body{
      background: url(DSC_0007.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

我对编码非常陌生，因此非常感谢任何帮助，在此先感谢！

【问题讨论】：

标签： html css animation background background-image

【解决方案1】：

您可以使用 CSS animation。

img#bg1 {
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  animation: background1 60s ease 0s infinite;
}
img#bg2 {
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  animation: background2 60s ease 0s infinite;
  margin-left: -100%;
}
img#bg3 {
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  animation: background3 60s ease 0s infinite;
  margin-left: -100%;
}
img#bg4 {
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  animation: background4 60s ease 0s infinite;
  margin-left: -100%;
}
@keyframes background1 {
  0% { margin-left: -0%; }
  20% { margin-left: -0%; }
  25% { margin-left: 100%; }
  26% { margin-left: -100%; }
  95% { margin-left: -100%; z-index: 1; }
  100% { margin-left: -0%; z-index: 1; }
}
@keyframes background2 {
  0% { margin-left: -100%; }
  20% { margin-left: -100%; }
  25% { margin-left: -0%; }
  45% { margin-left: -0%; }
  50% { margin-left: 100%; }
  100% { margin-left: -0%; }
}
@keyframes background3 {
  0% { margin-left: -100%; }
  45% { margin-left: -100%; }
  50% { margin-left: -0%; }
  70% { margin-left: -0%; }
  75% { margin-left: 100%; }
  100% { margin-left: -0%; }
}
@keyframes background4 {
  0% { margin-left: -100%; }
  70% { margin-left: -100%; }
  75% { margin-left: -0%; }
  95% { margin-left: -0%; }
  100% { margin-left: 100%; }
}

<img id="bg1" src="http://download-wallpaper.net/images/nature-background/nature-background-24.jpg">
<img id="bg2" src="http://wallpapercave.com/wp/pwQMS6f.jpg">
<img id="bg3" src="http://all4desktop.com/data_images/original/4236532-background-images.jpg">
<img id="bg4" src="http://wallpaper-gallery.net/images/background-desktop-wallpaper-hd/background-desktop-wallpaper-hd-9.jpg">

【讨论】：

图片不会按照提问者的意愿滑入或滑出。它只出现在屏幕上。
@AMH 好的，我会解决的
@SHayward 我的答案怎么样？
@JamesDouglas 看起来很棒，但是在新图像滑入的同时，我希望旧图像滑出。这可能吗？
@SHayward 是的。我已经更新了我的答案。如果您对我的回答感到满意，请记得将其标记为已接受！

【解决方案2】：

@JamesDouglas 已回答您的第一个问题。但是关于您的第二个问题，在您的 JS 中，您已将幻灯片更改时间设置为“5000”毫秒，这就是幻灯片需要很长时间才能更改的原因。将其更改为 1000 毫秒，幻灯片将比以前更改得更快。希望这可以帮助。

setInterval(nextBackground, 1000);

【讨论】：

我对动画的长度很满意；问题是图像需要一段时间才能实际加载到屏幕上，因此在图像出现之前它是空白的一两秒钟。我不确定这是否只是因为图像的分辨率很高？
我没有看到代码有任何问题，所以它可能是图像的大小。只是为了确保您可以简单地压缩图像而不会损失这里的质量：compressjpeg.com 或者您可以尝试不同的图像。希望这有助于@SHayward :)