嗨~ 這裡是芝麻,今天我們一塊來做一個“滑塊外掛”。那麼啥是滑塊外掛呢?滑塊外掛能幹嘛呢?請看下圖:
是不是有點印象了,沒錯,他的最基本的用法就是左右滑動,外掛使用者只需要寫幾行簡單的html和js即可實現一個簡單滑動效果,不過你完全可以組合各種元素來適應不同的場景。
當然外掛我已經寫好了,我們先看下這個外掛是怎麼來用的,對外掛有一個大概瞭解,一會寫起來不至於太懵逼。。。
外掛地址:github.com/laravuel/sw… demo目錄有演示和用法,不過外掛我用了webpack和babel轉碼,可以不用管,直接看src/swiper.js即可。
<!-- demo.html -->
<!-- swiper名稱可以自定義的啦 -->
<div id="swiper">
<!-- swiper-item名稱也可以自定義啦,相當於一個滑塊 -->
<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節點名稱
item: '.swiper-item', // swiper內部滑塊的節點名稱
autoplay: false, // 是否自動滑動
duration: 3000, // 自動滑動間隔時間
change(index) { // 每滑動一個滑塊,外掛就會觸發change函式,index表示當前的滑塊下標
console.log(index);
}
});
</script>
複製程式碼
就是這麼簡單,外掛本身只是一個類,你只需要new一個物件出來,然後傳遞一些引數就ok了。而且,外掛還提供了一個change方法,讓使用者可以在外部控制滑塊的滑動!
const swiper = new Swiper({...});
swiper.change(2); // 滑動到第三個滑塊
複製程式碼
那麼接下來,就是我們的教程時間了,我也不確定你能不能硬著頭皮看完,不過我敢肯定,如果你能夠親手把外掛寫出來,你肯定會開心的飛起!!!
由於本次教程內容比較多,所以我分上下兩部分來講,第一部分主要講解原理,第二部分開始著手編寫外掛。所以,感興趣的小夥伴可以加個關注先。
1. 功能分析
俗話說,一上來就貼程式碼純屬耍流氓~ 我們要清楚自己想實現哪些功能,懶得思考的童鞋可以結合我上面的動圖來分析:
- 滑塊可以左右滑動(支援移動端和pc端)
- 滑塊塊內部可以寫任何元素
- 滑動到第一個和最後一個滑塊時會有一個限制,防止越界
- 能夠自動播放
我們所能看到的大概就這些,接下來我們會對這些功能一一進行拆解和分析。
2. 實現原理
上面簡單梳理了一些功能,其實可以再擴充套件出以下幾個問題:
- 滑塊的html結構是什麼樣的?
- 滑塊的滑動原理是什麼?
- 如何來觸發滑動?
別急,一個個來
2.1.1 滑塊的html結構是什麼樣的?
我們先來看一張圖:
這就是一個滑塊的最基本的結構圖,有三個部分組成:
- 檢視 我們的內容展示區域,相當於最外層的一個展示層
- 容器 容器的寬度是無限長的,容納我們所有需要切換的內容,滑塊的左右滑動,實質上是容器的左右移動(left),而每個滑塊相對於容器其實是靜止的
- 滑塊 一個個的內容
那麼根據這個結構,可以用如下html程式碼來表示:
<!-- 檢視層 -->
<div class="swiper">
<!-- 容器 -->
<div class="swiper-container">
<!-- 滑塊 -->
<div class="swiper-item" style="background: #000">1</div>
<div class="swiper-item" style="background: #4269eb">2</div>
<div class="swiper-item" style="background: #247902">3</div>
</div>
</div>
複製程式碼
然後再配上css樣式:
.swiper {
position: relative;
width: 300px;
/* 下面是為了讓大家看的更清楚,加的修飾 */
padding: 30px 0;
margin: 0 auto;
background: #FFB973;
}
.swiper .swiper-container {
position: relative;
/* 為啥要設定-300px呢,因為我想讓他預設在第二個滑塊的位置,一會會給大家演示 */
left: -300px;
/* 讓容器儘可能的寬,這樣才能容納更多的滑塊 */
width: 10000%;
/* 讓內部滑塊可以排成一行 */
display: flex;
/* 下面是為了讓大家看的更清楚,加的修飾 */
background: red;
padding: 15px 0;
}
.swiper .swiper-container .swiper-item {
/* 寬度設定1%會按照外層檢視的寬度來鋪滿 */
width: 1%;
height: 300px;
background: #eee;
/* 下面是為了讓大家看的更清楚,加的修飾 */
text-align: center;
font-size: 40px;
color: #fff;
}
複製程式碼
你就會看到這麼個效果:
當然,你可以把我加的修飾css樣式都給去掉,然後再試試。
2.1.2 滑塊的滑動原理是什麼?
如果你能夠理解上面的html結構的話,那我們就可以進行滑動的講解了。(如果還不理解的話,那就繼續往下看吧~或許會突然恍然大悟!)
上面我們提到了“滑塊容器”這個概念,滑塊的左右移動就是他來負責的
.swiper .swiper-container {
position: relative;
left: -300px;
}
複製程式碼
因為滑塊的寬度是和檢視的寬度一樣的,所以我們這裡滑塊的寬度是300px,那麼我們把容器的left設定為-300px,就相當於向左移動了一個滑塊的寬度,設定為-600px就表示向左移動了兩個滑塊的寬度,懂了吧,如果你想移動到某個滑塊,那麼只需要知道這個滑塊的順序(從0開始),然後乘以滑塊寬度的相反數就行了,比如要移動到第三個滑塊,他的順序是2,那麼就是2 * -300 = -600
看下面動圖演示:
但是好像並沒有出現滑動的動畫效果耶,廢話,還沒寫呢,有些童鞋可能喜歡用jquery
,習慣了他的animate動畫方法,說實話其實我不太喜歡,因為我覺得css自帶的動畫完全可以解決大部分需求,而且當你以後用了vue這種mvvm框架,你會發現jquery這種動畫方式很不實用!
扯遠了,不過今天我們不用css的animation
屬性,我們用另外一個屬性transition
就可以滿足,看名字你也能猜到,就是一個過渡屬性,詳細的用法請參考: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值變更,那麼會有一個0.2s的過渡動畫(補間動畫)
到這裡,我覺得你應該能理解了吧,每個滑塊swiper-item
的左右滑動,並不是滑塊本身在移動,而是他的父元素swiper-container
容器在左右移動(left值變化),然後我們用transition
屬性來讓這個變化過程出現一個過渡動畫效果!
2.1.3 如何來觸發滑動?
上面我們扯了一堆html和css,接下來我們說點js吧。 “如何來觸發滑動?”,我們先不考慮手機端,就按照pc網頁來,那麼觸發操作就是在容器上按住滑鼠向左/右拖動,然後鬆開滑鼠後,滑塊就會向左/右滑動。
整個流程都跟滑鼠事件掛鉤:
mousedown
滑鼠按下事件mousemove
滑鼠移動事件mouseup
滑鼠抬起事件
利用好這3個事件,我們就可以來實現滑鼠控制滑塊移動了!!我們先來實現摁住滑鼠向左、向右拖動滑塊。
既然我們的容器swiper-container
是負責左右移動的,那麼我們就來監聽他的滑鼠事件吧,首先用querySelector
獲取檢視和容器兩個元素節點:
// 首先獲取檢視層元素
const swiperEl = document.querySelector('.swiper');
// 在檢視層裡邊查詢容器元素
const containerEl = swiperEl.querySelector('.swiper-container');
複製程式碼
獲取到容器元素後,就可以用他的addEventListener
來監聽事件了:
containerEl.addEventListener('mousedown', (event) => {
console.log('滑鼠按下了');
});
containerEl.addEventListener('mousemove', (event) => {
console.log('滑鼠移動了');
});
containerEl.addEventListener('mouseup', (event) => {
console.log('滑鼠抬起了');
});
複製程式碼
看下動圖操作:
雖然我們可以成功的監聽到滑鼠的操作事件,但是好像有點問題,我們期望的結果是,只有當滑鼠按下後才會觸發滑鼠移動操作,但是現在看來並沒有,所以可以考慮加一個狀態來控制。
let state = 0; // 滑鼠預設狀態
containerEl.addEventListener('mousedown', (event) => {
state = 1; // 設定為1表示按下了滑鼠
console.log('滑鼠按下了');
});
containerEl.addEventListener('mousemove', (event) => {
if (state != 1) return; // 只有當state == 1時候才允許執行該事件
console.log('滑鼠移動了');
});
containerEl.addEventListener('mouseup', (event) => {
state = 0; // 恢復預設狀態
console.log('滑鼠抬起了');
});
複製程式碼
這樣就好多了!!!
那麼滑鼠事件有了,接下來要讓容器跟著滑鼠左右動才行。
我們要知道,瀏覽器對於滑鼠的任何操作,都會有一個座標引數(pageX和pageY),所以,我們可以根據滑鼠移動時候的座標引數來計算容器的left值,你可以想象一下,當你摁下滑鼠然後左右移動,滑鼠每次移動相對於上次都會產生一個距離,我們是不是可以把容器的left值加上或者減去這個距離,從而達到一個拖動效果呢?記得前面我們回撥函式裡邊的event
引數了嗎,他就是滑鼠當前操作的相關屬性,而我們目前只需要用到pageX屬性
下面我們來寫程式碼,有個地方需要注意下,我們先把容器的
transition
這個屬性給註釋掉,後面會解釋為什麼?
.swiper .swiper-container {
/* 省略... */
/* transition: left 0.2s ease-in-out; */
}
複製程式碼
每一步的操作,都在註釋裡邊詳細標註:
// 首先獲取檢視層元素
const swiperEl = document.querySelector('.swiper');
// 在檢視層裡邊查詢容器元素
const containerEl = swiperEl.querySelector('.swiper-container');
let state = 0; // 滑鼠預設狀態
let oldEvent = null; // 用來記錄滑鼠上次的位置
// 獲取容器的初始left值
let left = containerEl.offsetLeft;
containerEl.addEventListener('mousedown', (event) => {
state = 1; // 設定為1表示按下了滑鼠
oldEvent = event; // 當滑鼠按下時候記錄初始位置
console.log('滑鼠按下了');
});
containerEl.addEventListener('mousemove', (event) => {
if (state != 1) return; // 只有當state == 1時候才允許執行該事件
// 用當前滑鼠的位置來和上次滑鼠的位置作比較
// 如果當前滑鼠的pageX小於上次滑鼠的pageX,那就表示滑鼠在向左拖動,就需要把容器left值減去滑鼠移動的距離
if (event.pageX < oldEvent.pageX) {
left -= oldEvent.pageX - event.pageX;
}
else {
left += event.pageX - oldEvent.pageX;
}
// 完事之後記得把當前滑鼠的位置賦值給oldEvent
oldEvent = event;
// 最後再把left賦值給容器
containerEl.style.left = left + 'px';
console.log('滑鼠移動了');
});
containerEl.addEventListener('mouseup', (event) => {
state = 0; // 恢復預設狀態
console.log('滑鼠抬起了');
});
複製程式碼
執行看效果:
沒毛病,你看這個滑鼠,他又白又。。。
可是,可是,你這滑鼠鬆開後,也沒滑動到對應位置啊,額,額,前面我們不是講了嘛,滑塊順序、滑塊寬度還記得麼?0 - 滑塊順序 * 滑塊寬度就會移動到這個滑塊,還記得不?
我們用index
來記錄當前滑塊的順序
let index = 0; // 記錄當前滑塊的順序(從0開始)
複製程式碼
用itemWidth
來儲存滑塊的寬度
// 獲取到所有的滑塊元素
const itemEls = containerEl.querySelectorAll('.swiper-item');
// 獲取到滑塊的寬度
const itemWidth = itemEls[0].offsetWidth;
複製程式碼
把我們的left
變數改一下,之前left
變數是直接獲取容器元素的left值,現在我們要根據index
來計算
// let left = containerEl.offsetLeft;
// 儲存容器的left,這裡我們根據index來計算初始容器的left值
let left = 0 - itemWidth * index;
// 設定容器的初始位置
containerEl.style.left = left + 'px';
複製程式碼
這樣我們只需要修改index
變數的值,那麼容器初始位置就會發生變化。
然後,我們在滑鼠按下的時候,記錄下座標位置,在滑鼠抬起的時候拿當前滑鼠的位置和按下的位置作比較,來判斷使用者是向左劃的,還是向右劃的!
let startEvent = null; // 用來記錄滑鼠按下時候的位置(最初位置)
containerEl.addEventListener('mousedown', (event) => {
state = 1; // 設定為1表示按下了滑鼠
startEvent = oldEvent = event; // 當滑鼠按下時候記錄初始位置
console.log('滑鼠按下了');
});
複製程式碼
那麼滑鼠抬起的時候,只需要和startEvent.pageX
做比較,就可以判斷出左滑還是右滑,左滑我們讓index + 1
,右滑就讓index - 1
,最終我們通過index
再來計算left
containerEl.addEventListener('mouseup', (event) => {
state = 0; // 恢復預設狀態
// 滑鼠抬起時候,和按下的座標作比對,用來判斷是向左滑動還是向右滑動
// 向左滑動那麼就是要顯示下一個滑塊,所以index要加1
if (event.pageX < startEvent.pageX) {
index ++;
}
else {
index --;
}
left = 0 - itemWidth * index;
containerEl.style.left = left + 'px';
console.log('滑鼠抬起了');
});
複製程式碼
是不是像那麼回事了,不過怎麼沒滑動動畫呢,還記得我們註釋掉的那個
transition
麼,為什麼要註釋掉呢,因為只有在滑鼠抬起的那一刻才需要滑動動畫,左右拖動是根據滑鼠位移距離來計算left,數值很小,完全不需要銜接動畫,所以,我們先把註釋掉那個transition
程式碼單獨提取出來放到一個和swiper-container
同級的.move
類裡邊,當滑鼠抬起的時候,我們把swiper-container
追加一個move
類就行。
.swiper .swiper-container.move {
transition: left 0.2s ease-in-out;
}
複製程式碼
containerEl.addEventListener('mouseup', (event) => {
state = 0; // 恢復預設狀態
// 滑鼠抬起時候,和按下的座標作比對,用來判斷是向左滑動還是向右滑動
// 向左滑動那麼就是要顯示下一個滑塊,所以index要加1
if (event.pageX < startEvent.pageX) {
index ++;
}
else {
index --;
}
// 追加一個move樣式
containerEl.className += ' move';
// 當過度動畫結束後,一定要把這個類給移除掉
containerEl.addEventListener('transitionend', () => {
// 正則替換 \s+ 表示一個或多個空白字元
containerEl.className = containerEl.className.replace(/\s+move/, '');
})
left = 0 - itemWidth * index;
containerEl.style.left = left + 'px';
console.log('滑鼠抬起了');
});
複製程式碼
注意觀察swiper-container
的dom節點:
仔細看上面的動圖,第一個和最後一個滑動的時候是不是越界了,那麼我們只需要判斷
index
就行,看程式碼:
containerEl.addEventListener('mouseup', (event) => {
state = 0; // 恢復預設狀態
// 滑鼠抬起時候,和按下的座標作比對,用來判斷是向左滑動還是向右滑動
// 向左滑動那麼就是要顯示下一個滑塊,所以index要加1
if (event.pageX < startEvent.pageX) {
index ++;
}
else {
index --;
}
// 防止滑塊越界
// 如果當前滑塊是第一個,向右滑動後,回到第一個滑塊
// 如果是最後一個,向左滑動後,回到最後一個滑塊
if (index < 0) {
index = 0;
}
else if (index > itemEls.length - 1) {
index = itemEls.length - 1;
}
// 追加一個move樣式
containerEl.className += ' move';
// 當過度動畫結束後,一定要把這個類給移除掉
containerEl.addEventListener('transitionend', () => {
// 正則替換 \s+ 表示一個或多個空白字元
containerEl.className = containerEl.className.replace(/\s+move/, '');
})
left = 0 - itemWidth * index;
containerEl.style.left = left + 'px';
console.log('滑鼠抬起了');
});
複製程式碼
我們擴充套件出的三個問題,基本上都解決了。 而且到目前為止,其實你已經實現了一個基本的滑塊功能了,只不過略顯粗糙!
2.2 自動播放的原理
回到我們的功能列表,我們來看下第四條“自動播放”,第一個想到的是setInterval
setInterval(() => {
// 這個回撥會每隔2秒執行一次
}, 2000);
複製程式碼
所以,我們只需要在這個回撥函式裡邊寫上讓滑塊滑動的程式碼不就行了?
我們是用index
變數來控制當前滑塊的,那麼每隔2秒讓index
加1,最後再根據index
計算出left
的值,不就可以了?
setInterval(() => {
// 預設向左滑動
index ++;
// 如果滑動到最後一個滑塊,則回到第一個滑塊
if (index > itemEls.length - 1) {
index = 0;
}
// 下面的程式碼跟我們滑鼠抬起的事件的程式碼一樣的,要不要考慮簡單的封裝一下?
// 追加一個move樣式
containerEl.className += ' move';
// 當過度動畫結束後,一定要把這個類給移除掉
containerEl.addEventListener('transitionend', () => {
// 正則替換 \s+ 表示一個或多個空白字元
containerEl.className = containerEl.className.replace(/\s+move/, '');
})
left = 0 - itemWidth * index;
containerEl.style.left = left + 'px';
}, 2000);
複製程式碼
關於重複邏輯的問題,我們會在第二部分寫外掛時候進行封裝,這部分,我們只講原理,當然如果你是個強迫症患者,可以自己試著封裝個函式。
不過他老是這麼自動播放也不是個事,有時候我想看看內容,還沒看完呢,就自動划走了,所以,我們可以當滑鼠放在容器上的時候,停止播放,滑鼠移開後又恢復自動播放
mouseover
滑鼠移動到某個元素上mouseout
滑鼠在某個元素上移開
我們還是在容器上監聽這兩個事件,並用一個狀態autoplay
來控制播放:
// 自動播放狀態
let autoplay = true;
setInterval(() => {
if (!autoplay) return;
// 預設向左滑動
index ++;
// 如果滑動到最後一個滑塊,則回到第一個滑塊
if (index > itemEls.length - 1) {
index = 0;
}
// 追加一個move樣式
containerEl.className += ' move';
// 當過度動畫結束後,一定要把這個類給移除掉
containerEl.addEventListener('transitionend', () => {
// 正則替換 \s+ 表示一個或多個空白字元
containerEl.className = containerEl.className.replace(/\s+move/, '');
})
left = 0 - itemWidth * index;
containerEl.style.left = left + 'px';
}, 2000);
containerEl.addEventListener('mouseover', () => {
// 滑鼠移動到容器上,停止播放
autoplay = false;
});
containerEl.addEventListener('mouseout', () => {
// 滑鼠從容器上移開,恢復播放
autoplay = true;
});
複製程式碼
當然,還有其他的方法來控制自動播放,比如用
clearInterval
函式等。
3. 結尾
至此,我們的原理都講的差不多了,有遺漏的地方,還望指出,那麼在第二部分,我會和大家一塊來把寫的雜七雜八的程式碼做一個封裝,讓我們的程式碼外掛化,適應更多的場景。