Question

这是jsfiddle：http://jsfiddle.net/k57VE/1/

       $(document).ready(function(){

    var images = [ "http://i.imgur.com/X2G0MEL.jpg", "http://i.imgur.com/5XMcoCX.jpg", "http://i.imgur.com/CTFvvcf.jpg"];
    var currentImage = 0;

function changeBackground() {
    $( '#splash' ).css( { background-image: 'url(' + images[ ++currentImage ] + ')' } );
    if ( currentImage >= images.length - 1 ) {
        currentImage -= images.length;
    }
}

setInterval( changeBackground, 3000 );  
});

});

我试图让背景每3秒更换一次。我有设置来改变CSS，但我不知道我做错了什么。

Answer 1

查看您自己的小提琴链接时检查您的开发者控制台，您将找到

未捕获的SyntaxError：意外的令牌 -

.css({ background-image: ...是语法错误。您需要引用属性名称，因为文字属性名称不能包含连字符。

$('#splash').css({ "background-image": 'url(' + images[++currentImage] + ')' });

您的代码末尾还有一个额外的})，这是另一种语法错误。

Answer 2

以下是您尝试做的事情的略微修改示例。

http://jsfiddle.net/d3YxK/

 function changeBackground() {

    if ( currentImage >= images.length ) {
        currentImage = 0;
    }
    $( '#splash' ).css('background-image','url(' + images[ currentImage ] + ')');
    ++currentImage;
 }

Answer 3

您无法使用background-image作为标识符。您可以将其设为字符串，或使用backgroundImge：

$( '#splash' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );

另外，最后你有]);太多了。另外，从ready事件中运行load事件毫无意义，因为ready事件发生在load事件之前。

演示：http://jsfiddle.net/Guffa/k57VE/4/

希望背景每3秒更换一次

3 个答案: