本文主要是介绍Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
回想初学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);//设置图片数量}//动态设置活动图片及URLvar 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});}
});
这篇关于Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
