swiper結合ajax的輪播圖

標籤：ges   span   font   按鈕   檔案   app   移動   時間   文字   

Swiper

　　是什麼：是純JavaScript打造的滑動特效外掛程式，能夠實現觸屏焦點圖、觸屏tab切換、觸屏多圖切換等常用效果。

　　　　　　開源、免費、穩定、應用廣泛。

　　這就是swiper簡單的介紹，由於是結合ajax使用，所以要先定義json檔案

　　json:

　　　　

　　定義好json檔案後，在HTML頁面中簡單布局，如：

　　　　

　　　　*swiper-container代表swiper的容器

　　　　<div class="swiper-container">

　　　　　　*swiper-wrapper 代表觸控的對象

　　　　　　<div class="swiper-wrapper">

　　　　　　　　*swiper-slide 代表切換的滑塊，可包含文字、圖片等
　　　　　　　　<div class = "swiper-slide"></div>
　　　　　　</div>

　　　　　　*swiper-pagination 分頁器
　　　　　　<div class="swiper-pagination"></div>

　　　　　　*swiper-button-prev 導覽按鈕，prev代表上一頁、next代表下一頁
　　　　　　<div class="swiper-button-prev"></div>
　　　　　　<div class="swiper-button-next"></div>
　　　　</div>

　　　　因為swiper是移動端滑動外掛程式，所以在HTML頁面中要寫<meta>標籤，要引入相關swiper的css，js等檔案；

　　　　然後，就需要用ajax擷取json檔案並擷取到頁面上：

　　　　　如：

　　　　　　

　　　　在onreadystatechange這個方法中是動態添加swiper-slide滑塊；

　　　　添加好之後，還需要用swiper的方法讓他動起來；

　　　　　　var mySwiper = new Swiper (‘.swiper-container‘, {

　　　　　　　　*頁面滑動一次的時間
　　　　　　　　autoplay:2000,
　　　　　　　　*操作後是否繼續滾動
　　　　　　　　
　　　　　　　　*是否迴圈
　　　　　　　　loop: true,
　　　　　　　　*如果需要分頁器
　　　　　　　　pagination: ‘.swiper-pagination‘,
　　　　　　　　*點擊小圓點是否可以切換頁面
　　　　　　　　paginationClickable:true,
　　　　　　　　*如果需要前進後退按鈕
　　　　　　　　nextButton: ‘.swiper-button-next‘,
　　　　　　　　prevButton: ‘.swiper-button-prev‘,
　　　　　　})

　　　　這樣就完成了一個結合ajax渲染頁面的輪播圖，如果有些不標準的請評論！！！！！！

swiper結合ajax的輪播圖