jquery - 循环更改背景图像

Question

我想使用jQueryonclick 更改页面的背景图像如下所示：

var colors = ['blue', 'green', 'yellow', 'black'];
$('#click').click(function(){
    $('body').css('background', colors[1]);
})

但我想使用一些简短的'jQuery`函数自动更改它，到目前为止我的尝试是这样的：

var colors = ['blue', 'green', 'yellow', 'black'];

$.each(colors, function(color){
    setTimeout(function(){$('body').css('background', color)}, 1000);
});

但它不起作用，任何帮助将不胜感激

Answer 1

你可以这样做 ：

var colors = ['blue', 'green', 'yellow', 'black'];

$.each(colors, function(i, color){
    setTimeout(function(){$('body').css('background', color)}, (i+1)*1000);
});

我做了两个改变：

• 给回调的第一个参数是索引，而不是数组的元素
• 我使用索引给出不同的延迟来计算延迟

Answer 2

尝试

var colors = ['blue', 'green', 'yellow', 'black'],
    colorIndex = 0,
    $body = $('body');

setInterval(function(){ $body.css('background', colors[colorIndex++ % colors.length])}, 1000);

演示在http://jsfiddle.net/gaby/8uZga/