背景图片轮播

由于<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;
}

//背景轮播
// 定义图片路径 {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 是背景图片自动切换时间(单位 毫秒)
}