jquery - 使用 jquery 更改背景图像

Question

我正在从此代码更改我的背景图片

jQuery(window).load(function(){
var images = ['blaa.jpg','sdsd.jpg'];
var i = 0;
setInterval(function(){

    jQuery('#absolute-c').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });
}, 3000);
})

如何.animate立即加载第一个背景。由于setInterval我的第一个背景也在 3 秒后显示

Answer 1

您可以为此创建一个函数并在 setInterval 中使用它：

jQuery(window).load(function(){
    var images = ['blaa.jpg','sdsd.jpg'];
    var i = 0;

    function changeBackground() {
        jQuery('#absolute-c').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);
});

我认为更好的另一种解决方案是使用setTimeout：

jQuery(window).load(function(){
    var images = ['blaa.jpg','sdsd.jpg'];
    var i = 0;
    var timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        jQuery('#absolute-c').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        // call the setTimeout every time to repeat the function
        timeoutVar = setTimeout(changeBackground, 3000);
    }

    // Call it on the first time and it will repeat
    changeBackground();        
});