使用 javascript 更改计时器上的"background-image:"不起作用

Question

我想知道你是否介意看一下下面的代码，告诉我哪里出了问题。我对javascript几乎一无所知，但我能够编写一些应该做我想做的事情的代码。我有一个div ID，用于制作全屏图像背景。我想每5000毫秒更改一次使用的图像。这是javascript：

<script type="text/javascript">
      $(window).load(function() {          
          var i =0;
          var images = ['cover1.jpg','cover2.jpg'];
          var image = $('.cover_image');
          image.css('background-image', 'url(/img/cover1.jpg)');
          setInterval(function(){  
              image.fadeOut(1000, function () {
                  image.css('background-image', 'url(' + images [i++] +')');
                  image.fadeIn(1000);
              });
              if(i == images.length)
              i = 0;
          }, 5000);           
      });
</script>

下面是正在使用的CSS：

.cover_image {
background-repeat: no-repeat;
background-image: url("/img/cover1.jpg");
background-position: bottom center;
background-size: cover;
z-index: -3;
position: relative;
}

这是HTML:

<div class="slide cover_image"></div>

Answer 1

当您使用JQuery时，这里有两个问题，并且您的"循环

JQuery加载

JQuery并不总是与Javascript同时加载。因此，试图检测Javascript何时加载以使用JQuery可能会让您使用Javascript代码，一旦您运行一些JQuery选择器，它就会崩溃。然后燃烧。所以不要那样做。

为什么

大多数现代浏览器都会同时原谅许多Javascript文件。这意味着JQuery在文档准备就绪时启动，并且您的代码尝试使用未初始化的JQuery库。这意味着你使用了一些不存在的东西。这就像试图读取的末尾

如果你的唯一目标是读那句话的结尾，你也会崩溃的。

零索引数组

此外，我对循环的工作方式进行了更改，因为它有点坏了。Javascript有0个索引数组，因此尝试获取具有2个元素的数组的.length将返回2，但元素位于[0]和[1]。

为什么

这主要是因为计算机可以在零开始计数，所以在过去，浪费一点（字面上）是没有意义的，而且做算术也需要更多的处理器，所以从零开始是有意义的。我们可以像Lua那样切换到1索引数组，但在计算机上从零开始仍然有点友好，而且许多程序员已经习惯了，改变这样的方面会破坏旧程序。

代码/TL；DR

$(function(){  
    var i =0;
    var images = ['cover1.jpg','cover2.jpg'];
    var image = $('.cover_image');
    image.css('background-image', 'url(/img/cover1.jpg)');
    setInterval(function(){  
        image.fadeOut(1000, function () {
            image.css('background-image', 'url(' + images[i] +')');
            image.fadeIn(1000);
        });
        if(i == (images.length - 1)){
            i = 0; 
        } else {
            i++;
        }
    }, 5000);
})

Answer 2

Bootstrap有一个"carousel"类，看起来很棒，而且不需要大量的JS即可工作。如果你不知道Bootstrap是什么，我建议你查一下，因为我几乎在所有的网页上都使用它。下面是一个转盘示例的链接：http://www.w3schools.com/bootstrap/bootstrap_carousel.asp