Question

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

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

我目前的代码是：

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;
    }

我对编码很陌生，所以非常感谢任何帮助，提前谢谢！

Answer 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">

Answer 2

@JamesDouglas回答了你的第一个问题。但是关于你的第二个问题，在你的JS中，你已经将幻灯片更改时间设置为＆＃34; 5000＆＃34;毫秒，这就是幻灯片需要多长时间才能改变的原因。将其更改为1000毫秒，幻灯片将比以前更快地更改。希望这可以帮助。

setInterval(nextBackground, 1000);

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

2 个答案: