Swiper（官网：https://www.swiper.com.cn）是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
- Swiper特性
- 常用于移动端网站的内容触摸滑动
- 拥有灵活的progress
- 在Swiper上加上动画，制作微展示等等
总得来说Swiper是架构移动端网站的重要选择。
介绍了这款插件的强大之处后，接下来就是我们用这个插件具体做了什么事情：
- 需求
- 要求banner图轮播（PS：动态的添加或减少图片，比如：只有一张图片时，banner不轮播，大于一张图片时才轮播）
- 分析需求
- 把图片路径存放在数组中，循环遍历取出数组中元素然后追加到banner图指定的位置，再加上Class属性。。完美
- 代码实现
- 页面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>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
<h6><a href="https://www.swiper.com.cn/usage/index.html">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',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
/*scrollbar: {
el: '.swiper-scrollbar',
},*/
autoplay:{
stopOnLastSlide:false
}
});
//获取隐藏的input标签中的值
var number = $("#imgNumber").val();
if(number == 1) {
//一张图片则隐藏锚节点
$(".swiper-pagination-bullets > span").css("display","none");
}
});
</script>
2.JavaScript代码（swiperController.js）
//图片滑块控制器
$(function() {
// 设置图片
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);//设置图片数量
}
//动态设置活动图片及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(); //如需替换默认图片，调用此方法
var imgNumber = $("#imgNumber").val();// 获取滑块当前图片数量
if (imgNumber > 1) {
// 滚动效果
var swiperwflb = new Swiper('.no_lb', {
autoplay : 3000,
pagination : '.dian',
paginationClickable : true,
autoplayDisableOnInteraction : false,
// 若只有一个的时候不让左右切换，就将loop的值变为false,若多个需要循环值为：true,
loop : true
});
} else {
var swiperwflb = new Swiper('.no_lb', {
autoplay : 3000,
pagination : '.dian',
paginationClickable : true,
autoplayDisableOnInteraction : false,
// 若只有一个的时候不让左右切换，就将loop的值变为false,若多个需要循环值为：true,
loop : false
});
}
});
