Change div Background jquery

问题

I'm not sure what I'm doing wrong. I'm trying to get the background image of my div to change over time. I got the jQuery function from this site but its not working for me. Any clue what I'm doing wrong.

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%;
}

回答1:

Is your path to images correct in your JavaScript ? You have:

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

But in your CSS it's:

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

This suggests the images are in the same folder as the Javascript. Is that the case ? This isn't necessarily incorrect if your project is structured that way, but worth checking. I think in reality it probably is an error though, as it would need your Javascript to be in "images" folder too to work.

If your CSS and Javascript are all in the same HTML file, make the paths the same, i.e.

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

If you're not sure, try both with absolute paths ( e.g. '/images/wave_01.png') instead.

Also, not sure it it's just a typo or not, but the selector $('main') should definitely be $('.main') instead.

回答2:

Try this: Live Demo

HTML (No issues)

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

CSS

If you are using an empty div, the background won't show.

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

jQuery

Use $(document).ready. Use .main selector for class main. Make sure the path of image files in proper in the array.

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

回答3:

Your selector has a typo. You have 'main', but meant '.main'.

回答4:

Your selector for main is problem. You have to use .main for selecting element based on className

Try the below code.

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

来源：https://stackoverflow.com/questions/14680041/change-div-background-jquery

标签

jquery

html

background-image