摘要：初次體驗之后，體驗一下強大之處，做一個簡單的輪播，實現圖片切換。點擊按鈕切換輪播頁面上面有三個標簽用兩個便簽包裹好，是用來布局的，一般不在布局的標簽上面做任何操作，是用來做輪播窗口的。是一個整數，指示元素的位置，以為基數。

初次體驗jQuery 之后，體驗一下jQuery強大之處，做一個簡單的輪播，實現圖片切換。

頁面上面有三個img標簽用兩個div便簽包裹好，class=images是用來布局的，一般不在布局的標簽上面做任何操作，class=window是用來做輪播窗口的。三個button按鈕，用于切換圖片。

首先把圖片一次排開，用class=images做布局，給它加上display:flex就可以實現浮動，如果圖片浮動起來變形厲害，可以給它加上align-items:flex-start；
class=window是輪播用的可視窗口，設置為圖片的寬度；并加上overflow:hidden，隱藏超出可視窗口部分；
用JS 來控制CSS來實現圖片切換，當我點擊按鈕，出現對應圖片，當我點擊第1張按鈕按鈕時，觸發.on事件后執行后面的函數，把圖片向左移動到指定位置，其余兩個按鈕也是做類似效果；

這樣做你會發現切換圖片太生硬了，這事我們可以加上一點動畫過渡transtion:transform 0.5s，讓它切換時平緩一點。

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

jQuery API 用法
.on()語法：.on( events, handler(eventObject) )
events類型是String，一個或多個空格分隔的事件，比如click、keydown.myPlugin
handler(eventObject)類型是Function，事件被出發時執行函數

.css()用法：獲取匹配元素集合中的第一個元素的樣式屬性的值設置每個匹配元素的一個或多個CSS屬性

CSS樣式：
display：flex; flex布局
align-items:flex-stare; 往側軸起點靠
transition:transform 0.5s 動畫過渡

用上面的方法，有一個問題就是HTML 和CSS 分離了，但是CSS 和JS 沒有分離，但是為什么img標簽會有圖片的寬度呢？

其實img是一個可替換元素，在img里面的下載下來之前，瀏覽器不知道img長什么樣，所以需要先做一個占位符來占位，等圖片下載下來時替換掉占位符，一旦頁面下載錯了就會看到占位符；如果不用這個占位符，瀏覽器就會隨便找個占位符來占位，等圖片下載下來后在替換這個占位符，在替換的過程中，后面的內容要讓位置，這就是重排的過程，特別消耗CPU，所以圖片的寬高很重要，知道圖片寬高就要寫上去。

如果做成CSS 和JS 分離，可以像下面這樣寫，就可以做到行為和樣式分離：

但是這有一個問題，如果你頁面有很多圖片時，removeClass就會有很多，代碼就沒有那么整潔了，這個時候就最好還是用行為控制樣式，因為沒有辦法部把所有的狀態都寫到JS 里面，所以只有用JS 動態生成CSS，所以不到萬不得已最好不要用。

用JS 控制樣式的代碼，可以改寫一下，變得更簡潔。

在button標簽外面在包裹一層div，如果用DOM 獲取里面的button的順序該怎么做呢？

    第1張
    第2張
    第3張

var n;  //n存儲的是：p3是第幾個元素
var allButtons = p3.parentNode.children;    //先獲取到p3的所有兄弟元素
for(var i = 0; i < allButton.length; i++){  //遍歷這個數組
    if(allButtons[i] === p3){        //如果這數組中的第i個等于p3，那么i 的值就是p3的位置
        n = i+1;        //因為i 取值是0，1，2 所以需要加上1才能得到最后的結果
        break;      //找到就跳出if循環；
    }
}

如果不用jQuery，用DOM 提供的API 是要用6行代碼才能實現。
那看看有jQuery 怎么做呢

    

        
        
        
    

    第1張
    第2張
    第3張

jQuery API語法：
event.traget用戶點擊的那個按鈕
event.currentTarget監聽的那個按鈕
index()從匹配的元素中搜索給定元素的索引值，從0開始計數。

用上面方法就可以把代碼變的更簡潔。

下面來看下，如果我要做成自動播放應該怎弄呢？
先來做一個數數的過程，每1s加1

var n = 0;
console.log(n);
setInteral(() => {
    n+=1;
    console.log(n);
},1000)

那如果我要實現0、1、2循環數數呢？

var n = 0;
console.log(n%3);   //用取余就可以
setInterval(()=>{
    n+=1;
    console.log(n%3);
},1000)

用它來做元素循環時不也很簡單

var n = 0;
var size = allButtons.length;   //有多少個按鈕可以這樣獲取
allButton.eq(n%size).trigger("clcik");   //用DOM API 可以這樣寫parentNode.children[n%size]，如果用jQuery 的話allButton[n%size]還是DOM 對象，這樣的還要在封裝，jQuery 提供了一個.eq()的方法
setInterval(()=>{
    n+=1;
    allButton.eq(n%size).trigger("clcik");
},1000)

jQuery API語法：
.eq(index)index是一個整數，指示元素的位置，以0為基數。
.trigger(eventType [, extraParameters ]) eventType類型是String，包含JS事件的字符串，比如click或submit。

這樣就可以實現自動輪播了，美中不足的是按鈕變化我們看不見，那把按鈕添加class看看

var n = 0;
var size = allButtons.length;
allButtons.eq(n%size).trigger("click").addClass("red");
var timerId = setInterval(function(){
    n+=1;
    allButtons.eq(n%size).trigger("click").addClass("red").siblings(".red").removeClass("red");   //siblings(".red").removeClass("red")獲取當前元素的兄弟元素，刪除它的class
})

jQuery API語法：
.siblings( [selector ] )類型是Selector，可以獲取每個元素的兄弟元素

現在可以看到每張圖片輪流播放，按鈕顏色也隨著改變。

但是現在有一個問題，當我鼠標進入輪播頁面，它不能停止播放，那下面來看看怎么實現

$(".window").on("mouseenter",function(){
    window.clearsetInterval(timerId)    //當鼠標進入"class=window"窗口時，觸發清除延時執行函數
})
$(".window").on("mouseleave",function(){
    timerId = setInterval(function(){
        allButtons.eq(n%size).trigger("click").addClass("red").siblings(".red").removerClass("red");  //當鼠標離開"class=window"窗口時，繼續執行上面的延時執行函數
    },1000)
})

.mouseenter( handler(eventObject) )類型是Function，當鼠標進入觸發函數
.mouseleave( handler(eventObject) )類型是Function，當鼠標離開進入觸發函數

這里面有一個小bug，輪播的 trigger("click")時間和.on("click")產生了沖突。在for循環中.on("click")的最后加上

n = index;
allButtons.eq(n).addClass("red").siblings(".red").removeClass("red");

如下：

var allButtons = $("#buttons > button");
for(var i = 0; i < allButtons.length; i++){
    $(allButtons[i]).on("click",function(x){
        var index = $(x.currentTarget).index();
        var p = index * -279;
        $(images1).css({
            transform:"translate("+ p + "px)"
        });
        n = index;
        allButtons.eq(n).addClass("red").siblings(".red").removeClass("red");
    })
}

整理下剛剛寫的自動輪播的代碼

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

剛剛寫的自動輪播部分，有很多重復的代碼，將它們優化一下

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

最后整理下這里面用到的jQuery API

.on()語法：.on( events, handler(eventObject) )

events類型是String，一個或多個空格分隔的事件，比如click、keydown.myPlugin

handler(eventObject)類型是Function，事件被出發時執行函數

.css()用法：獲取匹配元素集合中的第一個元素的樣式屬性的值設置每個匹配元素的一個或多個CSS屬性

event.traget用戶點擊的那個按

event.currentTarget監聽的那個按鈕

index()從匹配的元素中搜索給定元素的索引值，從0開始計數。

.eq(index)index是一個整數，指示元素的位置，以0為基數。

.trigger(eventType [, extraParameters ]) eventType類型是String，包含JS事件的字符串，比如click或submit。

.siblings( [selector ] )類型是Selector，可以獲取每個元素的兄弟元素

輪播所用的圖片一字排開，通過移動位置，把相應的圖片呈現在視窗上。
自動輪播的關鍵是循環，只要會自然計數方法就能掌握其中的道理。