网页背景图片的淡入淡出效果
主要用到了数组、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="width:100%; background: url(images/bg.jpg);"> 35 </div> 36 </body> 37 </html>
