詳解swiper輪播圖的各種坑以及呼叫ajax實現輪播效果
阿新 • • 發佈：2018-11-09
Swiper常用於移動端網站的內容觸控滑動，對於前端開發人員來說使用swiper可以提高工作效率，不再需要寫太多的程式碼，輕輕鬆鬆的實現想要的效果，工作中最常用的就是輪播圖了，下面我來說說如何寫一個簡單的輪播圖：
1、首先需要下載一個swiper.css檔案和一個swiper.js檔案，到時候直接在頁面中引入就行了（https://www.swiper.com.cn/ 在swiper官網去下載）。
2、下面我寫一個簡單的案例：
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> </div> <script> var mySwiper = new Swiper('.swiper-container', { autoplay: 5000,//可選選項，自動滑動 }) </script>
這樣的話就可以實現一個簡單的輪播圖了，注意：必須要用.swiper-container包裹住.swiper-wrapper 在swiper-slide中寫上你想放置的內容，圖片也行。js中初始化一個new Swiper();這個物件中可以放autoplay、loop等引數。具體的根據你得需求新增。
3、我重點講一下swiper輪播圖中遇到的幾個坑：
（1）、如何自定義分頁器的樣式：
paginationType: 'custom', //這裡分頁器型別必須設定為custom,即採用使用者自定義配置，寫在new Swiper()中。
具體程式碼如下：
html程式碼：
<div class="swiper-pagination "></div>//這個裡面放置你得分頁器。
<div class="swiper-container" id="001">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination "></div>
</div>js程式碼：
var mySwiper = new Swiper('.swiper-container', { autoplay: 5000, //可選選項，自動滑動 loop: true, pagination: '.swiper-pagination', autoplayDisableOnInteraction : false,//手動滑動後可以自動滑動 paginationType: 'custom', //這裡分頁器型別必須設定為custom,即採用使用者自定義配置 paginationCustomRender: function(swiper, current, total) { var customPaginationHtml = ""; for(var i = 0; i < total; i++) { //判斷哪個分頁器此刻應該被啟用 if(i == (current - 1)) { customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>'; } else { customPaginationHtml += '<span class="swiper-pagination-customs"></span>'; } } return customPaginationHtml; } });
css程式碼：（看我的註釋）
/*包裹自定義分頁器的div的位置等CSS樣式*/
.swiper-pagination-custom {
bottom: 10px;
left: 0;
width: 100%;
}
/*自定義分頁器的樣式*/
.swiper-pagination-customs {
width: 12px;
height: 2px;
display: inline-block;
background: #000;
opacity: .3;
margin: 0 5px;
}
/*自定義分頁器啟用時的樣式表現*/
.swiper-pagination-customs-active {
opacity: 1;
background-color: #e63737;
}這樣就完成了一個自定義分頁器。
（2）解決swiper輪播圖手動滑動之後就不自動滑動的問題：
原因在於swiper輪播圖預設在手動滑動之後就關閉自動滑動，即autoplay引數關閉了，這個時候輪播圖就顯得不那麼完美了，還好swiper中給我們提供了這個引數 autoplayDisableOnInteraction 說明：當設定為false時，使用者操作之後（swipes,arrow以及pagination 點選）autoplay不會被禁掉，使用者操作之後每次都會重新啟動autoplay。所以我們需要加上：
autoplayDisableOnInteraction : false,//手動滑動後可以自動滑動，這樣就完美了。
（3）設定輪播圖播放的時間：
autoplay: 5000,//每個輪播圖的播放時間為5秒
4、下面我把swiper呼叫ajax的完整程式碼寫一下，大家可以參考：
效果圖：
html程式碼：
<!------------輪播圖------------->
<div class="swiper-container" id="001">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination "></div>
</div>css程式碼：
/*-----------輪播圖-------------*/
.swiper-container {
clear: both;
width: 100%;
/*height: 370px;*/
min-height: 100px;
position: relative;
top: 0;
}
.swiper-slide {
/*margin-top: 67px;*/
}
.swiper-slide img {
width: 100%;
/*margin-top: 67px;*/
}
/*包裹自定義分頁器的div的位置等CSS樣式*/
.swiper-pagination-custom {
bottom: 10px;
left: 0;
width: 100%;
}
/*自定義分頁器的樣式*/
.swiper-pagination-customs {
width: 12px;
height: 2px;
display: inline-block;
background: #000;
opacity: .3;
margin: 0 5px;
}
/*自定義分頁器啟用時的樣式表現*/
.swiper-pagination-customs-active {
opacity: 1;
background-color: #e63737;
}
js程式碼：
//----------------banner圖輪播-------------
$.ajax({
type: "post",
dataType: 'json',
url:這裡寫介面地址
data: {
"ss": getCookie('openid')
},
success: function(data) {
console.log(data)
if(data.code == 1) { //請求成功
var con = data.result.banner; //
var len = con.length;
console.log(len + "我是輪播圖的數量");
var sort = con.sort; //排序
//---------------迴圈圖片（輪播圖）-----
$.each(con, function(k, v) {
var src = con[k].img_url; //圖片地址
var imgId = con[k].id; //圖片id
var sort = con[k].sort; //排序
var imgurl = con[k].url; //商品id
console.log(imgurl);
var t = "<div class='swiper-slide'><a href='javascript:void(0)' imgId=" + imgId + " onclick='goDetails(" + imgId + "," + imgurl + ")' imgurl=" + imgurl + " > <img src=" + src + " imgurl=" + imgurl + " /></a></div>";
$('.swiper-wrapper').append(t)
});
};
if(len <= 1) {
console.log("不能滑動");
//swiper外掛實現輪播圖
var mySwiper = new Swiper('.swiper-container', {
//autoplay: false, //可選選項，自動滑動
loop: false,
pagination: '.swiper-pagination',
paginationType: 'custom', //這裡分頁器型別必須設定為custom,即採用使用者自定義配置
paginationCustomRender: function(swiper, current, total) {
var customPaginationHtml = "";
for(var i = 0; i < total; i++) {
//判斷哪個分頁器此刻應該被啟用
if(i == (current - 1)) {
customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
} else {
customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
}
}
return customPaginationHtml;
}
});
} else {
console.log("可以滑動");
//swiper外掛實現輪播圖
var mySwiper = new Swiper('.swiper-container', {
autoplay: 5000, //可選選項，自動滑動
loop: true,
pagination: '.swiper-pagination',
autoplayDisableOnInteraction : false,//手動滑動後可以自動滑動
paginationType: 'custom', //這裡分頁器型別必須設定為custom,即採用使用者自定義配置
paginationCustomRender: function(swiper, current, total) {
var customPaginationHtml = "";
for(var i = 0; i < total; i++) {
//判斷哪個分頁器此刻應該被啟用
if(i == (current - 1)) {
customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
} else {
customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
}
}
return customPaginationHtml;
}
});
}
}
});