插件封裝｜封裝一個屬於本身的輪播圖插件——左右切換版
上一篇文章 案例｜原生手寫一個輪播圖——漸隱漸顯版 還有不少不足，這裏要很是感謝大佬 csdoker給出的寶貴意見和指導🙏，因此筆者決定從新完善一下輪播圖的案例，打算作一個簡易版的左右輪播圖插件的封裝；javascript
1、插件封裝前言（封裝的基礎）
思惟導圖
(一)、插件封裝思想
一、敏捷化平臺的構建思想
封裝一款插件，首先第一件事情必定是分析，分析最後實現的效果和能夠支持的配置項css
二、依據:
- => 經驗積攢
- => 研究別人優秀的插件😄
三、目的：
寫插件的目的是方便後期的開發，並且須要讓更多人使用（開源）html
四、要求：
- -> 專業，咱們寫的插件性能要好（代碼要好）
- -> 易用，別人使用起來很是的簡便
- -> 強大，儘量在代碼簡潔的狀況下，支持更強大的效果
- -> 靈活，儘量基於原生JS編寫，不要依賴其餘的類庫或者內容（拿來即用主義）
- -> 擴展，可升級，升級的時候要考慮到低版本的向後兼容，並且不要和原始的版本差距太大
- ......等等
(二)、左右輪播圖插件封裝思想
插件 組件 類庫 等這些東西封裝 基本上都要基於面向對象思想前端
- 面向對象的思想可以保證每個實例之間沒有關聯
- 面向對象的最主要目的就是：插件組件封裝
- 咱們封裝的插件是一個類
- 基於插件每一次調用實現的輪播圖 都是建立類的一個實例
- 對於輪播圖來講:
- 1.基本核心信息應該都是私有的
- 2.一些操做的方法應該是公用的
(三)、插件封裝中的形參處理
方法一：設置爲形參，一個個傳遞
- 特色：
- -> 傳遞實參的順序必須和形參設置順序保持一致
- -> 很差給形參設置默認值
- -> 中間的一些項若是不傳遞，會把後面傳遞的項錯位
- 使用場景：
- 通常這種狀況只應用於參數特別少的狀況下（通常不超過兩個）
方法二：基於對象鍵值對的方式處理
- 特色：
- -> 能夠傳遞，也能夠不傳遞
- -> 傳遞的順序也隨意，由於都是基於屬性名標記好的，只要屬性和值對應，順序是無所謂的
- -> 方便擴展
- -> 不傳遞的信息咱們給其設置默認值
- 使用場景：
- 對於傳遞多個參數的狀況下，咱們通常基於對象鍵值對的方式處理
2、輪播圖封裝——HTML
這一部分咱們能夠寫一點架子出來，用戶使用時直接CV過來，更換本身的圖片，配置本身的一些細節內容便可； 倉庫地址java
<!-- 輪播圖總體容器 -->
<div class="xiaozhima-container">
<!-- 全部圖片容器 -->
<div class="xiaozhima-wrapper">
<!-- 每一個圖片容器 -->
<div class="xiaozhima-slide">
<!-- 插入您的圖片 -->
<img src=" " alt="">
</div>
<div class="xiaozhima-slide">
<img src=" " alt="">
</div>
<div class="xiaozhima-slide">
<img src=" " alt="">
</div>
<div class="xiaozhima-slide">
<img src=" " alt="">
</div>
</div>
<!-- 分頁器容器 -->
<div class="xiaozhima-pagination"></div>
<!-- 左右按鈕容器 -->
<a href="javascript:;" class="xiaozhima-arrow-prev"></a>
<a href="javascript:;" class="xiaozhima-arrow-next"></a>
</div>
複製代碼
3、輪播圖封裝——CSS
這一部分咱們也是寫一點架子出來，把咱們須要實現的內容配置好，細節樣式由用戶本身指定便可node
一、使用方式：
- 引入命名爲
banner-plugin.css的樣式表便可 ；倉庫地址 （你們也能夠本身建立一個CSS文件，把代碼直接粘貼進去便可）；
二、用戶須要配置的內容：
- 輪播圖總體容器的：
- width
- height
- 插入您的圖片中的：（可不更改只傳圖片便可）
- 圖片及圖片的樣式
三、須要在JS中動態計算的樣式
-
全部圖片容器的：git
- width ：根據SLIDE的個數（含克隆的）* CONTAINER容器的寬度
- transition：是在JS中設置的
- left：初始展現哪個SLIDE，LEFT值就應該是計算好的
-
每一個圖片容器的：github
- width ：須要和用戶傳遞的CONTAINER的寬度保持一致（JS中處理）
-
左右按鈕：(北京圖片轉爲BASE64編碼)數組
-
插件中的樣式資源最好不要使用圖片（由於這樣須要用戶額外的導入，不利於插件的推廣和使用） => 須要使用圖片，咱們最好把圖片設置爲BASE64編碼app
-
一個把圖片轉爲BASE64編碼的在線網站：tool.css-js.com/base64.html
-
四、具體的CSS代碼
.xiaozhima-container {
/* * 須要用戶後期本身配置的樣式 * width * height */
position: relative;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
.xiaozhima-container .xiaozhima-wrapper {
/* * 須要在JS中動態計算的樣式 * width 根據SLIDE的個數（含克隆的）* CONTAINER容器的寬度 * transition 是在JS中設置的 * left 初始展現哪個SLIDE，LEFT值就應該是計算好的 */
display: flex;
box-sizing: border-box;
position: absolute;
top: 0;
height: 100%;
}
.xiaozhima-container .xiaozhima-wrapper .xiaozhima-slide {
/* * 須要用戶後期本身配置的樣式 * width 和CONTAINER的寬度保持一致（JS中處理） */
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
.xiaozhima-container .xiaozhima-wrapper .xiaozhima-slide img {
display: block;
width: 100%;
height: 100%;
}
.xiaozhima-container .xiaozhima-pagination {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 999;
transform: translateX(-50%);
padding: 3px 6px;
background: rgba(255, 255, 255, .3);
font-size: 0;
border-radius: 10px;
}
.xiaozhima-container .xiaozhima-pagination span {
display: inline-block;
margin: 0 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: lightblue;
cursor: pointer;
}
.xiaozhima-container .xiaozhima-pagination span.active {
background: lightcoral;
}
.xiaozhima-arrow-prev,
.xiaozhima-arrow-next {
display: none;
position: absolute;
z-index: 999;
top: 50%;
margin-top: -22.5px;
width: 30px;
height: 45px;
/* 插件中的樣式資源最好不要使用圖片（由於這樣須要用戶額外的導入，不利於插件的推廣和使用） => 須要使用圖片，咱們最好把圖片設置爲BASE64編碼 */
background: url("data:image/png;base64,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") no-repeat 0 0;
}
.xiaozhima-arrow-prev {
left: 0;
}
.xiaozhima-arrow-next {
right: 0;
background-position: -50px 0;
}
.xiaozhima-container:hover .xiaozhima-arrow-prev,
.xiaozhima-container:hover .xiaozhima-arrow-next {
display: block;
}
複製代碼
4、輪播圖封裝——JS（重點）
(一)、第一步——功能及配置項分析
一、目的：
- 封裝一個
bannerPlugin方法,可讓指定的容器實現出左右運動版的輪播圖效果；
二、使用語法：
- bannerPligin([container],[options]) ;
三、參數說明：
- container：容器標籤
- options：須要配置項（這裏用戶配置的參數較多，因此咱們採用對象數據類型）
參數 options 配置項詳解
(二)、第二步——參數初始化
上面咱們說過了參數的處理方式有兩種，咱們這裏選擇基於對象健值對的方式處理；
這裏用到了咱們昨天鋪墊的深比較、循環迭代方法（深克隆 VS 淺克隆｜深比較 VS 淺比較｜回調函數），還有數據類型檢測的方法，文章JS中數據類型檢測四種方式的優缺點 的末尾提到過，我把他做爲工具包先放在這裏
一、工具包
倉庫地址 你們也能夠直接CV
/* 工具包 */
(function () {
// 數據類型檢測
let class2type = {};
["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"].forEach(item => {
class2type["[object " + item + "]"] = item.toLowerCase();
});
function toType(obj) {
if (obj == null) return obj + "";
return typeof obj === "object" || typeof obj === "function" ?
class2type[class2type.toString.call(obj)] || "object" :
typeof obj;
}
// 檢測是否爲函數
function isFunction(obj) {
return typeof obj === "function" && typeof obj.nodeType !== "number";
}
// 檢測window
function isWindow(obj) {
return obj != null && obj === obj.window;
}
// 數組/類數組
function isArrayLike(obj) {
var length = !!obj && "length" in obj && obj.length,
type = toType(obj);
if (isFunction(obj) || isWindow(obj)) return false;
return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj;
}
// 循環迭代
function _each(obj, callback, context = window) {
if (/^(ARRAY|OBJECT)$/i.test(obj.constructor)) {
obj = _cloneDeep(obj);
}
if (isArrayLike(obj)) {
for (let i = 0; i < obj.length; i++) {
let res = callback && callback.call(context, obj[i], i);
if (res === false) break;
if (res !== undefined) obj[i] = res;
}
} else {
for (let key in obj) {
if (!obj.hasOwnProperty(key)) break;
let res = callback && callback.call(context, obj[key], key);
if (res === false) break;
if (res !== undefined) obj[key] = res;
}
}
return obj;
}
// 深克隆
function _cloneDeep(obj) {
if (obj === null) return null;
if (typeof obj !== "object") return obj;
if (obj instanceof RegExp) return new RegExp(obj);
if (obj instanceof Date) return new Date(obj);
let cloneObj = new obj.constructor;
for (let key in obj) {
if (!obj.hasOwnProperty(key)) break;
cloneObj[key] = _cloneDeep(obj[key]);
}
return cloneObj;
}
// 深比較
function _assignDeep(obj1, obj2) {
let obj = _cloneDeep(obj1);
for (let key in obj2) {
if (!obj2.hasOwnProperty(key)) break;
let v2 = obj2[key],
v1 = obj[key];
if ((v1 !== null && typeof v1 === "object") && (v2 !== null && typeof v2 === "object")) {
obj[key] = _assignDeep(v1, v2);
continue;
}
obj[key] = v2;
}
return obj;
}
['_each', '_cloneDeep', '_assignDeep', 'toType', 'isFunction', 'isWindow', 'isArrayLike'].forEach(item => {
window[item] = eval(item);
});
})();
複製代碼
二、參數初始化的目的
- 配置默認的參數信息，當用戶不傳遞對應參數時走默認信息
function bannerPlugin(container, options = {}) {
// 參數初始化：默認配置信息
let defaultParams = {
initialSlide: 0,
autoplay: 3000,
speed: 300,
pagination: {
el: '.xiaozhima-pagination',
clickable: true
},
navigation: {
nextEl: '.xiaozhima-arrow-next',
prevEl: '.xiaozhima-arrow-prev'
},
on: {
init() {},
transitionStart() {},
transitionEnd() {}
}
};
// 利用深比較，把用戶傳遞進來的參數和默認配置合併(達到替換默認配置的效果)
options = _assignDeep(defaultParams, options);
// 判斷用戶傳遞進來的第一個參數是否爲元素容器，支持直接傳遞標籤
typeof container === "string" ? container = document.querySelector(container) : null;
if (!container || container.nodeType !== 1) {
throw new TypeError('container must be an element!');
}
return new Banner(container, options);
}
複製代碼
(三)、第三步——配置每一個輪播圖的私有屬性
一、利用類與實例的方式實現每一個輪播圖之間互不影響
- 用戶在使用時，每一個配置信息確定是當前輪播圖私有的，因此咱們配置好的默認參數，應該是每個實例的私有屬性
class Banner {
constructor(container, options) {
// 把傳遞進來的信息都掛載到當前類的實例上
// 1.信息都做爲他的私有屬性（這樣每個實例之間互不影響）
// 2.掛載到實例上，之後在當前類的其它方法中，只要保證THIS是實例，均可以基於THIS.XXX獲取和操做
_each(options, (item, key) => {
this[key] = item;
});
this.container = container;
this.activeIndex = this.initialSlide;
}
}
複製代碼
(四)、第四步——配置公共方法（重點）
- 上面咱們給每一個輪播圖實例都添加了私有屬性，下面的公共方法纔是重點內容
一、計算結構和樣式函數
- 每個輪播圖的完成，必要的操做都是獲取元素
computed() {
let {
container,
pagination,
navigation
} = this;
// 輪播圖
this.wrapper = container.querySelector('.xiaozhima-wrapper');
this.slidesTrue = container.querySelectorAll('.xiaozhima-slide');
// 克隆第一張到容器的末尾
this.wrapper.appendChild(this.slidesTrue[0].cloneNode(true));
this.slides = container.querySelectorAll('.xiaozhima-slide');
// 分頁器
this.paginationBox = null;
this.paginationList = null;
if (toType(pagination) === "object") {
let el = pagination.el;
if (el) {
this.paginationBox = container.querySelector(el);
// 建立SPAN
let str = ``;
_each(this.slidesTrue, item => {
str += `<span></span>`;
});
this.paginationBox.innerHTML = str;
this.paginationList = this.paginationBox.querySelectorAll('span');
}
}
// 左右切換
this.arrowPrev = null;
this.arrowNext = null;
if (toType(navigation) === "object") {
navigation.prevEl ? this.arrowPrev = container.querySelector(navigation.prevEl) : null;
navigation.nextEl ? this.arrowNext = container.querySelector(navigation.nextEl) : null;
}
// 控制元素的樣式（包含初始展現哪個）
this.changeWidth = parseFloat(getComputedStyle(container).width);
this.activeIndex = this.activeIndex < 0 ? 0 : (this.activeIndex > this.slides.length - 1 ? this.slides.length - 1 : this.activeIndex);
this.wrapper.style.width = `${this.changeWidth*this.slides.length}px`;
this.wrapper.style.transition = `left ${this.speed}ms`;
this.wrapper.style.left = `${-this.activeIndex*this.changeWidth}px`;
_each(this.slides, item => {
item.style.width = `${this.changeWidth}px`;
});
}
複製代碼
二、實現輪播圖切換函數
// 實現輪播圖切換
change(now = false) {
//now 傳值是當即切換，不傳是默認的有動畫切換
let {
wrapper,
speed,
activeIndex,
changeWidth,
on
} = this;
let isO = toType(on) === "object" ? true : false,
transitionStart = isO ? on.transitionStart : null,
transitionEnd = isO ? on.transitionEnd : null;
// 切換以前觸發的鉤子函數
!now && transitionStart ? transitionStart.call(this, this) : null;
// 若是傳了now 當即切換，則不須要有動畫
wrapper.style.transitionDuration = `${now?0:speed}ms`;
wrapper.style.left = `${-activeIndex*changeWidth}px`;
if (now) {
// 若是當即切換我須要讓上面先渲染一次，利用讀寫分離；
wrapper.offsetWidth;
}
// 切換以後觸發的鉤子函數
let fn = () => {
!now && transitionEnd ? transitionEnd.call(this, this) : null;
// 每一次都會從新監聽，因此監聽完須要把上一次監聽的移除掉
wrapper.removeEventListener('transitionend', fn);
};
wrapper.addEventListener('transitionend', fn);
}
複製代碼
三、自動輪播函數
// 自動輪播
autoMove() {
if (this.activeIndex === this.slides.length - 1) {
this.activeIndex = 0;
this.change(true);
}
this.activeIndex++;
this.change();
}
複製代碼
四、焦點對齊函數
// 實現焦點對齊
autoFocus() {
let {
paginationList,
activeIndex,
slides
} = this;
if (!paginationList) return;
activeIndex === slides.length - 1 ? activeIndex = 0 : null;
_each(paginationList, (item, index) => {
if (index === activeIndex) {
item.className = 'active';
return;
}
item.className = '';
});
}
複製代碼
(五)、第五步——公共方法執行順序及條件（重點）
- 如今實現一個輪播圖功能的方法，咱們都已經封裝完成，但方法是死的，只有執行纔有價值，
- 這個時候咱們就要考慮到，咱們雖然建立了這些方法，可是用戶傳遞的參數中可能並不須要用到這些，因此咱們還須要判斷用戶是否須要，若是用戶須要，那咱們的執行順序又是什麼；
init() {
// THIS:當前類的實例
// 入口，在這裏控制代碼執行的邏輯順序
// 先基於它獲取元素後，才能夠獲取實例上的信息
this.computed();
let {
autoplay,
autoMove,
container,
pagination,
paginationList,
arrowNext,
arrowPrev
} = this;
// 控制是否自動切換
if (autoplay) {
this.autoTimer = setInterval(autoMove.bind(this), autoplay);
// 箭頭函數中的THIS是上下文中的，也就是實例
container.onmouseenter = () => clearInterval(this.autoTimer);
container.onmouseleave = () => this.autoTimer = setInterval(autoMove.bind(this), autoplay);
}
// 控制焦點切換
if (toType(pagination) === "object" && pagination.clickable === true && paginationList) {
_each(paginationList, (item, index) => {
item.onclick = () => {
let {
activeIndex,
slides
} = this;
if ((index === activeIndex) || (index === 0 && activeIndex === slides.length - 1)) return;
this.activeIndex = index;
this.change();
};
});
}
// 控制左右按鈕切換
arrowNext ? arrowNext.onclick = autoMove.bind(this) : null;
arrowPrev ? arrowPrev.onclick = () => {
if (this.activeIndex === 0) {
this.activeIndex = this.slides.length - 1;
this.change(true);
}
this.activeIndex--;
this.change();
} : null;
// 初始化完成，觸發INIT回調函數
if (toType(this.on) === "object" && isFunction(this.on.init)) {
// 把回調函數執行，讓方法中的THIS是實例，而且傳遞的第一個參數也是實例
this.on.init.call(this, this);
}
}
複製代碼
(六)、第六步——整合優化（重點）
上面JS代碼彙總整理
- 使用方式JS倒入便可；倉庫地址
- 這裏筆者沒有放地址，一樣須要您建立一個
banner-plugin.js的JS文件，把代碼直接粘貼進去便可；
- 這裏筆者沒有放地址，一樣須要您建立一個
(function () {
class Banner {
constructor(container, options) {
// 把傳遞進來的信息都掛載到當前類的實例上
// 1.信息都做爲他的私有屬性（這樣每個實例之間互不影響）
// 2.掛載到實例上，之後在當前類的其它方法中，只要保證THIS是實例，均可以基於THIS.XXX獲取和操做
_each(options, (item, key) => {
this[key] = item;
});
this.container = container;
this.activeIndex = this.initialSlide;
this.init();
}
init() {
// THIS:當前類的實例
// 入口，在這裏控制代碼執行的邏輯順序
// 先基於它獲取元素後，才能夠獲取實例上的信息
this.computed();
let {
autoplay,
autoMove,
container,
pagination,
paginationList,
arrowNext,
arrowPrev
} = this;
// 控制是否自動切換
if (autoplay) {
this.autoTimer = setInterval(autoMove.bind(this), autoplay);
// 箭頭函數中的THIS是上下文中的，也就是實例
container.onmouseenter = () => clearInterval(this.autoTimer);
container.onmouseleave = () => this.autoTimer = setInterval(autoMove.bind(this), autoplay);
}
// 控制焦點切換
if (toType(pagination) === "object" && pagination.clickable === true && paginationList) {
_each(paginationList, (item, index) => {
item.onclick = () => {
let {
activeIndex,
slides
} = this;
if ((index === activeIndex) || (index === 0 && activeIndex === slides.length - 1)) return;
this.activeIndex = index;
this.change();
};
});
}
// 控制左右按鈕切換
arrowNext ? arrowNext.onclick = autoMove.bind(this) : null;
arrowPrev ? arrowPrev.onclick = () => {
if (this.activeIndex === 0) {
this.activeIndex = this.slides.length - 1;
this.change(true);
}
this.activeIndex--;
this.change();
} : null;
// 初始化完成，觸發INIT回調函數
if (toType(this.on) === "object" && isFunction(this.on.init)) {
// 把回調函數執行，讓方法中的THIS是實例，而且傳遞的第一個參數也是實例
this.on.init.call(this, this);
}
}
// 計算結構和樣式
computed() {
let {
container,
pagination,
navigation
} = this;
// 輪播圖
this.wrapper = container.querySelector('.xiaozhima-wrapper');
this.slidesTrue = container.querySelectorAll('.xiaozhima-slide');
// 克隆第一張到容器的末尾
this.wrapper.appendChild(this.slidesTrue[0].cloneNode(true));
this.slides = container.querySelectorAll('.xiaozhima-slide');
// 分頁器
this.paginationBox = null;
this.paginationList = null;
if (toType(pagination) === "object") {
let el = pagination.el;
if (el) {
this.paginationBox = container.querySelector(el);
// 建立SPAN
let str = ``;
_each(this.slidesTrue, item => {
str += `<span></span>`;
});
this.paginationBox.innerHTML = str;
this.paginationList = this.paginationBox.querySelectorAll('span');
}
}
// 左右切換
this.arrowPrev = null;
this.arrowNext = null;
if (toType(navigation) === "object") {
navigation.prevEl ? this.arrowPrev = container.querySelector(navigation.prevEl) : null;
navigation.nextEl ? this.arrowNext = container.querySelector(navigation.nextEl) : null;
}
// 控制元素的樣式（包含初始展現哪個）
this.changeWidth = parseFloat(getComputedStyle(container).width);
this.activeIndex = this.activeIndex < 0 ? 0 : (this.activeIndex > this.slides.length - 1 ? this.slides.length - 1 : this.activeIndex);
this.wrapper.style.width = `${this.changeWidth * this.slides.length}px`;
this.wrapper.style.transition = `left ${this.speed}ms`;
this.wrapper.style.left = `${-this.activeIndex * this.changeWidth}px`;
_each(this.slides, item => {
item.style.width = `${this.changeWidth}px`;
});
this.autoFocus();
}
// 自動輪播
autoMove() {
if (this.activeIndex === this.slides.length - 1) {
this.activeIndex = 0;
this.change(true);
}
this.activeIndex++;
this.change();
}
// 實現輪播圖切換
change(now = false) {
//now 傳值是當即切換，不傳是有動畫切換
let {
wrapper,
speed,
activeIndex,
changeWidth,
on
} = this;
let isO = toType(on) === "object" ? true : false,
transitionStart = isO ? on.transitionStart : null,
transitionEnd = isO ? on.transitionEnd : null;
// 切換以前觸發的鉤子函數
!now && transitionStart ? transitionStart.call(this, this) : null;
// 若是傳了now 當即切換，則不須要有動畫
wrapper.style.transitionDuration = `${now ? 0 : speed}ms`;
wrapper.style.left = `${-activeIndex * changeWidth}px`;
if (now) {
// 若是當即切換我須要讓上面先渲染一次，利用讀寫分離；
wrapper.offsetWidth;
} else {
this.autoFocus();
}
// 切換以後觸發的鉤子函數
let fn = () => {
!now && transitionEnd ? transitionEnd.call(this, this) : null;
// 每一次都會從新監聽，因此監聽完須要把上一次監聽的移除掉
wrapper.removeEventListener('transitionend', fn);
};
wrapper.addEventListener('transitionend', fn);
}
// 實現焦點對齊
autoFocus() {
let {
paginationList,
activeIndex,
slides
} = this;
if (!paginationList) return;
activeIndex === slides.length - 1 ? activeIndex = 0 : null;
_each(paginationList, (item, index) => {
if (index === activeIndex) {
item.className = 'active';
return;
}
item.className = '';
});
}
}
function bannerPlugin(container, options = {}) {
let defaultParams = {
initialSlide: 0,
autoplay: 3000,
speed: 300,
pagination: {
el: '.xiaozhima-pagination',
clickable: true
},
navigation: {
nextEl: '.xiaozhima-arrow-next',
prevEl: '.xiaozhima-arrow-prev'
},
on: {
init() { },
transitionStart() { },
transitionEnd() { }
}
};
options = _assignDeep(defaultParams, options);
typeof container === "string" ? container = document.querySelector(container) : null;
if (!container || container.nodeType !== 1) {
throw new TypeError('container must be an element!');
}
return new Banner(container, options);
}
window.bannerPlugin = bannerPlugin;
})();
複製代碼
5、使用須知
- 必須設置的樣式
- 大容器的寬高
- 您本身的圖片
- JS的使用語法
- bannerPlugin(大容器，用戶需求的參數信息)
- container：容器標籤
- options：須要配置項
- 參數信息詳見 參數信息說明
- bannerPlugin(大容器，用戶需求的參數信息)
筆者也在前端這條路上不斷的學習和嘗試，文中內容有不對的地方，還請賜教，不勝感激🙏；
筆者想在掘金不斷成長，現階段目標升到3級，還望你們成全😄，不勝感激；
相關文章
- 1. 封裝一個本身的輪播圖組件（基於 Vue）
- 2. jQuery封裝輪播圖插件
- 3. 圖片輪播之插件封裝
- 4. jq封裝輪播圖插件
- 5. 本身封裝一個彈框插件
- 6. 本身封裝 vue 組件 和 插件
- 7. vue 封裝一個插件
- 8. vue封裝輪播組件1.0版本
- 9. JS的封裝（JS插件的封裝）
- 10. 封裝jQuery圖表插件
- 更多相關文章...
- • Eclipse 安裝插件 - Eclipse 教程
- • C# 封裝 - C#教程
- • IntelliJ IDEA安裝代碼格式化插件
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 封裝一個本身的輪播圖組件（基於 Vue）
- 2. jQuery封裝輪播圖插件
- 3. 圖片輪播之插件封裝
- 4. jq封裝輪播圖插件
- 5. 本身封裝一個彈框插件
- 6. 本身封裝 vue 組件 和 插件
- 7. vue 封裝一個插件
- 8. vue封裝輪播組件1.0版本
- 9. JS的封裝（JS插件的封裝）
- 10. 封裝jQuery圖表插件