之前大家都寫過輪播圖吧，相信在寫輪播圖的過程中也因為當中的某些細節煩惱過吧，接下來我給大家講述一個方便快捷的輪播圖吧！
Swiper常用於移動端網站的內容觸摸滑動
1.第一步先引入css---swiper.css插件和JQ---swiper.js 插件,
然后呢就開始寫輪播圖了
<div class="swiper-container">--首先定義一個容器 <div class="swiper-wrapper"> <div class="swiper-slide"><img src="" /></div> --添加圖片 <div class="swiper-slide"><img src="" /></div> <div class="swiper-slide"><img src="" /></div> </div> <div class="swiper-pagination"></div>--小圓點分頁器 <div class="swiper-button-prev"></div>--上一頁 <div class="swiper-button-next"></div>--下一頁 </div>
如果想讓它動起來，那就繼續來寫js吧
var mySwiper = new Swiper(".swiper-container",{ autoplay:1000,--每秒中輪播一次 loop:true,--可以讓圖片循環輪播 autoplayDisableOnInteraction:false,--在點擊之后可以繼續實現輪播 pagination:".swiper-pagination",--讓小圓點顯示 paginationClickable:true,--實現小圓點點擊 prevButton:".swiper-button-prev",--實現上一頁的點擊 nextButton:".swiper-button-next",--實現下一頁的點擊
effect:"flip"--可以實現3D效果的輪播 })
Swiper輪播的也有它的好處：
1.Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
2.Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
3.Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
同時也有不足之處：(使用Swiper輪播插件ajax請求加載圖片時，無法滑動的問題)
因為banner圖是動態創建的，在插件開始初始化時，文檔流中沒用圖片，所以沒有創建相應寬度，通過調整js加載順序，問題還是沒有解決。
最后找到swiper插件 api 有屬性是可以根據內容變動，自動初始化插件的，添加observer：true后問題解決！
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper
})
Swiper擁有豐富的API接口。（不過關於中文文檔不多，沒找着。）能夠讓開發者生成個人獨有的分頁器（pagination），上下滑塊的按鈕
以及4個回調函數：1.onTouchStart
2.onTouchMove
3.onTouchEnd
4.onSlideSwitch。
以上內容是我個人總結，希望對各位有所幫助！