簡(jiǎn)介：你還在網(wǎng)上下載各種插件嗎？作為前端工程師，你是否還不了解插件怎么封裝呢，快來(lái)加入我們的課程吧，讓我們一起來(lái)學(xué)習(xí) JS 組件的封裝。本課程通過(guò)制作一個(gè)圖片幻燈片切換效果，從而引入怎么樣一步一步把代碼封裝成組件的方法。
第1章 結(jié)構(gòu)搭建
本章節(jié)對(duì)代碼效果進(jìn)行了演示，及完成網(wǎng)頁(yè)的 DOM 結(jié)構(gòu)的搭建工作。
第2章 JS交互
本章節(jié)講解插件封裝要素，初始化基本幻燈片展示邏輯，人機(jī)交互行為、最終實(shí)現(xiàn)一個(gè)插件。
- 視頻： 2-1 基本JS、JQ開(kāi)發(fā)結(jié)構(gòu)搭建 (11:04)
- 視頻： 2-2 需求分析和配置參數(shù)設(shè)置 (15:36)
- 視頻： 2-3 默認(rèn)配置參數(shù)設(shè)置及擴(kuò)展 (10:11)
- 視頻： 2-4 設(shè)置基本參數(shù)值 (12:17)
- 視頻： 2-5 按鈕和第一幀層級(jí)關(guān)系設(shè)置 (07:01)
- 視頻： 2-6 右邊幀的位置關(guān)系設(shè)置（1） (09:46)
- 視頻： 2-7 右邊幀的位置關(guān)系設(shè)置（2） (18:24)
- 視頻： 2-8 左邊幀的散列關(guān)系 (10:20)
- 視頻： 2-9 幀的展示方式 (06:52)
- 視頻： 2-10 左旋轉(zhuǎn)所有幀 (11:33)
- 視頻： 2-11 右旋轉(zhuǎn)所有幀 (10:37)
第3章 代碼bug處理及優(yōu)化
本章節(jié)對(duì)“快速點(diǎn)擊多次切換時(shí)的bug”進(jìn)行了處理，及完善了組件自動(dòng)播放功能，最后簡(jiǎn)單介紹了“偶數(shù)個(gè)圖片”的處理方案。