回想初学JavaScript时,写一个图片的轮播;那是写得惨不忍睹。现在我们再去写图片轮播的话;用Swiper(官网:https://www.swiper.com.cn)分分钟就弄好了。
但是老大又提新的需求:图片只有一张时就不进行轮播,多张才进行轮播?
- 分析需求
1. 把图片路径存放在数组中, 循环遍历数组;取出追加到页面 - 具体实现
1. 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>
- 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
});
}
});