国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何用原生js來(lái)寫一個(gè)swiper滑塊插件(上)原理

Dionysus_go / 1069人閱讀

嗨~ 這里是芝麻,今天我們一塊來(lái)做一個(gè)“滑塊插件”。那么啥是滑塊插件呢?滑塊插件能干嘛呢?請(qǐng)看下圖:


是不是有點(diǎn)印象了,沒(méi)錯(cuò),他的最基本的用法就是左右滑動(dòng),插件使用者只需要寫幾行簡(jiǎn)單的html和js即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單滑動(dòng)效果,不過(guò)你完全可以組合各種元素來(lái)適應(yīng)不同的場(chǎng)景。

當(dāng)然插件我已經(jīng)寫好了,咱先看下這個(gè)插件是怎么來(lái)用的,對(duì)插件有一個(gè)大概了解,一會(huì)寫起來(lái)不至于太懵逼。。。

插件地址:github.com/laravuel/sw… demo目錄有演示和用法,不過(guò)插件我用了webpack和babel轉(zhuǎn)碼,可以不用管,直接看src/swiper.js即可。




<div id="swiper">
    
    <div class="swiper-item">
        <img src="./images/1.jpg" />
    div>
    <div class="swiper-item">
        <img src="./images/2.jpg" />
    div>
    <div class="swiper-item">
        <img src="./images/3.jpg" />
    div>
div>

<script src="../dist/swiper.js">script>
<script>
    new Swiper({
        swiper: "#swiper",		// swiper節(jié)點(diǎn)名稱
        item: ".swiper-item",	        // swiper內(nèi)部滑塊的節(jié)點(diǎn)名稱
        autoplay: false,		// 是否自動(dòng)滑動(dòng)
        duration: 3000,			// 自動(dòng)滑動(dòng)間隔時(shí)間
        change(index) {			// 每滑動(dòng)一個(gè)滑塊,插件就會(huì)觸發(fā)change函數(shù),index表示當(dāng)前的滑塊下標(biāo)
            console.log(index);
        }
    });
script>

就是這么簡(jiǎn)單,插件本身只是一個(gè)類,你只需要new一個(gè)對(duì)象出來(lái),然后傳遞一些參數(shù)就ok了。而且,插件還提供了一個(gè)change方法,讓使用者可以在外部控制滑塊的滑動(dòng)!

const swiper = new Swiper({...});
swiper.change(2); // 滑動(dòng)到第三個(gè)滑塊

那么接下來(lái),就是我們的教程時(shí)間了,我也不確定你能不能硬著頭皮看完,不過(guò)我敢肯定,如果你能夠親手把插件寫出來(lái),你肯定會(huì)開心的飛起?。?!

由于本次教程內(nèi)容比較多,所以我分上下兩部分來(lái)講,第一部分主要講解原理,第二部分開始著手編寫插件。所以,感興趣的小伙伴可以加個(gè)關(guān)注先。

1. 功能分析

俗話說(shuō),一上來(lái)就貼代碼純屬耍流氓~ 我們要清楚自己想實(shí)現(xiàn)哪些功能,懶得思考的童鞋可以結(jié)合我上面的動(dòng)圖來(lái)分析:

    滑塊可以左右滑動(dòng)(支持移動(dòng)端和pc端)

    滑塊塊內(nèi)部可以寫任何元素

    滑動(dòng)到第一個(gè)和最后一個(gè)滑塊時(shí)會(huì)有一個(gè)限制,防止越界

    能夠自動(dòng)播放

我們所能看到的大概就這些,接下來(lái)我們會(huì)對(duì)這些功能一一進(jìn)行拆解和分析。

2. 實(shí)現(xiàn)原理

上面簡(jiǎn)單梳理了一些功能,其實(shí)可以再擴(kuò)展出以下幾個(gè)問(wèn)題:

    滑塊的html結(jié)構(gòu)是什么樣的?

    滑塊的滑動(dòng)原理是什么?

    如何來(lái)觸發(fā)滑動(dòng)?

別急,一個(gè)個(gè)來(lái)

2.1.1 滑塊的html結(jié)構(gòu)是什么樣的?

我們先來(lái)看一張圖:

這就是一個(gè)滑塊的最基本的結(jié)構(gòu)圖,有三個(gè)部分組成:


視圖 我們的內(nèi)容展示區(qū)域,相當(dāng)于最外層的一個(gè)展示層

容器 容器的寬度是無(wú)限長(zhǎng)的,容納我們所有需要切換的內(nèi)容,滑塊的左右滑動(dòng),實(shí)質(zhì)上是容器的左右移動(dòng)(left),而每個(gè)滑塊相對(duì)于容器其實(shí)是靜止的

滑塊 一個(gè)個(gè)的內(nèi)容

那么根據(jù)這個(gè)結(jié)構(gòu),可以用如下html代碼來(lái)表示:


<div class="swiper">
    
    <div class="swiper-container">
        
        <div class="swiper-item" style="background: #000">1div>
        <div class="swiper-item" style="background: #4269eb">2div>
        <div class="swiper-item" style="background: #247902">3div>
    div>
div>

然后再配上css樣式:

.swiper {
    position: relative;
    width: 300px;
	
    /* 下面是為了讓大家看的更清楚,加的修飾 */
    padding: 30px 0;
    margin: 0 auto;
    background: #FFB973;
}
.swiper .swiper-container {
    position: relative;
    /* 為啥要設(shè)置-300px呢,因?yàn)槲蚁胱屗J(rèn)在第二個(gè)滑塊的位置,一會(huì)會(huì)給大家演示 */
    left: -300px;
    /* 讓容器盡可能的寬,這樣才能容納更多的滑塊 */
    width: 10000%;
    /* 讓內(nèi)部滑塊可以排成一行 */
    display: flex;

    /* 下面是為了讓大家看的更清楚,加的修飾 */
    background: red;
    padding: 15px 0;
}
.swiper .swiper-container .swiper-item {
    /* 寬度設(shè)置1%會(huì)按照外層視圖的寬度來(lái)鋪滿 */
    width: 1%;
    height: 300px;
    background: #eee;

    /* 下面是為了讓大家看的更清楚,加的修飾 */
    text-align: center;
    font-size: 40px;
    color: #fff;
}

你就會(huì)看到這么個(gè)效果:


當(dāng)然,你可以把我加的修飾css樣式都給去掉,然后再試試。

2.1.2 滑塊的滑動(dòng)原理是什么?

如果你能夠理解上面的html結(jié)構(gòu)的話,那我們就可以進(jìn)行滑動(dòng)的講解了。(如果還不理解的話,那就繼續(xù)往下看吧~或許會(huì)突然恍然大悟!)

上面我們提到了“滑塊容器”這個(gè)概念,滑塊的左右移動(dòng)就是他來(lái)負(fù)責(zé)的

.swiper .swiper-container {
    position: relative;
    left: -300px;
}

因?yàn)榛瑝K的寬度是和視圖的寬度一樣的,所以我們這里滑塊的寬度是300px,那么我們把容器的left設(shè)置為-300px,就相當(dāng)于向左移動(dòng)了一個(gè)滑塊的寬度,設(shè)置為-600px就表示向左移動(dòng)了兩個(gè)滑塊的寬度,懂了吧,如果你想移動(dòng)到某個(gè)滑塊,那么只需要知道這個(gè)滑塊的順序(從0開始),然后乘以滑塊寬度的相反數(shù)就行了,比如要移動(dòng)到第三個(gè)滑塊,他的順序是2,那么就是2 * -300 = -600

看下面動(dòng)圖演示:


但是好像并沒(méi)有出現(xiàn)滑動(dòng)的動(dòng)畫效果耶,廢話,還沒(méi)寫呢,有些童鞋可能喜歡用jquery,習(xí)慣了他的animate動(dòng)畫方法,說(shuō)實(shí)話其實(shí)我不太喜歡,因?yàn)槲矣X得css自帶的動(dòng)畫完全可以解決大部分需求,而且當(dāng)你以后用了vue這種mvvm框架,你會(huì)發(fā)現(xiàn)jquery這種動(dòng)畫方式很不實(shí)用!

扯遠(yuǎn)了,不過(guò)今天我們不用css的animation屬性,我們用另外一個(gè)屬性transition就可以滿足,看名字你也能猜到,就是一個(gè)過(guò)渡屬性,詳細(xì)的用法請(qǐng)參考:developer.mozilla.org/zh-CN/docs/…

我們把容器加上transition屬性試試看哈:

.swiper .swiper-container {
    /* 省略... */
    
    transition: left 0.2s ease-in-out;
}


所以,我們寫的這段css代碼transition: left 0.2s ease-in-out;是表示:如果元素的left值變更,那么會(huì)有一個(gè)0.2s的過(guò)渡動(dòng)畫(補(bǔ)間動(dòng)畫)

到這里,我覺得你應(yīng)該能理解了吧,每個(gè)滑塊swiper-item的左右滑動(dòng),并不是滑塊本身在移動(dòng),而是他的父元素swiper-container容器在左右移動(dòng)(left值變化),然后我們用transition屬性來(lái)讓這個(gè)變化過(guò)程出現(xiàn)一個(gè)過(guò)渡動(dòng)畫效果!

2.1.3 如何來(lái)觸發(fā)滑動(dòng)?

上面我們扯了一堆html和css,接下來(lái)我們說(shuō)點(diǎn)js吧。 “如何來(lái)觸發(fā)滑動(dòng)?”,我們先不考慮手機(jī)端,就按照pc網(wǎng)頁(yè)來(lái),那么觸發(fā)操作就是在容器上按住鼠標(biāo)向左/右拖動(dòng),然后松開鼠標(biāo)后,滑塊就會(huì)向左/右滑動(dòng)

整個(gè)流程都跟鼠標(biāo)事件掛鉤:

    mousedown 鼠標(biāo)按下事件

    mousemove 鼠標(biāo)移動(dòng)事件

    mouseup 鼠標(biāo)抬起事件

利用好這3個(gè)事件,我們就可以來(lái)實(shí)現(xiàn)鼠標(biāo)控制滑塊移動(dòng)了??!我們先來(lái)實(shí)現(xiàn)摁住鼠標(biāo)向左、向右拖動(dòng)滑塊。 既然我們的容器swiper-container是負(fù)責(zé)左右移動(dòng)的,那么我們就來(lái)監(jiān)聽他的鼠標(biāo)事件吧,首先用querySelector獲取視圖容器兩個(gè)元素節(jié)點(diǎn):

// 首先獲取視圖層元素
const swiperEl = document.querySelector(".swiper");
// 在視圖層里邊查找容器元素
const containerEl = swiperEl.querySelector(".swiper-container");

獲取到容器元素后,就可以用他的addEventListener來(lái)監(jiān)聽事件了:

containerEl.addEventListener("mousedown", (event) => {
    console.log("鼠標(biāo)按下了");
});
containerEl.addEventListener("mousemove", (event) => {
    console.log("鼠標(biāo)移動(dòng)了");
});
containerEl.addEventListener("mouseup", (event) => {
    console.log("鼠標(biāo)抬起了");
});

看下動(dòng)圖操作:

雖然我們可以成功的監(jiān)聽到鼠標(biāo)的操作事件,但是好像有點(diǎn)問(wèn)題,我們期望的結(jié)果是,只有當(dāng)鼠標(biāo)按下后才會(huì)觸發(fā)鼠標(biāo)移動(dòng)操作,但是現(xiàn)在看來(lái)并沒(méi)有,所以可以考慮加一個(gè)狀態(tài)來(lái)控制。

let state = 0;  // 鼠標(biāo)默認(rèn)狀態(tài)

containerEl.addEventListener("mousedown", (event) => {
    state = 1;  // 設(shè)置為1表示按下了鼠標(biāo)
    console.log("鼠標(biāo)按下了");
});
containerEl.addEventListener("mousemove", (event) => {
    if (state != 1) return; // 只有當(dāng)state == 1時(shí)候才允許執(zhí)行該事件
    console.log("鼠標(biāo)移動(dòng)了");
});
containerEl.addEventListener("mouseup", (event) => {
    state = 0;  // 恢復(fù)默認(rèn)狀態(tài)
    console.log("鼠標(biāo)抬起了");
});

這樣就好多了?。。?p>

那么鼠標(biāo)事件有了,接下來(lái)要讓容器跟著鼠標(biāo)左右動(dòng)才行。

我們要知道,瀏覽器對(duì)于鼠標(biāo)的任何操作,都會(huì)有一個(gè)坐標(biāo)參數(shù)(pageX和pageY),所以,我們可以根據(jù)鼠標(biāo)移動(dòng)時(shí)候的坐標(biāo)參數(shù)來(lái)計(jì)算容器的left值,你可以想象一下,當(dāng)你摁下鼠標(biāo)然后左右移動(dòng),鼠標(biāo)每次移動(dòng)相對(duì)于上次都會(huì)產(chǎn)生一個(gè)距離,我們是不是可以把容器的left值加上或者減去這個(gè)距離,從而達(dá)到一個(gè)拖動(dòng)效果呢?記得前面我們回調(diào)函數(shù)里邊的event參數(shù)了嗎,他就是鼠標(biāo)當(dāng)前操作的相關(guān)屬性,而我們目前只需要用到pageX屬性


下面我們來(lái)寫代碼,有個(gè)地方需要注意下,我們先把容器的transition這個(gè)屬性給注釋掉,后面會(huì)解釋為什么?

.swiper .swiper-container {
    /* 省略... */
    
    /* transition: left 0.2s ease-in-out; */
}

每一步的操作,都在注釋里邊詳細(xì)標(biāo)注:

// 首先獲取視圖層元素
const swiperEl = document.querySelector(".swiper");
// 在視圖層里邊查找容器元素
const containerEl = swiperEl.querySelector(".swiper-container");

let state = 0;  		// 鼠標(biāo)默認(rèn)狀態(tài)
let oldEvent = null;    // 用來(lái)記錄鼠標(biāo)上次的位置
// 獲取容器的初始left值
let left = containerEl.offsetLeft;

containerEl.addEventListener("mousedown", (event) => {
    state = 1;  // 設(shè)置為1表示按下了鼠標(biāo)
    oldEvent = event;   // 當(dāng)鼠標(biāo)按下時(shí)候記錄初始位置
    console.log("鼠標(biāo)按下了");
});

containerEl.addEventListener("mousemove", (event) => {
    if (state != 1) return; // 只有當(dāng)state == 1時(shí)候才允許執(zhí)行該事件

    // 用當(dāng)前鼠標(biāo)的位置來(lái)和上次鼠標(biāo)的位置作比較
    // 如果當(dāng)前鼠標(biāo)的pageX小于上次鼠標(biāo)的pageX,那就表示鼠標(biāo)在向左拖動(dòng),就需要把容器left值減去鼠標(biāo)移動(dòng)的距離
    if (event.pageX < oldEvent.pageX) {
        left -= oldEvent.pageX - event.pageX;
    }
    else {
        left += event.pageX - oldEvent.pageX;
    }
    // 完事之后記得把當(dāng)前鼠標(biāo)的位置賦值給oldEvent
    oldEvent = event;
    // 最后再把left賦值給容器
    containerEl.style.left = left + "px";
    console.log("鼠標(biāo)移動(dòng)了");
});

containerEl.addEventListener("mouseup", (event) => {
    state = 0;  // 恢復(fù)默認(rèn)狀態(tài)
    console.log("鼠標(biāo)抬起了");
});

運(yùn)行看效果:


沒(méi)毛病,你看這個(gè)鼠標(biāo),他又白又。。。

可是,可是,你這鼠標(biāo)松開后,也沒(méi)滑動(dòng)到對(duì)應(yīng)位置啊,額,額,前面我們不是講了嘛,滑塊順序、滑塊寬度還記得么?0 - 滑塊順序 * 滑塊寬度就會(huì)移動(dòng)到這個(gè)滑塊,還記得不?

我們用index來(lái)記錄當(dāng)前滑塊的順序

let index = 0;          // 記錄當(dāng)前滑塊的順序(從0開始)

itemWidth來(lái)存儲(chǔ)滑塊的寬度

// 獲取到所有的滑塊元素
const itemEls = containerEl.querySelectorAll(".swiper-item");
// 獲取到滑塊的寬度
const itemWidth = itemEls[0].offsetWidth;

把我們的left變量改一下,之前left變量是直接獲取容器元素的left值,現(xiàn)在我們要根據(jù)index來(lái)計(jì)算

// let left = containerEl.offsetLeft;
// 存儲(chǔ)容器的left,這里我們根據(jù)index來(lái)計(jì)算初始容器的left值
let left = 0 - itemWidth * index;
// 設(shè)置容器的初始位置
containerEl.style.left = left + "px";

這樣我們只需要修改index變量的值,那么容器初始位置就會(huì)發(fā)生變化。

然后,我們?cè)谑髽?biāo)按下的時(shí)候,記錄下坐標(biāo)位置,在鼠標(biāo)抬起的時(shí)候拿當(dāng)前鼠標(biāo)的位置和按下的位置作比較,來(lái)判斷用戶是向左劃的,還是向右劃的!

加一個(gè)變量,用來(lái)記錄鼠標(biāo)按下的參數(shù),并且在鼠標(biāo)按下的時(shí)候進(jìn)行賦值!

let startEvent = null;  // 用來(lái)記錄鼠標(biāo)按下時(shí)候的位置(最初位置)

containerEl.addEventListener("mousedown", (event) => {
    state = 1;  // 設(shè)置為1表示按下了鼠標(biāo)
    startEvent = oldEvent = event;   // 當(dāng)鼠標(biāo)按下時(shí)候記錄初始位置
    console.log("鼠標(biāo)按下了");
});

那么鼠標(biāo)抬起的時(shí)候,只需要和startEvent.pageX做比較,就可以判斷出左滑還是右滑,左滑我們讓index + 1,右滑就讓index - 1,最終我們通過(guò)index再來(lái)計(jì)算left

containerEl.addEventListener("mouseup", (event) => {
    state = 0;  // 恢復(fù)默認(rèn)狀態(tài)
    
    // 鼠標(biāo)抬起時(shí)候,和按下的坐標(biāo)作比對(duì),用來(lái)判斷是向左滑動(dòng)還是向右滑動(dòng)
    // 向左滑動(dòng)那么就是要顯示下一個(gè)滑塊,所以index要加1
    if (event.pageX < startEvent.pageX) {
        index ++;
    }
    else {
        index --;
    }

    left = 0 - itemWidth * index;
    containerEl.style.left = left + "px";
    console.log("鼠標(biāo)抬起了");
});


是不是像那么回事了,不過(guò)怎么沒(méi)滑動(dòng)動(dòng)畫呢,還記得我們注釋掉的那個(gè)transition么,為什么要注釋掉呢,因?yàn)橹挥性谑髽?biāo)抬起的那一刻才需要滑動(dòng)動(dòng)畫,左右拖動(dòng)是根據(jù)鼠標(biāo)位移距離來(lái)計(jì)算left,數(shù)值很小,完全不需要銜接動(dòng)畫,所以,我們先把注釋掉那個(gè)transition代碼多帶帶提取出來(lái)放到一個(gè)和swiper-container同級(jí)的.move類里邊,當(dāng)鼠標(biāo)抬起的時(shí)候,我們把swiper-container追加一個(gè)move類就行。

.swiper .swiper-container.move {
    transition: left 0.2s ease-in-out;
} 
containerEl.addEventListener("mouseup", (event) => {
    state = 0;  // 恢復(fù)默認(rèn)狀態(tài)
    
    // 鼠標(biāo)抬起時(shí)候,和按下的坐標(biāo)作比對(duì),用來(lái)判斷是向左滑動(dòng)還是向右滑動(dòng)
    // 向左滑動(dòng)那么就是要顯示下一個(gè)滑塊,所以index要加1
    if (event.pageX < startEvent.pageX) {
        index ++;
    }
    else {
        index --;
    }

    // 追加一個(gè)move樣式
    containerEl.className += " move";
    // 當(dāng)過(guò)度動(dòng)畫結(jié)束后,一定要把這個(gè)類給移除掉
    containerEl.addEventListener("transitionend", () => {
        // 正則替換 s+ 表示一個(gè)或多個(gè)空白字符
        containerEl.className = containerEl.className.replace(/s+move/, "");
    })
    
    left = 0 - itemWidth * index;
    containerEl.style.left = left + "px";
    console.log("鼠標(biāo)抬起了");
});

注意觀察swiper-container的dom節(jié)點(diǎn):


仔細(xì)看上面的動(dòng)圖,第一個(gè)和最后一個(gè)滑動(dòng)的時(shí)候是不是越界了,那么我們只需要判斷index就行,看代碼:

containerEl.addEventListener("mouseup", (event) => {
    state = 0;  // 恢復(fù)默認(rèn)狀態(tài)
    
    // 鼠標(biāo)抬起時(shí)候,和按下的坐標(biāo)作比對(duì),用來(lái)判斷是向左滑動(dòng)還是向右滑動(dòng)
    // 向左滑動(dòng)那么就是要顯示下一個(gè)滑塊,所以index要加1
    if (event.pageX < startEvent.pageX) {
        index ++;
    }
    else {
        index --;
    }

    // 防止滑塊越界
    // 如果當(dāng)前滑塊是第一個(gè),向右滑動(dòng)后,回到第一個(gè)滑塊
    // 如果是最后一個(gè),向左滑動(dòng)后,回到最后一個(gè)滑塊
    if (index < 0) {
        index = 0;
    }
    else if (index > itemEls.length - 1) {
        index = itemEls.length - 1;
    }

    // 追加一個(gè)move樣式
    containerEl.className += " move";
    // 當(dāng)過(guò)度動(dòng)畫結(jié)束后,一定要把這個(gè)類給移除掉
    containerEl.addEventListener("transitionend", () => {
        // 正則替換 s+ 表示一個(gè)或多個(gè)空白字符
        containerEl.className = containerEl.className.replace(/s+move/, "");
    })

    left = 0 - itemWidth * index;
    containerEl.style.left = left + "px";
    console.log("鼠標(biāo)抬起了");
});



我們擴(kuò)展出的三個(gè)問(wèn)題,基本上都解決了。 而且到目前為止,其實(shí)你已經(jīng)實(shí)現(xiàn)了一個(gè)基本的滑塊功能了,只不過(guò)略顯粗糙!


2.2 自動(dòng)播放的原理

回到我們的功能列表,我們來(lái)看下第四條“自動(dòng)播放”,第一個(gè)想到的是setInterval

setInterval(() => {
    // 這個(gè)回調(diào)會(huì)每隔2秒執(zhí)行一次
}, 2000);

所以,我們只需要在這個(gè)回調(diào)函數(shù)里邊寫上讓滑塊滑動(dòng)的代碼不就行了? 我們是用index變量來(lái)控制當(dāng)前滑塊的,那么每隔2秒讓index加1,最后再根據(jù)index計(jì)算出left的值,不就可以了?

setInterval(() => {
    // 默認(rèn)向左滑動(dòng)
    index ++;
    // 如果滑動(dòng)到最后一個(gè)滑塊,則回到第一個(gè)滑塊
    if (index > itemEls.length - 1) {
        index = 0;
    }

    // 下面的代碼跟我們鼠標(biāo)抬起的事件的代碼一樣的,要不要考慮簡(jiǎn)單的封裝一下?
    // 追加一個(gè)move樣式
    containerEl.className += " move";
    // 當(dāng)過(guò)度動(dòng)畫結(jié)束后,一定要把這個(gè)類給移除掉
    containerEl.addEventListener("transitionend", () => {
        // 正則替換 s+ 表示一個(gè)或多個(gè)空白字符
        containerEl.className = containerEl.className.replace(/s+move/, "");
    })

    left = 0 - itemWidth * index;
    containerEl.style.left = left + "px";
}, 2000);


關(guān)于重復(fù)邏輯的問(wèn)題,我們會(huì)在第二部分寫插件時(shí)候進(jìn)行封裝,這部分,我們只講原理,當(dāng)然如果你是個(gè)強(qiáng)迫癥患者,可以自己試著封裝個(gè)函數(shù)。

不過(guò)他老是這么自動(dòng)播放也不是個(gè)事,有時(shí)候我想看看內(nèi)容,還沒(méi)看完呢,就自動(dòng)劃走了,所以,我們可以當(dāng)鼠標(biāo)放在容器上的時(shí)候,停止播放,鼠標(biāo)移開后又恢復(fù)自動(dòng)播放

    mouseover 鼠標(biāo)移動(dòng)到某個(gè)元素上

    mouseout 鼠標(biāo)在某個(gè)元素上移開

我們還是在容器上監(jiān)聽這兩個(gè)事件,并用一個(gè)狀態(tài)autoplay來(lái)控制播放:

// 自動(dòng)播放狀態(tài)
let autoplay = true;

setInterval(() => {
    if (!autoplay) return;  
    // 默認(rèn)向左滑動(dòng)
    index ++;
    // 如果滑動(dòng)到最后一個(gè)滑塊,則回到第一個(gè)滑塊
    if (index > itemEls.length - 1) {
        index = 0;
    }

    // 追加一個(gè)move樣式
    containerEl.className += " move";
    // 當(dāng)過(guò)度動(dòng)畫結(jié)束后,一定要把這個(gè)類給移除掉
    containerEl.addEventListener("transitionend", () => {
        // 正則替換 s+ 表示一個(gè)或多個(gè)空白字符
        containerEl.className = containerEl.className.replace(/s+move/, "");
    })

    left = 0 - itemWidth * index;
    containerEl.style.left = left + "px";
}, 2000);

containerEl.addEventListener("mouseover", () => {
    // 鼠標(biāo)移動(dòng)到容器上,停止播放
    autoplay = false;
});
containerEl.addEventListener("mouseout", () => {
    // 鼠標(biāo)從容器上移開,恢復(fù)播放
    autoplay = true;
});


當(dāng)然,還有其他的方法來(lái)控制自動(dòng)播放,比如用clearInterval函數(shù)等。

3. 結(jié)尾

至此,我們的原理都講的差不多了,有遺漏的地方,還望指出,那么在第二部分,我會(huì)和大家一塊來(lái)把寫的雜七雜八的代碼做一個(gè)封裝,讓我們的代碼插件化,適應(yīng)更多的場(chǎng)景。


喜歡的童鞋,粉一下唄~,不定時(shí)各種技術(shù)教程更新

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/7852.html

相關(guān)文章

  • vue-awesome-swiper滑塊插件使用基礎(chǔ)

    摘要:前言目前在使用建立的版項(xiàng)目中,直接引入官方的文件會(huì)導(dǎo)致報(bào)錯(cuò),所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同,額外的控制器依然可以放到整個(gè)滑塊之外。 前言 目前(2017-07-11)在使用vue-cli建立的webpack版項(xiàng)目中,直接引入官方的swiper文件會(huì)導(dǎo)致報(bào)錯(cuò),所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

    microelec 評(píng)論0 收藏0
  • 滑動(dòng)效果的原理及實(shí)踐一個(gè)滑動(dòng)小插件

    摘要:支持則認(rèn)為是移動(dòng)端,否則為端聲明事件函數(shù)端和移動(dòng)端這個(gè)函數(shù)是通用的?;瑝K的移動(dòng)應(yīng)該依據(jù)現(xiàn)在的位置計(jì)算。 本文轉(zhuǎn)載自blog 轉(zhuǎn)載請(qǐng)注明出處 目錄 前言 基本原理 html結(jié)構(gòu) 實(shí)踐 小結(jié) 前言 移動(dòng)端,滑動(dòng)是很常見的需求。很多同學(xué)都用過(guò)swiper.js,本文從原理出發(fā),實(shí)踐出一個(gè)類swiper的滑動(dòng)小插件ice-skating。 小插件的例子: 移動(dòng)端 pc端 在寫代碼的過(guò)程...

    Jrain 評(píng)論0 收藏0
  • 滑動(dòng)效果的原理及實(shí)踐一個(gè)滑動(dòng)小插件

    摘要:支持則認(rèn)為是移動(dòng)端,否則為端聲明事件函數(shù)端和移動(dòng)端這個(gè)函數(shù)是通用的。滑塊的移動(dòng)應(yīng)該依據(jù)現(xiàn)在的位置計(jì)算。 本文轉(zhuǎn)載自blog 轉(zhuǎn)載請(qǐng)注明出處 目錄 前言 基本原理 html結(jié)構(gòu) 實(shí)踐 小結(jié) 前言 移動(dòng)端,滑動(dòng)是很常見的需求。很多同學(xué)都用過(guò)swiper.js,本文從原理出發(fā),實(shí)踐出一個(gè)類swiper的滑動(dòng)小插件ice-skating。 小插件的例子: 移動(dòng)端 pc端 在寫代碼的過(guò)程...

    mcterry 評(píng)論0 收藏0
  • 滑動(dòng)效果的原理及實(shí)踐一個(gè)滑動(dòng)小插件

    摘要:支持則認(rèn)為是移動(dòng)端,否則為端聲明事件函數(shù)端和移動(dòng)端這個(gè)函數(shù)是通用的。滑塊的移動(dòng)應(yīng)該依據(jù)現(xiàn)在的位置計(jì)算。 本文轉(zhuǎn)載自blog 轉(zhuǎn)載請(qǐng)注明出處 目錄 前言 基本原理 html結(jié)構(gòu) 實(shí)踐 小結(jié) 前言 移動(dòng)端,滑動(dòng)是很常見的需求。很多同學(xué)都用過(guò)swiper.js,本文從原理出發(fā),實(shí)踐出一個(gè)類swiper的滑動(dòng)小插件ice-skating。 小插件的例子: 移動(dòng)端 pc端 在寫代碼的過(guò)程...

    coordinate35 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<