更改div背景jquery

Question

我不确定我做错了什么。我试图让我的div的背景图像随着时间的推移而改变。我从这个网站获得了jQuery功能，但它不适用于我。我知道自己做错了什么。

的jQuery

$(window).load(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});

HTML

<div class="main"></div>

CSS

.main {
    background-image: url(../images/wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
}

Answer 1

试试这个：Live Demo

HTML （没有问题）

<div class="main" ></div>

<强> CSS

如果您使用的是空div，则不会显示背景。

.main {
    background-image: url(wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
    width:200px;
    height:200px;
}

<强>的jQuery

使用$(document).ready。使用.main选择器进行类main。确保数组中图像文件的路径正确。

$(document).ready(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('.main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});

Answer 2

您的选择器有拼写错误。你有'主'，但意思是'.main'。

Answer 3

你的主要选择器是问题。您必须使用.main来选择基于className的元素

请尝试以下代码。

$(window).load(function(){
     var images = ['wave_01.png','wave_02.png'];
    var i = 0;

    function changeBackground() {
    $('.main').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });
}
// Call it on the first time
changeBackground();
// Set an interval to continue
setInterval(changeBackground, 3000);
});

Answer 4

您在JavaScript中的图片路径是否正确？你有：

var images = ['wave_01.png', 'wave_02.png'];

但是在CSS中它是：

background-image: url(../images/wave_01.png);

这表明图像与Javascript位于同一文件夹中。是这样的吗？ 如果您的项目是以这种方式构建的，那么这不一定是错误的，但值得检查。我认为实际上它可能是一个错误，因为它需要你的Javascript才能在“images”文件夹中工作。

如果您的CSS和Javascript都在同一个HTML文件中，请使路径相同，即

var images = ['../images/wave_01.png', '../images/wave_02.png'];

如果您不确定，请尝试使用绝对路径（例如'/images/wave_01.png'）。

此外，不确定它只是一个拼写错误，但选择器$('main')肯定应该是$('.main')。