在jQuery中使用淡入淡出效果更改身体背景图像

重新更新UPDATE：

甚至是更新的小提琴（没有arguments.callee）

变化：

• Javascript改进
• CSS更正（现在适合整页）
• 为图像的随机顺序而不是顺序添加了选项
• => NEWER Fiddle的替代版本<=（如果OP的img服务器关闭）

大更新

从以前的答案中获得了这段代码的精髓，并添加了一些亮点（使用我的网站背景藏匿的笑声）

Javascript：

$(document).ready(function () {    var img_array = [1, 2, 3, 4, 5],        newIndex = 0,        index = 0,        interval = 5000;    (function changeBg() {        //  --------------------------        //  For random image rotation:        //  -------------------------- //  newIndex = Math.floor(Math.random() * 10) % img_array.length; //  index = (newIndex === index) ? newIndex -1 : newIndex;        //  ------------------------------        //  For sequential image rotation:        //  ------------------------------ index = (index + 1) % img_array.length;        $('body').css('backgroundImage', function () { $('#fullPage').animate({     backgroundColor: 'transparent' }, 1000, function () {     setTimeout(function () {         $('#fullPage').animate({  backgroundColor: 'rgb(255,255,255)'         }, 1000);     }, 3000); }); return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';        });        setTimeout(changeBg, interval);    })();});

CSS：

body {    height: 100%;    width: 100%;    margin: 0;    padding: 0;    position: relative;    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);    background-size: cover;    background-repeat: no-repeat;    background-position: 0 0;    background-attachment: fixed;}#fullPage {    position: absolute;    min-width: 100%;    min-height: 100%;    top: 0;    left: 0;    background-color: rgb(255, 255, 255);}