簡介：本期課程帶領(lǐng)大家使用JS原生代碼封裝圖片畫廊插件，通過本例子把前端的知識(shí)做一次綜合展示，全面考驗(yàn)前端工程師綜合設(shè)計(jì)、開發(fā)能力。站在產(chǎn)品的角度寫代碼，站在代碼的角度映射產(chǎn)品本質(zhì)。快來加入我們的課程吧，讓我為前端的明天，貢獻(xiàn)自己的綿薄之力！
第1章 課程準(zhǔn)備
示例演示和課程概況，本章節(jié)帶領(lǐng)大家看下圖片畫廊的演示效果，以及本期課程的前期知識(shí)儲(chǔ)備和最終你能學(xué)到什么。
第2章 DOM結(jié)構(gòu)搭建和渲染
本章節(jié)以演示效果為例，搭建DOM并寫上CSS靜態(tài)展示效果，最后通過JS 渲染到頁面。
第3章 案例分析及 JS 代碼開發(fā)
本章節(jié)帶領(lǐng)大家一起分析下完成圖片畫廊的前提要點(diǎn)，頁面和數(shù)據(jù)該如何組織獲取以及初步交互行為，對(duì)圖片的尺寸獲取，過度動(dòng)畫的開發(fā)。
- 視頻： 3-1 DOM結(jié)構(gòu)渲染 (10:30)
- 視頻： 3-2 元素在頁面中的分組和其他必要參數(shù)詳解 (09:52)
- 視頻： 3-3 同組別數(shù)據(jù)獲取 (20:29)
- 視頻： 3-4 初始化彈出框 (22:25)
- 視頻： 3-5 初始化的時(shí)候上下切換是否添加標(biāo)識(shí) (14:06)
- 視頻： 3-6 獲取圖片尺寸 (09:38)
- 視頻： 3-7 根據(jù)圖片寬高和視口比例設(shè)置彈出層尺寸并過渡動(dòng)畫 (15:47)
- 視頻： 3-8 關(guān)閉彈出層和遮罩，清除上一次圖片尺寸 (05:15)
- 視頻： 3-9 上下切換按鈕功能（1） (05:02)
- 視頻： 3-10 上下切換按鈕功能（2） (17:36)