网页背景图片的淡入淡出效果

主要用到了数组、setInterval定时器、fadeIn()和fadeOut()方法。
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>网页背景图片的淡入淡出效果</title>
 5     <!--下面的jquery-1.4.1.js文件为Jquery的函数库引用-->
 6     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         var imgIndex = 1;
 9         var imgArray = new Array("bg.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg");//数组元素个数可调
10         $(function () {
11             //当页面加载完毕后，给Id为bgImg的Div设定高度为浏览器窗体的当前高度
12             $("#bgImg").css({ "height": $(window).height() + "px" });
13             //定义一个定时器，每隔4000毫秒执行一下rollImg函数
14             setInterval(rollImg, 4000);
15         });
16 
17         //切换背景图片的函数
18         function rollImg() {
19             //如果图片的Index大于数组的长度-1，则重新初始化下标为0
20             if (imgIndex > imgArray.length - 1) {
21                 imgIndex = 0;
22             }
23             //先将Id为bgImg的Div隐藏，隐藏的间隔为900毫秒（可调），完全隐藏后执行回调函数也就是900后面function里面的方法
24             $("#bgImg").fadeOut(900, function () {
25                     $("#bgImg").css("background", "url(images/"+imgArray[imgIndex]+")");
26                     imgIndex ++;
27             });
28             //改变Div的background图片后，在调用fadeIn函数将Div显示，显示的间隔为900毫秒（可调）。
29             $("#bgImg").fadeIn(900);
30         }
31     </script>
32 </head>
33 <body style=" margin:0;">
34     <div id="bgImg" style="100%; background: url(images/bg.jpg);">
35     </div>
36 </body>
37 </html>