用純css實現這款banner切換，在摒棄了定時器效果下，加上滾動視差感堪稱完美。
效果預覽

先來剖析：
什麼是視差滾動？
視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。
視差滾動的結構可以分成：背景層、內容層和懸浮層(貼圖層)。懸浮層和背景層可為多層，能實現更為細膩的視差感，為了結構清晰，我們當前效果是各為一層。
瞭解了視差，新的問題迎面而來：
如何脫離js有效的去控制圖片切換及背景動畫？
在無任何js下能夠傳遞狀態的首先就能想到表單元素：，可以使用:checked選擇器選擇被選中的 元素。想清楚了這一點就開始動手搭建結構，畢竟很多時候思路比程式碼重要。
先放上完整結構程式碼：

        <div class="vie_main">
            <input type="radio" name="i" class="page_1" id="p_1"  checked="checked"/>
            <input type="radio" name="i" class="page_2" id="p_2" />
            <input type="radio" name="i" class="page_3" id="p_3" />
            <label for
 
="p_1" class="btn_b1"></label> 
            <label for="p_2" class="btn_b2"></label>
            <label for="p_3" class="btn_b3"></label>
            <div class="vie_list">
                <div class="vie_bg"></div>
                <ul>
                    <li>
                        <img src="images/bn1.png"
 
 class="banner1"/>
                        <img src="images/bn1-1.png" class="bn bnbg1"/>
                    </li>
                    <li>
                        <img src="images/bn2.png" class="banner2"/>
                        <img src="images/bn2-2.png" class="bn bnbg2"/>
                    </li>
                    <li>
                        <img src="images/bn3.png" class="banner3" />
                        <img src="images/bn3-3.png" class="bn bnbg3"/>
                    </li>
                </ul>
            </div>
        </div>

接下來繼續分析控制按鈕

            <input type="radio" name="i" class="page_1" id="p_1"  checked="checked"/>
            <input type="radio" name="i" class="page_2" id="p_2" />
            <input type="radio" name="i" class="page_3" id="p_3" />
            <label for="p_1" class="btn_b1"></label> 
            <label for="p_2" class="btn_b2"></label>
            <label for="p_3" class="btn_b3"></label>

label標籤下的 for 屬性命名和一個目標表單 id相同，這樣利用顯式形式繫結input標籤，從而控制input。這一塊完成後，控制滾動和背景通過css就能輕易實現了。
完整的Css佈局樣式

body,p,ul,li,ol,h1,h2,h3,h4,h5,h6,dl,dt,dd,form,iframe{margin:0;padding:0;}
ul,li,ol{list-style:none outside none;}

.vie_main{height: 650px; width: 100%;position: relative;}
.vie_main input{display: none;}
.vie_list{height: 100%; overflow: hidden;}
.vie_bg{width:100%;height:100%;background:url(../images/bg.jpg) no-repeat center center; position: absolute; top: 0; left: 0;overflow: hidden;}
.vie_list ul{position: relative; top: 0; height: 100%; -webkit-transition:top 1s ease-in;-moz-transition:top 1s ease-in;-ms-transition:top 1s ease-in;transition:top 1s ease-in;}
.vie_list ul li{ height:100%;opacity: 0; text-align: center;position: relative;}
.vie_list ul li>img{margin-top: -10px;}
.vie_list ul li .bn{margin-top:0;opacity:1;position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.vie_list ul li p{font-size: 40px;}
.vie_main label{display:none;width: 60px; height: 60px;border-radius: 60px;background:#E0371E url(../images/up.png) no-repeat center center;position: absolute;z-index: 2;top: 34%; right: 20%;opacity: 0.3;cursor: pointer;}
.vie_main label:hover{opacity: 0.6;}

通過這些css把佈局調整好，值得注意的是我們使用position屬性實現覆蓋效果，不要忘記調整z-index調整堆疊順序。
z-index值可以控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序，值大的元素髮生重疊時會在值小的元素上面。

/*btn*/
.page_1:checked ~ .btn_b2,
.page_2:checked ~ .btn_b3{background-image: url(../images/down.png);display: block; top: 48%;}
.page_2:checked ~ .btn_b1,
.page_3:checked ~ .btn_b2{background-image: url(../images/up.png);display: block;}
.page_1:checked ~ .vie_list ul li:first-child,
.page_2:checked ~ .vie_list ul li:nth-child(2),
.page_3:checked ~ .vie_list ul li:nth-child(3){opacity: 1;}
/*滾動 top*/
.page_1:checked ~ .vie_list ul{top:0;}
.page_2:checked ~ .vie_list ul{top:-100%}
.page_3:checked ~ .vie_list ul{top:-200%}
/*banner切換過渡*/
.page_1:checked ~ .vie_list ul .banner1,
.page_2:checked ~ .vie_list ul .banner2,
.page_3:checked ~ .vie_list ul .banner3{margin-top:82px;-webkit-transition: margin-top 1s linear 1s;-moz-transition: margin-top 1s linear 1s;-ms-transition: margin-top 1s linear 1s; transition: margin-top 1s linear 1s;}
/*bg position*/
.vie_main input:checked ~.vie_list .vie_bg{
    -webkit-transition: background-position 1.5s linear;
    -moz-transition: background-position 1.5s linear;
    -ms-transition: background-position 1.5s linear;
    transition:background-position 1.5s linear}
.page_1:checked ~ .vie_list .vie_bg{background-position:center 0;}
.page_2:checked ~ .vie_list .vie_bg{background-position:center -120px;}
.page_3:checked ~ .vie_list .vie_bg{background-position:center -240px;}

這一塊的元素選擇都使用了css3.0裡新增的選擇器“~”
可以說“~”選擇器才是我們整個效果實現的靈魂，能夠精準有效的選擇到非相鄰的兄弟元素。有效的解決了css選擇器不能靈活選擇兄弟元素的尷尬。

各主流瀏覽器相容，可以放心使用，在這裡用“~”關聯控制了圖片切換和背景，再加上同樣css3.0新增的transition屬性做過渡動畫即可完美實現圖片切換以及背景緩動形成的視差效果。

本文純屬學習交流，部分圖片來源網路，如有侵犯請及時與本人聯絡
火星時代教育 追追