輪播圖在網站中使用的比例非常之高，自己手寫一個輪播比較費時間，而使用swiper（swiper3）輪播插件能很方便做出圖片輪播效果，兼容性好，而且還支持響應式輪播。在項目引入swiper.jquery.min.js和swiper.jquery.min.css文件，html如圖：
js如圖：
如此一個簡單的輪播圖就制作完成了，當然一般網站的輪播圖不會如此簡單，這里就需用到swiper的api了，js如圖：
這里面包含的自動、循環、響應式、控制按鈕、顯示個數等功能的輪播，當然swiper的功能不止這些，還有很多的api實現的功能。
更多功能api：
onslidechangeend(swiper)：回調函數，swiper從一個slide過渡到另一個slide結束時執行?？山邮躶wiper實例作為參數。
effect：slide的切換效果，默認為"slide"（位移切換），可設置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。
paginationtype：分頁器樣式類型，可選：‘bullets’ 圓點（默認）、‘fraction’ 分式、‘progress’ 進度條、‘custom’ 自定義。
lazyloading：設為true開啟圖片延遲加載，使preloadimages無效。
需要將圖片img標簽的src改寫成data-src，并且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background。當設置了slidesperview:'auto' 或者 slidesperview > 1，還需要開啟watchslidesvisibility。
controlby：設定swiper相互控制時的控制方式。當兩個swiper的slide數量不一致時可用。默認為'slide'，自身切換一個slide時，被控制方也切換一個slide。
可選：'container'，按自身slide在container中的位置比例進行控制。
observer：啟動動態檢查器(ob/觀眾/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。默認false，不開啟，可以使用update()方法更新。
ontransitionend(swiper):回調函數，過渡結束時觸發，接收swiper實例作為參數。
如果你使用setwrappertranslate和setwrappertransition來設定wrapper移動，這個函數不會觸發，你可以使用原生transitionend事件。


網絡優化推廣有什么優勢
黑帽網站排名優化一直不被搜索引擎所認可的慣用方法
廣州網站建設哪家公司比較好，哪家專業？
關于營銷型網站建設幾個常見的問題
在網站設計和ppt設計的應用有哪些高級的字體？(網站設計與制作)
外貿老司機的八個關鍵詞帶你飛
服務器日志對seo站長有何作用？
關于如何布局網站內鏈問題的討論