MVC5+HTML5 背景輪播圖

參考文章：https://www.gouji.org/?post=317

使用css+js實現背景圖片輪播

廢話不多說，代碼：

<style>
    th {
        text-align: center;
    }
    #bd_main {
        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;
        /*background-image: url(../../Content/images/LoginBackground1.JPG) no-repeat center #eee;
        background-attachment: fixed;
        background-size: 100% 100%;
        width: 100%;
        height: auto;
        height: 620px;
        margin: auto;*/
    }
    #loginDialog1 {
        text-align: center;
        width: 600px;
        height: 250px;
        margin: 0 auto;
    }
</style>

<div id="bd_main">
    <div id="loginDialog1" style="background-color:brown">
    </div>
</div>
<script>
    var bgImgUrl = 'http://api.asilu.com/cdn/img/bg/{num}.jpg', bgNum,
        bgImgArr = [],
        bgDiv = document.getElementById("bd_main");
    // 組合數組 此處 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>

此代碼有點小瑕疵，父div裏設置了背景，當其進行輪播虛化的時候，子div裏的內容也會跟着虛化，達不到預期的效果。

解決方法：

子div寫在外面，用margin移動到想要的位置，把父div脫離文檔流，子div就會在父div裏面，但有不是一個div。

脫離文檔流是指將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

脫離文檔流方法：1、float；2、absolute；3、fixed。具體操作https://blog.csdn.net/thelostlamb/article/details/79581984

修改後代碼：

<style>
    th {
        text-align: center;
    }
    #bd_main {
        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;
        /*background-image: url(../../Content/images/LoginBackground1.JPG) no-repeat center #eee;
        background-attachment: fixed;
        background-size: 100% 100%;
        width: 100%;
        height: auto;
        height: 620px;
        margin: auto;*/
    }
    #loginDialog1 {
        text-align: center;
        width: 600px;
        height: 250px;
        margin: 0 auto;
    }
</style>

<div id="bd_main">
</div>
<div id="loginDialog1" style="background-color:brown">
</div>

<script>
    var bgImgUrl = 'http://api.asilu.com/cdn/img/bg/{num}.jpg', bgNum,
        bgImgArr = [],
        bgDiv = document.getElementById("bd_main");
    // 組合數組 此處 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>