详解swiper轮播图的各种坑以及调用ajax实现轮播效果

傷城~ 2022-05-09 03:26 300阅读 0赞

Swiper常用于移动端网站的内容触摸滑动，对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码，轻轻松松的实现想要的效果，工作中最常用的就是轮播图了，下面我来说说如何写一个简单的轮播图：

1、首先需要下载一个swiper.css文件和一个swiper.js文件，到时候直接在页面中引入就行了（[https://www.swiper.com.cn/][https_www.swiper.com.cn] 在swiper官网去下载）。

2、下面我写一个简单的案例：

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>
    <script> 
    var mySwiper = new Swiper('.swiper-container', {
    	autoplay: 5000,//可选选项，自动滑动
    })
    </script>

这样的话就可以实现一个简单的轮播图了，注意：必须要用.swiper-container包裹住.swiper-wrapper 在swiper-slide中写上你想放置的内容，图片也行。js中初始化一个new Swiper();这个对象中可以放autoplay、loop等参数。具体的根据你得需求添加。

3、我重点讲一下swiper轮播图中遇到的几个坑：

（1）、如何自定义分页器的样式：

paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置，写在new Swiper()中。

![70][]如图这是我自定义的一个分页器

具体代码如下：

html代码：

<div class="swiper-pagination "></div>//这个里面放置你得分页器。

js代码：

css代码：（看我的注释）

/*包裹自定义分页器的div的位置等CSS样式*/
    .swiper-pagination-custom {
    	bottom: 10px;
    	left: 0;
    	width: 100%;
    }
    /*自定义分页器的样式*/
    .swiper-pagination-customs {
    	width: 12px;
    	height: 2px;
    	display: inline-block;
    	background: #000;
    	opacity: .3;
    	margin: 0 5px;
    }
    /*自定义分页器激活时的样式表现*/
    .swiper-pagination-customs-active {
    	opacity: 1;
    	background-color: #e63737;
    }

这样就完成了一个自定义分页器。

（2）解决swiper轮播图手动滑动之后就不自动滑动的问题：

原因在于swiper轮播图默认在手动滑动之后就关闭自动滑动，即autoplay参数关闭了，这个时候轮播图就显得不那么完美了，还好swiper中给我们提供了这个参数   autoplayDisableOnInteraction 说明：当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。所以我们需要加上：

autoplayDisableOnInteraction : false,//手动滑动后可以自动滑动，这样就完美了。

（3）设置轮播图播放的时间：

autoplay: 5000,//每个轮播图的播放时间为5秒

4、下面我把swiper调用ajax的完整代码写一下，大家可以参考：

效果图：

![70 1][]

html代码：

<div class="swiper-container" id="001">
    			<div class="swiper-wrapper"></div>
    			<div class="swiper-pagination "></div>
    		</div>

css代码：

/*-----------轮播图-------------*/
    
    .swiper-container {
    	clear: both;
    	width: 100%;
    	/*height: 370px;*/
    	min-height: 100px;
    	position: relative;
    	top: 0;
    }
    
    .swiper-slide {
    	/*margin-top: 67px;*/
    }
    
    .swiper-slide img {
    	width: 100%;
    	/*margin-top: 67px;*/
    }
    /*包裹自定义分页器的div的位置等CSS样式*/
    .swiper-pagination-custom {
    	bottom: 10px;
    	left: 0;
    	width: 100%;
    }
    /*自定义分页器的样式*/
    .swiper-pagination-customs {
    	width: 12px;
    	height: 2px;
    	display: inline-block;
    	background: #000;
    	opacity: .3;
    	margin: 0 5px;
    }
    /*自定义分页器激活时的样式表现*/
    .swiper-pagination-customs-active {
    	opacity: 1;
    	background-color: #e63737;
    }

js代码：

//----------------banner图轮播-------------
    	$.ajax({
    		type: "post",
    		dataType: 'json',
    		url:这里写接口地址
    		data: {
    			"ss": getCookie('openid')
    		},
    		success: function(data) {
    			console.log(data)
    			if(data.code == 1) { //请求成功
    				var con = data.result.banner; //
    				var len = con.length;
    				console.log(len + "我是轮播图的数量");
    				var sort = con.sort; //排序
    				//---------------循环图片（轮播图）-----
    				$.each(con, function(k, v) {
    					var src = con[k].img_url; //图片地址
    					var imgId = con[k].id; //图片id
    					var sort = con[k].sort; //排序
    					var imgurl = con[k].url; //商品id
    					console.log(imgurl);
    					var t = "<div class='swiper-slide'><a href='javascript:void(0)' imgId=" + imgId + " onclick='goDetails(" + imgId + "," + imgurl + ")'  imgurl=" + imgurl + " > <img src=" + src + "  imgurl=" + imgurl + "  /></a></div>";
    					$('.swiper-wrapper').append(t)
    
    				});
    			};
    			if(len <= 1) {
    				console.log("不能滑动");
    				//swiper插件实现轮播图
    				var mySwiper = new Swiper('.swiper-container', {
    					//autoplay: false, //可选选项，自动滑动
    					loop: false,
    					pagination: '.swiper-pagination',
    					paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
    					paginationCustomRender: function(swiper, current, total) {
    						var customPaginationHtml = "";
    						for(var i = 0; i < total; i++) {
    							//判断哪个分页器此刻应该被激活  
    							if(i == (current - 1)) {
    								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
    							} else {
    								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
    							}
    						}
    						return customPaginationHtml;
    					}
    				});
    			} else {
    				console.log("可以滑动");
    				//swiper插件实现轮播图
    				var mySwiper = new Swiper('.swiper-container', {
    					autoplay: 5000, //可选选项，自动滑动
    					loop: true,
    					pagination: '.swiper-pagination',
    					autoplayDisableOnInteraction : false,//手动滑动后可以自动滑动
    					paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
    					paginationCustomRender: function(swiper, current, total) {
    						var customPaginationHtml = "";
    						for(var i = 0; i < total; i++) {
    							//判断哪个分页器此刻应该被激活  
    							if(i == (current - 1)) {
    								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
    							} else {
    								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
    							}
    						}
    						return customPaginationHtml;
    					}
    				});
    			}
    		}
    	});

[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[70]: /images/20220509/345fd890540340ef900e9f32b361fe03.png
[70 1]: /images/20220509/879cbac1c9ae438981ef72a5131d8adc.png