jQuery实现网页背景自动淡出切换

在设计自己的个人主页时，想要一个背景图片自动切换的效果，但是单纯修改url的效果太丑了，希望简单设计一个淡入淡出的特效，百度出来的办法都不太好用，于是自己动手写了一个，仅供参考~

demo如下：

• jQuery实现背景淡入切换

主要设计思想：

用两个div层叠，让上面的box1在淡出时，修改下面box2的url切换图片，避免淡出时背景留白，最后修改box1的url。

html：

css这里就不给出了，让两个盒子层叠，设置层级，我这里的是box1在上，box2在下，不清楚的可以看一下源码。

js设置定时实现自动轮播，再通过设置动画和css实现切换背景图。

var $box1 = $("#box1");
var $box2 = $("#box2");
var index = 1;
setInterval(fn,5000);
function fn() {
    index++; 
    if(index>3){
        index = 1;
    }
    $box1.animate({opacity:0},700,function() {
        $box1.css({"background-image":"url(./images/"+index+".jpg)",opacity:1});
    });
    $box2.css("background-image","url(./images/"+index+".jpg)");
}

这个要注意两点：

1. 对于css() 语句，并不会等动画结束后再执行，而是一开始就直接执行。要想使动画结束后再执行css()语句，需要使用回调函数。
2. 这里先将底层图片切换，然后让顶层的逐渐淡出，最后再修改顶层的图片，如此循环。

---

关于

demo代码参见：

• demo源码