为网页添加动态背景 (背景轮播)
以前文章 最近发现一个插件所以重新更新下本文
插件名称: jquery.backstretch.js
下面是 示例代码:
设置网页背景
<!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>2014-11-14 写的原文
看到别人的网站都有背景 自己也高了一下，但是苦于没有适合的 背景图片，所以就没有添加
现在拿出来共享一下该代码实现了， 背景图片的切换，带有切换效果的
第一个版本 切换效果用到了
jQuery 的动画，这个版本果断放弃 不需要 jQuery切换动画由CSS设置具体代码如下
CSS 样式
JS 代码
HTML 就一个
div#bg简单实用<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 为 图开始序号 结束 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>
代码转载注明出处 (全靠素质)
本文出自简爱博客，转载时请注明出处及相应链接。
可以查询手机归属地
评论
双击评论666
请问如何改背景图片
贫僧东土大唐而来,前往西天求取真精,途径贵宝地,风水尚佳,故留此脚印.望名垂千古 face_36
添加好了，效果实现但是图片切换之间会有一秒空白
我要感动哭了T-T,你就是我心目中的神，这段代码救命了啊啊啊
不错，有地址吗？
求jq插件。
我用了第二个多图实例，把JS下载到本地加载后。图片不显示了。
@jxpzm：刚才设置了下， 完全没问题
请问JS中图片循环轮播该怎么写呢
确实轻巧好用，必须赞一个
发表评论