javascript - 使用 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]。

为什么？

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

代码/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);
})