为网页添加动态背景 (背景轮播)
设置网页背景
<!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%; 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 为 图开始序号 结束 210 for (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>