這是一個(gè)視頻展示效果，希望使讀者對(duì)jquery的事件和動(dòng)畫(huà)效果有一個(gè)更為全面的了解。視頻的展示效果如圖：
2018-07-02_010609.png
用戶可以單擊左上角的左右箭頭边灭，來(lái)控制視頻展示的左右滾動(dòng)，當(dāng)單擊向右箭頭時(shí)健盒，下面的展示視頻會(huì)向左滾動(dòng)隱藏绒瘦，同時(shí)新的視頻展示會(huì)以滾動(dòng)方式顯示出來(lái)称簿。注意：當(dāng)視頻展示內(nèi)容處于最后一個(gè)版面的時(shí)候，如果再向后惰帽，則應(yīng)該跳轉(zhuǎn)到第一個(gè)版面憨降；當(dāng)視頻展示內(nèi)容處于第一個(gè)版面時(shí)，如果再向前该酗，就應(yīng)該跳轉(zhuǎn)到最后一個(gè)版面授药；左上角的箭頭旁邊的藍(lán)色圓點(diǎn)，應(yīng)該與動(dòng)畫(huà)一起切換呜魄，代表當(dāng)前所處的版面悔叽。首先要把頁(yè)面結(jié)構(gòu)設(shè)計(jì)好，html部分
2018-07-02_010805.png
下面就是16個(gè)li爵嗅，存放圖片的其次就是一些css樣式：
2018-07-02_010834.png
2018-07-02_010846.png
2018-07-02_010902.png
2018-07-02_010913.png
2018-07-02_010934.png
接下來(lái)就是按照需求編寫(xiě)腳本娇澎，來(lái)控制頁(yè)面的交互首先通過(guò)jquery選擇器獲取向后的箭頭的元素，然后為它綁定點(diǎn)擊事件睹晒。因?yàn)椤跋蛴业募^”和“視頻展示區(qū)域”在同一個(gè)祖先元素下九火，所以可以通過(guò)“向右箭頭”來(lái)找到“視頻展示區(qū)域”，首先獲取“向右箭頭”的祖先元素册招，然后在祖先元素下尋找“視頻展示區(qū)域”找到相應(yīng)的元素后，就可以給相應(yīng)的元素添加動(dòng)畫(huà)效果了勒极，可以通過(guò)是掰，animate（）方法控制視頻展示區(qū)域，的left樣式屬性的值來(lái)達(dá)到動(dòng)畫(huà)效果辱匿，很容易就可以獲取left的值键痛，left的值就等于每個(gè)版面的寬度使用width（）獲取每個(gè)版面的寬度jquery代碼：點(diǎn)擊向左箭頭是的點(diǎn)擊事件：
2018-07-02_011113.png
點(diǎn)擊向右箭頭的點(diǎn)擊事件，和向左的點(diǎn)擊事件差不多匾七，只是判斷時(shí)的不同
![]()
2018-07-02_011207.png
2018-07-02_011207.png
注意：javascript的動(dòng)畫(huà)跟css密不可分絮短，在上例中，為元素設(shè)置合適的css屬性也至關(guān)重要昨忆，比如丁频，我們?yōu)椤皏_content”設(shè)置了overflow：hidden position：relative 而后為它的子元素設(shè)置了postion：absolute
