background使用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();        
});