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

系统管理员 2022-05-11 02:58 312阅读 0赞

回想初学JavaScript时，写一个图片的轮播；那是写得惨不忍睹。现在我们再去写图片轮播的话；用Swiper（官网：[https://www.swiper.com.cn][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>
    				
    				<div class="swiper-pagination swiper-pagination-bullets"></div>	
    				
    				
    				<div class="swiper-button-prev"></div>
    				<div class="swiper-button-next"></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
    		});
    	}
    });

[https_www.swiper.com.cn]: https://www.swiper.com.cn