前端重要組件--輪播圖的詳細教程（層級輪播圖和水平輪播圖）（極其詳細，建議收藏）

最近前端學習中遇到了網頁中一個極爲重要的組件，輪播圖，並且嘗試用代碼做了兩種類型的輪播圖，其一層級輪播圖，是純html+css3，和少量js，其二，水平輪播圖，這個也是最常見的輪播圖，用到了js的部分知識，定時器什麼的，主要用了jquery實現。

層級輪播圖

1，首先製作輪播圖的一般步驟是先搞一個div盒子裝輪播圖，div裏面是一個無序列表，列表中的li就是一張張圖片，接着和ul列表同級，並且是div的子元素，放兩個按鈕button，用來控制輪播圖前後，html基本就是這樣子滴。
首先輪播圖嘛，就是會自己朝一個地方移動，用戶鼠標放上去還要考慮輪播停止，用戶點擊按鈕要能切換圖片，最後要防止用戶老爺們瘋狂點擊帶來的bug，設置一個點擊時間限制，讓用戶在三分之一秒之內只能點一次，這個時間段的其他點擊全部忽略。
2，然後是css部分，層級輪播圖的原理就是讓li裏面的圖片開啓絕對定位，讓圖片們浮動起來，重疊在一起，那麼重疊在一起了怎麼讓它輪播呢？這主要是運用一個z-index屬性設置圖片的垂直優先級，這個值越大圖片就在上層，就可以讓你想要的圖片浮現出來了，最好再設置一個transition爲0.3s，透明度調一調，讓浮現更加立體
3，js的部分主要是響應按鈕點擊事件，其實還有輪播圖的自動輪播效果需要用到js的定時器，但是這裏暫且不提，在下面的水平輪播圖中我會細講，這裏主要是熟悉輪播原理。按鈕點擊事件就是給下一張圖片增加一個active類，類裏面設置他的z-index值讓他浮現在最上層，並且最好設置一下透明度，讓變化更加自然。就是簡單的將圖片的除了最上層的那張，其他圖片初始設置爲透明度0，就是完全透明，然後輪到下面的圖片出現時，增加z-index屬性，並且透明度爲1，最好transition設置一下時間，讓變化更自然。

水平輪播圖

水平輪播圖是市面上最常見的輪播圖沒有之一。所以這玩意挺重要，下面細細講。
1，第一步，html代碼和上面層級輪播圖介紹的雷同。

<div id="first">
			<a href="javascript:;" class="left" >&lt;</a>
			<a href="javascript:;" class="right" >&gt;</a>
			<ul class="list">
				<li class="">
					<img src="0.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="1.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="2.jpg" alt="pic" class="loop"/>
				</li>
				<li class="">
					<img src="3.jpg" alt="pic" class="loop"/>
				</li>
			</ul>
</div>

2，設置css代碼，設置基本樣式，消除一些默認樣式

		*{
			    margin: 0;
			    padding: 0;
			}
			ul{
			    list-style: none;
			}
			a:link,a:visited,a:hover,a:active{
			    text-decoration: none;
			}

（2.1） 設置loop類，就是圖片的類，主要讓圖片適應大小

.loop{
			    padding: 0;
			    max-width: 100%;
}

（2.2）設置顯示框，輪播圖的顯示口，超出它範圍的都隱藏，別忘了開啓定位，子絕父相

#first{
			    position: relative;
			    overflow: hidden;
			    height:352px;
			    width:1380px;
			    margin:0 auto;
			    background: black;
			}

3，相當關鍵的一步，這裏是水平輪播圖的精髓，讓li中的圖片設置爲inline-block，讓圖片在全部一層上，要做到這一點必須設置好它的父元素也就是ul的長度，我這裏有4張圖片，每張圖片1380px，正常來說ul的寬應該是1380*4，可是這裏設置成8280px，剛好多了兩張圖片，也就是ul中其實有6張圖片，並且left設置爲-1380px，就是從這六張圖片的第二張開始播放。我這裏先說好，本來是4張圖片沒錯，可後來通過js將4張圖片的最後一張複製了一下插到了第一個位置，將4張圖片的第一張的複製插入到了最後面，如果原來圖片的次序是1，2，3，4的話，接下來經過js處理，就變成了4，1，2，3，4，1，至於爲什麼這麼做，就是後面的內容，這裏先交代一下，主要是爲了輪播切換效果更加合理。。

.list{
			    position:absolute;
			    top: 0;
			    left: -1380px;
			    width:8280px;
			    font-size: 0;
			}
			.list li{
			    width: 1380px;
			    display: inline-block;
			}

4,設置按鈕鏈接的樣式

.left{
			    position: absolute;
			    left: 0;
			    top: 120px;
			    display: none;
			    z-index: 10;
			    border: 1px solid rgba(60,60,60,.8);
			    border-radius: 40px;
			    background: rgba(40,40,40,.8);
			    width: 60px;
			    height: 60px;
			    text-align: center;
			    line-height: 60px;
			    transition: 0.3s;
			}
			.right{
			    position: absolute;
			    right: 0;
			    top: 120px;
			    display: none;
			    z-index: 10;
			    border: 1px solid rgba(60,60,60,.8);
			    border-radius: 40px;
			    background: rgba(40,40,40,.8);
			    width: 60px;
			    height: 60px;
			    text-align: center;
			    line-height: 60px;
			    transition: 0.3s;
			}
			.right:hover,.left:hover{
			    color: rgba(255,255,255);
			}

5，導入jquery文件，注意路徑，寫好jquery入口函數

<script src="../jquery/js/jquery1.1.3.js"></script>
<script>$(function(){});</script>

6，開始之前3步驟的添加結點代碼

var l1 = $(".list li:first-child").clone();
var l2 = $(".list li:last-child").clone();
$(".list").append(l1);
$(".list").prepend(l2);

7，設置全局變量，代碼實現鼠標進入顯示按鈕，鼠標離開，隱藏按鈕。

var num = $(".list").children().length-1;
var pic_len = 1380;
var all_len = num*pic_len;
console.log("獲得圖片數量:"+(num+1)+"真實數量:"+(num-1));
$("#first").on({
    mouseenter:function(){
    $(".left").show();
    $(".right").show();
    },
    mouseleave:function(){
    $(".left").hide();
    $(".right").hide();
    }
});

8，設置定時器，自動輪播。這裏也是整個代碼的一個核心，之前提到過將1，2，3，4的圖片順序通過複製插入結點變爲，4，1，2，3，4，1，這樣子做的目的是，當輪播圖到4時自動動畫切換到1，到1時切換到第一個1，這時的切換是不通過動畫的瞬間切換，用戶無法感知，接下來1到2就可以重新用動畫進行切換，這是到達最右端，到最左端的原理一樣。

    var left = -pic_len;
    var flag = 0;
    var tag = true;
    var a = function(){
        flag++;
        left=left-pic_len;
        if(left<-all_len){
            left = -pic_len*1;
            $(".list").css('left',left+'px');
            console.log('H');
            left-=pic_len;
        }
        if(left>0){
            left = -pic_len*4;
            $(".list").css('left',left+'px');
            console.log('F');
            left-=pic_len;
        }
        console.log('a:'+flag);
        $(".list").animate({left:left+'px'},'0.8s');
    }
    go = setInterval(a,6000);

9，設置鼠標進入輪播停止，鼠標離開，輪播重新啓動

$("#first").on({
			        mouseenter:function(){
			        console.log("鼠標進入");
			        clearInterval(go);
			        },
			        mouseleave:function(){
			        left = parseInt($(".list").css('left'));
			        console.log("鼠標離開");
			        console.log(left);
			        go = setInterval(a,6000);
			        }
			    });

10，最後設置按鈕的邏輯代碼，並且設置好400毫秒內只能點擊一次

$(".left").on({
			        click:function(){
			            if(tag){
			            console.log("向左走"+left);
			            left+=pic_len;
			            if(left>0){
			            left = -pic_len*4;
			            $(".list").css('left',left+'px');
			            left+=pic_len;
			            }
			            $(".list").animate({left:left+'px'},'0.8s');
			            tag = false;
			            setTimeout(function(){
			                tag = true;
			            },400);
			            }
			        }
			    })
			    $(".right").on({
			        click:function(){
			            if(tag){
			            console.log("向右走"+left);
			            left-=pic_len;
			            if(left<-all_len){
			                left = -pic_len*1;
			                $(".list").css('left',left+'px');
			                left-=pic_len;
			            }
			            $(".list").animate({left:left+'px'},'0.8s');
			            tag = false;
			            setTimeout(function(){
			                tag = true;
			            },400);
			            }
			        }
			    })

總結：輪播圖的實現方法多種多樣，這只是其中之一。