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>
  1. 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
		});
	}
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值