輪播圖插件(Broadcast.js)
前言：寫這個插件的原因
- 前段時間準備用vue加上網易雲的nodejs接口，模擬網易雲音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex佈局，所以沒有使用UI組件。在輪播圖部分，本來在vue裏面寫了一下，但是發現總是出現bug,所以後來準備封裝一個插件來實現。
- 其次的一個原因是，以為這一學期學vue一直在用vue，發現自己以前學的原生js有點遺忘，所以想借這個機會再次複習一下js。
功能&介紹
- 沒有引用第三方插件庫，原生js，封裝一個Broadcast對象，在此對象上展開，僅僅190多行代碼。
- 目前主要實現了:無縫輪播，自動播放，PC端左右按鈕點擊切換，移動端手勢滑動切換。
- 自己寫了一部分基礎的css樣式，可以再次的基礎上修改成自己喜歡的樣式。
展示界面&使用
- github地址： git倉庫地址
- 演示demo： 在線瀏覽地址
- PC端展示：
- 移動端展示：
Usage
普通頁面引用
- 複製github倉庫下面，
src/js文件下的broadcast-me.js放到自己項目文件中 - 複製github倉庫下面，
src/css文件下的broadcast-me.css放到自己項目文件中 -
在頁面中引入:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入插件的css文件 --> <link rel="stylesheet" href="./css/broadcast-me.css"> </head> <body> <!-- 引入插件的js文件 --> <script src="./js/broadcast-me.js"></script> </body> </html> -
在後面如果需要一個輪播圖，則實列化這個對象：
var box = document.getElementById('box'); var imagesAndUrl = [{ imgSrc : './img/1.jpg', linkHref : "#" },{ imgSrc : './img/2.jpg', linkHref : '1' },{ imgSrc : './img/3.jpg', linkHref : '#' },{ imgSrc : './img/4.jpg', linkHref : '#' },{ imgSrc : './img/5.jpg', linkHref : '#' }]; // box => 你需要創建輪播圖的父級元素 // imagesAndUrl => 數組，存放圖片地址以及圖片的連接地址 var broadcast = new Broadcast(box,imagesAndUrl,{ transitionTime : 800, // 動畫過渡時間，默認為800ms intervalTime : 5000 // 圖片切換時間，默認為5s });
VUE中引用
- 在vue中使用，在
broadcast-me.js文件最後加上：
// 向外界暴露Broadcas對象
module.exports = Broadcast;- 在需要使用輪播的組件中，引入我們的文件
- 在模板文件中，採用自定義指令的方式，來插入我們的輪播圖
<template>
<div class="broadcast" v-broadcast="broadcastImg">
<!-- 自定義指令broadcast，，形參 => broadcastImg 為我們的輪播圖數據 -->
</div>
</template> imgSrc : './img/5.jpg',
linkHref : '#'
}- 添加自定義指令：
directives:{
broadcast:{
inserted:function(el,binding) {
// binding.value 為我們傳入的形參，即圖片的地址和圖片點擊鏈接
var broadcast = new Broadcast(el,binding.value,{
transitionTime : 800, // 動畫過渡時間，默認為800ms
intervalTime : 5000 // 圖片切換時間，默認為5s
});
}
}
}API
// 構造的對象
new Broadcast (el,imagesAndUrl,JSON)| 屬性 | 説明 | 備註備註 |
|---|---|---|
| el | 你需要創建輪播圖的包裹(父級)元素 | 不寫報錯 |
| imagesAndUrl | 圖片的地址與圖片地址鏈接。數組對象 linkHref => 圖片點擊鏈接；imgSrc => 圖片地址 | 不寫報錯 |
| JSON | transitionTime => 動畫過渡時間， intervalTime => 動畫切換時間 | 默認:過渡時間 => 800ms 切換時間 => 5s |
代碼編寫思路
dom 節點的動態生成
- 通過 el 的寬度，生成一個動態css加入到頁面當中
// 動態添加一些css樣式
let cssStr = `.broadcastMe .broadcastMe-list {width: ${(this.imagesAndUrl.length+2)*this.el.clientWidth}px;}.broadcastMe .broadcastMe-list .broadcastMe-item {width:${this.el.clientWidth}px;}`;
let styleNode = document.createElement('style');
styleNode.innerText = cssStr;
document.head.appendChild(styleNode)- 通過字符串模板的形式，生成我們需要的且符合無縫輪播的html字符串，加載el節點當中。
移動端手勢滑動
通過：touchstart => touchmove => touchend 完成一個滑動的全過程，並在touchmove事件當中，改變當前的left值，並在touchend事件當中判斷左右2邊的距離，進行翻頁還是不變。
// 移動端手指滑動
let stratPointX = 0;
let offsetX = 0;
this.el.addEventListener("touchstart", (e) => {
stratPointX = e.changedTouches[0].pageX;
offsetX = this.broadcastMeList.offsetLeft;
this.animationMark = true;
})
this.el.addEventListener("touchmove", (e) => {
let disX = e.changedTouches[0].pageX - stratPointX;
let left = offsetX + disX;
this.broadcastMeList.style.transitionProperty = 'none';
this.broadcastMeList.style.left = left + 'px';
})
this.el.addEventListener("touchend", () => {
let left = this.broadcastMeList.offsetLeft;
// 判斷正在滾動的圖片距離左右圖片的遠近，
this.index = Math.round(-left/this.el.clientWidth);
this.animationMark = false;
this.render();
})渲染函數(☆)
Broadcast.prototype.render = function () {
// 防抖控制
if(this.animationMark) return;
this.animationMark = true;
// 修改broadcastMeList 的left值
this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';
this.broadcastMeList.style.transition = 'left ' + this.timer/1000 + 's';
setTimeout(() => {
// 添加判斷，防止出界
if(this.index <= 0){
// 無縫輪播，修改真實的left值，取消transition，造成視覺錯誤
this.broadcastMeList.style.transitionProperty = 'none';
this.index = this.imagesAndUrl.length;
this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';
}else if (this.index > this.imagesAndUrl.length){
this.broadcastMeList.style.transitionProperty = 'none';
this.index = 1;
this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + 'px';
}
this.animationMark = false;
},this.timer)
this.renderSpot();
}最後
因為才疏學淺，代碼才剛剛寫完，測試較少，很多bug還未發現，如果發現問題，歡迎留言指出，敬請斧正。謝謝！！
