JavaScript中很是強大的Swiper

  剛開始學習javaScript的時候,作輪播圖(好比手機淘寶首頁的廣告位置)是使用html和css結合js的for語句、傳參等知識寫出來的。但學到js事件時,其實用Swiper更加好寫,Swiper的功能更增強大!我的感受自學也不會太難,能夠參考一下本人的見解,剛開始學習swiper就很是喜歡它,如有錯誤的地方請指出,謝謝!javascript

1、什麼是Swiper?css

  Swiper經常使用於移動端網站的內容觸摸滑動,是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端,能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果,開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!(此介紹複製swiper中文網的解釋)html

2、Swiper使用方法java

  打開Swiper的中文網,網址:http://www.swiper.com.cn/jquery

  一、首先,要加載插件,須要用到的文件有swiper.min.jsswiper.min.css文件。若你的頁面加載了jQuery.js或者zepto.js,你能夠選擇使用更輕便的swiper.jquery.min.js。下載網址:http://www.swiper.com.cn/download/index.htmlapi

  二、佈局,寫HTML這一部分的內容。架構

  三、在<title>標籤下面引入剛纔下載的文件,並寫它的樣式,經過<style>...</style>函數

  四、而後就經過<script>...</script>在裏面實現你想要的效果吧。我的以爲Swiper的個別函數都是比較長的,如:autoplayDisableOnInteraction,那寫的時候能夠直接在網頁複製過來。佈局

3、感覺Swiper的強大功能學習

  打開這個網址:http://www.swiper.com.cn/api/index.html,在最左邊,有Swiper3.x的所有配置選項、方法、函數,在右邊有參數、效果演示、使用方法示例。能夠在這個網頁上玩玩,看看具體實現的效果,同時,能夠看它的寫法,結合多個功能一塊兒寫,把一個輪播圖寫出來,你會愛上它很是強大的功能!

相關文章
相關標籤/搜索