改变“背景图像：”。使用javascript不工作的计时器 [英] Changing "background-image:" on a timer using javascript not working

问题描述

我想知道，如果你会介意看看下面的代码，告诉我在哪里我会错了。我知道javascript没有什么，但我能够一些代码，应该做我想要的。我有一个div ID使全屏图像背景。我想改变每5000毫秒使用什么图像。这里是javascript：

I was wondering if you would mind taking a look at the following code and tell me where I'm going wrong. I know close to nothing about javascript but I was able to some code that is supposed to do what I want. I've got a div ID makes a fullscreen image background. I want to change out what image is used every 5000 milliseconds. Here's the 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>

推荐答案

和您的循环

同时作为Javascript。所以试图检测当Javascript加载使用JQuery可能会让你使用Javascript代码，一旦你运行一些JQuery选择器，它会崩溃。烧伤。

JQuery isn't always loaded at the same time as Javascript. So trying to detect when Javascript is loaded to use JQuery might let you use Javascript code, as soon as you run some JQuery selectors, it'll crash. And burn. So don't do that.

大多数现代浏览器一次可以使用许多Javascript文件。这意味着当文档准备就绪时，JQuery启动，并且您的代码尝试使用未初始化的JQuery库。这意味着你使用的东西不在那里。

Most modern browsers excuse many Javascript files at once. This means JQuery starts when the document is ready, and your code tries to use the uninitialized JQuery library. This means you use something that's not there. It's like trying to read the end of th

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

If your only objective was to read the end of that sentence, you would crash, too.

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

Also, I made a change to the way your loop works, because it was somewhat broken. Javascript has 0-indexed arrays, so trying to get the .length of an array with 2 elements will return 2, but the elements are at [0] and [1].

这主要是因为计算机可以开始计数为零，所以在过去的日子里，并且它也需要更多的处理器密集的算术，所以从零开始有意义。我们可以切换到像索引的数组，如 Lua ，但在计算机上仍然有点友好，从零开始，许多程序员习惯了，改变这样的方面会破坏旧程序。

It was mainly because computers could started counting at zero, so in the old days, it made no sense to waste a bit (literally), and it was also much more processor intensive to do arithmetic, so starting at zero made sense. We could switch to 1-indexed arrays, like Lua does, but it's still a bit friendlier on computers to start at zero, plus many programmers were used to it, and changing an aspect like that will break older programs.

$(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);
})

这篇关于改变“背景图像：”。使用javascript不工作的计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！