摘要：初次體驗(yàn)之后，體驗(yàn)一下強(qiáng)大之處，做一個(gè)簡(jiǎn)單的輪播，實(shí)現(xiàn)圖片切換。點(diǎn)擊按鈕切換輪播頁面上面有三個(gè)標(biāo)簽用兩個(gè)便簽包裹好，是用來布局的，一般不在布局的標(biāo)簽上面做任何操作，是用來做輪播窗口的。是一個(gè)整數(shù)，指示元素的位置，以為基數(shù)。

初次體驗(yàn)jQuery 之后，體驗(yàn)一下jQuery強(qiáng)大之處，做一個(gè)簡(jiǎn)單的輪播，實(shí)現(xiàn)圖片切換。

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

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

這樣做你會(huì)發(fā)現(xiàn)切換圖片太生硬了，這事我們可以加上一點(diǎn)動(dòng)畫過渡transtion:transform 0.5s，讓它切換時(shí)平緩一點(diǎn)。

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

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

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

CSS樣式：
display：flex; flex布局
align-items:flex-stare; 往側(cè)軸起點(diǎn)靠
transition:transform 0.5s 動(dòng)畫過渡

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

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

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

但是這有一個(gè)問題，如果你頁面有很多圖片時(shí)，removeClass就會(huì)有很多，代碼就沒有那么整潔了，這個(gè)時(shí)候就最好還是用行為控制樣式，因?yàn)闆]有辦法部把所有的狀態(tài)都寫到JS 里面，所以只有用JS 動(dòng)態(tài)生成CSS，所以不到萬不得已最好不要用。

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

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

    第1張
    第2張
    第3張

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

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

    

        
        
        
    

    第1張
    第2張
    第3張

jQuery API語法：
event.traget用戶點(diǎn)擊的那個(gè)按鈕
event.currentTarget監(jiān)聽的那個(gè)按鈕
index()從匹配的元素中搜索給定元素的索引值，從0開始計(jì)數(shù)。

用上面方法就可以把代碼變的更簡(jiǎn)潔。

下面來看下，如果我要做成自動(dòng)播放應(yīng)該怎弄呢？
先來做一個(gè)數(shù)數(shù)的過程，每1s加1

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

那如果我要實(shí)現(xiàn)0、1、2循環(huán)數(shù)數(shù)呢？

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

用它來做元素循環(huán)時(shí)不也很簡(jiǎn)單

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

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

這樣就可以實(shí)現(xiàn)自動(dòng)輪播了，美中不足的是按鈕變化我們看不見，那把按鈕添加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")獲取當(dāng)前元素的兄弟元素，刪除它的class
})

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

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

但是現(xiàn)在有一個(gè)問題，當(dāng)我鼠標(biāo)進(jìn)入輪播頁面，它不能停止播放，那下面來看看怎么實(shí)現(xiàn)

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

.mouseenter( handler(eventObject) )類型是Function，當(dāng)鼠標(biāo)進(jìn)入觸發(fā)函數(shù)
.mouseleave( handler(eventObject) )類型是Function，當(dāng)鼠標(biāo)離開進(jìn)入觸發(fā)函數(shù)

這里面有一個(gè)小bug，輪播的 trigger("click")時(shí)間和.on("click")產(chǎn)生了沖突。在for循環(huán)中.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");
    })
}

整理下剛剛寫的自動(dòng)輪播的代碼

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

剛剛寫的自動(dòng)輪播部分，有很多重復(fù)的代碼，將它們優(yōu)化一下

 //jQuery 文件


    

        
        
        
    

第1張
第2張
第3張

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

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

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

handler(eventObject)類型是Function，事件被出發(fā)時(shí)執(zhí)行函數(shù)

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

event.traget用戶點(diǎn)擊的那個(gè)按

event.currentTarget監(jiān)聽的那個(gè)按鈕

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

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

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

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

輪播所用的圖片一字排開，通過移動(dòng)位置，把相應(yīng)的圖片呈現(xiàn)在視窗上。
自動(dòng)輪播的關(guān)鍵是循環(huán)，只要會(huì)自然計(jì)數(shù)方法就能掌握其中的道理。