当前位置：首页 > news >正文

Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播

news 来源：原创 2024/5/4 3:13:02

回想初学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
		});
	}
});