jsBin 演示 http://jsbin.com/fakosu/7/
I would do it using an absolute positioned DIV overlaying the body.
Fade in the DIV with a new image, then set the same image to body and hide the DIV like:
(GRAY is BODY, SOrange is DIV)
当前图像Array的增量是通过预增量来实现的++counter.
循环修复是通过使用实现的余数运算符%以防止计数器超过数组中图像的数量。
循环本身是在内部完成的.fadeTo()回调函数只需进行一次新的迭代loopBg()功能。
这是所需的 CSS：
*{margin:0;padding:0;} /* Global reset */
html, body{height:100%;width:100%;}
body, #bg{ background: #000 none 50% / cover; }
#bg{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}
还有 jQ：
var images = [
"bg0.jpg",
"bg1.jpg",
"bg2.jpg"
];
var $body = $("body"),
$bg = $("#bg"),
n = images.length,
c = 0; // Loop Counter
// Preload Array of images...
for(var i=0; i<n; i++){
var tImg = new Image();
tImg.src = images[i];
}
$body.css({backgroundImage : "url("+images[c]+")"});
(function loopBg(){
$bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){
$body.css({backgroundImage : "url("+images[c%n]+")"});
loopBg();
});
}());
Edit:如果您想保持背景变化但使内容可滚动，只需添加overflow:auto; to #page就像这个演示一样：http://jsbin.com/huzayruti/1/ http://jsbin.com/huzayiruti/1/
