JavaScript 动态改变 CSS 背景样式

Question

我正在尝试通过不断循环图像路径数组来动态更改我的背景图像。如果我将输出记录到控制台，代码就可以工作，但我无法让图像实际发生变化。

原始 CSS:(我正在覆盖另一个 CSS 文件的默认样式)

<style>
      .jumbotron { 
         background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
      }
</style>

JavaScript:

$(document).ready(function () {

var count = -1;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
setInterval(swap, 5000);

function swap(){
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important");
    console.log(images[++count % images.length]);
}

});

有什么想法吗？

Answer 1

你的交换函数看起来有点奇怪。通常对于这样的事情，你可以有一个递增的计数器，然后重置为 0 并重新开始。还要确保您在 onload 事件处理程序上下文中运行。

var count = 0;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");

function swap(){
    //get the next image
    var nextImage = images[count];
    console.log(nextImage);

    $('.jumbotron').css("background-image", nextImage);

    //increment count
    count = count > images.length - 1 ? 0 : count+=1;
}

$(document).ready(function(){
  setInterval(swap, 5000);
});

除此之外，请务必检查您的错误控制台是否有错误，以及 404 指示您可能有错误的图像路径