为网页添加动态背景 (背景轮播)
设置网页背景
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>全屏背景</title><script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script></head><body><script type="text/javascript">$.backstretch(‘http://api.asilu.com/cdn/img/bg/444.jpg‘);</script></body></html>
多张张图片切换
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>全屏背景切换</title><script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script></head><body><script type="text/javascript">$.backstretch([‘http://api.asilu.com/cdn/img/bg/444.jpg‘,‘http://api.asilu.com/cdn/img/bg/445.jpg‘,‘http://api.asilu.com/cdn/img/bg/446.jpg‘,‘http://api.asilu.com/cdn/img/bg/447.jpg‘,‘http://api.asilu.com/cdn/img/bg/448.jpg‘], {fade : 1000, // 动画时长duration : 2000 // 切换延时});</script></body></html> 上面这个版本切换效果用到了 jQuery 的动画，以下版本果断放弃 不需要 jQuery切换动画由CSS设置
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/><style>div#bg { ?position: fixed; ?top: 0; ?left: 0; ?height: 100%; ?width: 100%; ?z-index: -10; ?background-position: center 0; ?background-repeat: no-repeat; ?background-attachment: fixed; ?background-size: cover; ?-webkit-background-size: cover; ?-o-background-size: cover; ?zoom: 1; ??opacity:1; ?transition: opacity 1s linear; ?-moz-transition: opacity 1s linear; ?-webkit-transition: opacity 1s linear; ?-o-transition: opacity 1s linear;}</style><h1><a href="http://gouji.org/?post=317">代码出处</a></h1><div id="bg"></div><script>// 定义图片路径 {num} 为 可变的图片序号var bgImgUrl = ‘http://api.asilu.com/cdn/img/bg/{num}.jpg‘, bgNum, ???bgImgArr = [], ???bgDiv = document.getElementById("bg");// 组合数组 此处 200 为 图开始序号 结束 210for (var i=200; i <= 210; i++){ ???bgImgArr.push(bgImgUrl.replace(‘{num}‘, i));}setBGimg();function setBGimg(d){ ???if(!bgNum || bgNum >= bgImgArr.length) bgNum = 0; ???bgDiv.style.opacity = .001; ???setTimeout(function(){ ???????bgDiv.style.backgroundImage = ‘url(‘+ bgImgArr[bgNum] +‘)‘; ???????bgNum++; ???????bgDiv.style.opacity = 1; ???}, 1000); ???if(typeof d == ‘undefined‘) ???setInterval(function(){setBGimg(true);}, 6000); ???// 上一行的 6000 是背景图片自动切换时间(单位 毫秒)}</script>为网页添加动态背景 (背景轮播)
原文地址：http://www.cnblogs.com/yhaing/p/7852689.html