-HTML5移動前端開發(fā)基礎(chǔ)與實戰(zhàn)（第2版）（微課版）-PPT 模塊5

模塊5

Swiper插件Swiper是純JavaScript打造的滑動特效插件，可面向PC、手機、平板電腦等終端。SwiperAnimate是用于在Swiper內(nèi)快速制作CSS3動畫效果的小插件。本模塊講解Swiper、SwiperAnimate插件的使用方法，并進行實戰(zhàn)應(yīng)用，同時希望能夠通過對該插件的學(xué)習(xí)掌握相應(yīng)的插件使用方法，進一步根據(jù)項目或公司的需要學(xué)習(xí)并使用其他插件。HTML5移動前端開發(fā)基礎(chǔ)與實戰(zhàn)（微課版）掌握Swiper插件的使用方法。知識目標(biāo)1熟練使用Swiper插件。職業(yè)目標(biāo)2熟練使用SwiperAnimate實現(xiàn)場景動畫。3通過對Swiper插件的學(xué)習(xí)提高自學(xué)能力，能根據(jù)項目或公司的需要學(xué)習(xí)并使用其他插件。培養(yǎng)團隊協(xié)同工作能力。培養(yǎng)求真務(wù)實的敬業(yè)精神。素質(zhì)目標(biāo)Swiper可以方便地實現(xiàn)輪播效果。Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩(wěn)定、使用簡單、功能強大，是架構(gòu)移動終端網(wǎng)站的不錯選擇。5.1Swiper實現(xiàn)輪播5.1.1Swiper使用步驟加載JavaScript插件。加載需要的CSS文件。編寫HTML內(nèi)容。函數(shù)調(diào)用。Swiper的使用步驟大致如下。5.1.2Swiper演練圖片輪播基本演練。演練5.1顯示分頁器的指示點，單擊分頁器的指示點可切換畫面。演練5.2添加導(dǎo)航按鈕、切換效果控制、自動播放控制。演練5.3縮略圖效果。演練5.4帶輪播圖的商品詳情頁面。演練5.5SwiperAnimate是用于在Swiper內(nèi)快速制作CSS3動畫效果的小插件。常用于制造場景動畫。5.1SwiperAnimate實現(xiàn)動畫5.2.1SwiperAnimate入門SwiperAnimate使用步驟如下。最基本的SwiperAnimate應(yīng)用。演練5.6加載swiper.animate.min.js和animate.min.css。初始化時隱藏元素并在需要的時刻開始動畫。在需要運動的元素上面增加類名ani，選擇動畫效果。5.2.2SwiperAnimate演練用SwiperAnimate設(shè)計一份邀請函，該邀請函包括三個場景。場景之間可豎直方向滑動切換。使用SwiperAnimate設(shè)計邀請函。演練5.7思考熟練掌握如何使用Swiper設(shè)計輪播圖了嗎？用Swiper、SwiperAnimate編寫一個帶動畫的場景頁面。自行搜索市面上還有哪