背景图片轮播
背景图片轮播
由于<img>标签不能实现固定高度的宽度不失真拉伸，采用CSS3background属性去实现! 如果是使用<img>的话，使用bootstrap的轮播器器！
1、全屏背景切换
<!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>实现炫酷的页面整个背景覆盖切换
自定义背景图片切换
html只有一个div
<div id="img-body">
<div id="img-background"></div>
</div>css样式
#img-body div {
width: 100%;
height: 650px;
position: relative;
min-width: 1000px;
background-image: url("../../../SchoolDesign/images/bg1.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-color: #515256 !important;
opacity:1 ;
transition: opacity 1s cubic-bezier(0, 0, 1, 1);
transition-delay: 300ms;
}JS
//背景轮播
// 定义图片路径 {num} 为 可变的图片序号
var bgImgUrl = '../../SchoolDesign/images/bg{num}.jpg', bgNum,
bgImgArr = [],
bgDiv = $('#img-background');
// 图片循环序号
for (var i = 1; i <= 2; i++) {
bgImgArr.push(bgImgUrl.replace('{num}', i));
console.log(bgImgArr);
}
setBGimg();
function setBGimg(d) {
if (!bgNum || bgNum >= bgImgArr.length) bgNum = 0;
// bgDiv.style.opacity = 0.1;
bgDiv.css('opacity', '0.01');
// bgDiv.fadeIn(1000);
setTimeout(function () {
// bgDiv.style.backgroundImage = 'url(' + bgImgArr[bgNum] + ')';
bgDiv.css('background', 'url(' + bgImgArr[bgNum] + ')');
bgNum++;
// bgDiv.style.opacity = 1;
bgDiv.css('opacity', '1');
}, 1000);
if (typeof d == 'undefined')
setInterval(function () {
setBGimg(true);
}, 6000);
// 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
}显示效果不如fade淡入淡出，肯定在transition的样式没有设置好！
其他示例
参考
Last updated