Swiper（官網(wǎng)：https://www.swiper.com.cn）是純javascript打造的滑動特效插件，面向手機(jī)亡鼠、平板電腦等移動終端。
- Swiper特性
- 常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
- 擁有靈活的progress
- 在Swiper上加上動畫，制作微展示等等
總得來說Swiper是架構(gòu)移動端網(wǎng)站的重要選擇。
介紹了這款插件的強(qiáng)大之處后猛拴，接下來就是我們用這個插件具體做了什么事情：
- 需求
- 要求banner圖輪播（PS：動態(tài)的添加或減少圖片，比如：只有一張圖片時蚀狰，banner不輪播愉昆，大于一張圖片時才輪播）
- 分析需求
- 把圖片路徑存放在數(shù)組中，循環(huán)遍歷取出數(shù)組中元素然后追加到banner圖指定的位置麻蹋，再加上Class屬性跛溉。。完美
- 代碼實現(xiàn)
- 頁面html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta name='keywords' content=''/>
<meta name='description' content=''/>
<link rel='stylesheet' href='css/layout.css'>
<link rel='stylesheet' href='css/swiper.css'>
<title>test</title>
</head>
<body>
<div class="main">
<div class="swiper-container">
<!-- 用于計算有幾張照片 -->
<input type="hidden" id="imgNumber" value=""/>
<div class="swiper-wrapper" id="topSlides">
<!--<div class="swiper-slide"><img src="images/banner.png"></div>
<div class="swiper-slide"><img src="images/banner.png"></div>-->
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination swiper-pagination-bullets"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
<h6><a >Swiper4.x使用方法</a></h6>
</div>
</body>
</html>
<script src="js/jquery.1.11.1.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiperController.js"></script>
<script>
$(function(){
var swiper = new Swiper('.swiper-container', {
//分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
/*scrollbar: {
el: '.swiper-scrollbar',
},*/
autoplay:{
stopOnLastSlide:false
}
});
//獲取隱藏的input標(biāo)簽中的值
var number = $("#imgNumber").val();
if(number == 1) {
//一張圖片則隱藏錨節(jié)點
$(".swiper-pagination-bullets > span").css("display","none");
}
});
</script>
2.JavaScript代碼（swiperController.js）
//圖片滑塊控制器
$(function() {
// 設(shè)置圖片
function setImages(){
// var nowHtml = $(".swiper-wrapper").html();
var newHtml = "";
for (var k = 0; k < images.length; k++) {
newHtml += images[k];
}
$("#topSlides").html(newHtml);
$("#imgNumber").val(images.length);//設(shè)置圖片數(shù)量
}
//動態(tài)設(shè)置活動圖片及URL
var images = [
'<div class="swiper-slide"><img src="images/banner.png"></div>',
'<div class="swiper-slide"><img src="images/banner.png"></div>',
'<div class="swiper-slide"><img src="images/banner.png"></div>'
];
setImages(); //如需替換默認(rèn)圖片，調(diào)用此方法
var imgNumber = $("#imgNumber").val();// 獲取滑塊當(dāng)前圖片數(shù)量
if (imgNumber > 1) {
// 滾動效果
var swiperwflb = new Swiper('.no_lb', {
autoplay : 3000,
pagination : '.dian',
paginationClickable : true,
autoplayDisableOnInteraction : false,
// 若只有一個的時候不讓左右切換芳室，就將loop的值變?yōu)閒alse,若多個需要循環(huán)值為：true,
loop : true
});
} else {
var swiperwflb = new Swiper('.no_lb', {
autoplay : 3000,
pagination : '.dian',
paginationClickable : true,
autoplayDisableOnInteraction : false,
// 若只有一個的時候不讓左右切換专肪，就將loop的值變?yōu)閒alse,若多個需要循環(huán)值為：true,
loop : false
});
}
});
