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指示您可能有错误的图像路径

Answer 2

试试这个：

$(document).load(function() {
    var count = -1;
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
    setInterval(swap, 5000);

    function swap() {
        var img = images[++count % images.length];

        $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important');
        console.log(img);
    }
});

Answer 3

等待文档加载：

$(document).load(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 4

我认为改变css不是一个好主意，你可以定义一些类，并动态地改变元素上的类！

HTML：

<div class="dynamicBg class1"></div>
<div class="dynamicBg class1"></div>

的CSS：

.dynamicBg {
    background-color: #7da7d8;
    background-repeat: no-repeat;
    background-position: center center;
}
.class1 {
    background-image: url('images/image1.jpg');
}
.class2 {
    background-image: url('images/rotunda2.jpg');
}
.class3 {
    background-image: url('images/rotunda3.jpg');
}
.class4 {
    background-image: url('images/rotunda4.jpg');
}

JS：

$(function() {
    var classStr = 'class1 class2 class3 class4',
        classArr = classStr.split(' '), i = 0,
        $dynamicBg = $('.dynamicBg');
    setInterval(function() {
        i = i > 3 ? 0 : i + 1;
        $dynamicBg.removeClass(classStr).addClass(classArr[i]);
    }, 5000);
});

JavaScript动态更改CSS背景样式

4 个答案: