标签：rev 循环 代码 使用 rip nbsp ott back red
写项目的时候，使用的是swiper插件呈现的效果是一个swiper要实现两个分页器，下面就来总结一下
以swiper3为例来写，在页面中引入jquery、swiper.min.js和swiper.min.css文件。
HTML结构：
<div class="banner swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1
</div>
<div class="swiper-slide red-slide">
slider2
</div>
<div class="swiper-slide orange-slide">
slider3
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 自定义分页器 -->
<div class="swiper-num">
<span class="active"></span>/
<span class="total"></span>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
.swiper-num这一块是需要自己定义的。
CSS样式：
.banner .swiper-pagination-bullets{bottom: 0;}
.banner .swiper-pagination-bullets{bottom: 0;}
.swiper-num {position: absolute;width: 165px;left:10%;bottom: 0;z-index: 2;}
.swiper-num .active {display: inline-block;}
.swiper-num span {font-size: 32px;}
.swiper-num .total {display: inline-block;}
.banner .swiper-slide{line-height: 500px;text-align: center;font-size: 50px;}
.blue-slide {background: #4390EE;color: #fff;}
.red-slide {background: #CA4040;color: #fff}
.orange-slide {background: #FF8604;color: #fff;}
.gray-slide {background: gray;color: #fff;}
js代码：
var mySwiper = new Swiper (‘.banner‘, {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: ‘.swiper-pagination‘,
// 如果需要前进后退按钮
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
onInit: function(swiper){//Swiper初始化了
var total = "0"+swiper.bullets.length;
var active =swiper.activeIndex;
$(".swiper-num .active").text("0"+active);
$(".swiper-num .total").text(total);
},
onSlideChangeEnd: function(swiper){
var active =swiper.realIndex +1;
$(".swiper-num .active").text("0"+active);
}
onInit 回调函数，初始化后执行。
swiper.bullets.length：是获取分页器swiper的分页器个数长度。
activeIndex：当前swiper-slide的索引。
onSlideChangeEnd(swiper)：回调函数，swiper从一个slide过渡到另一个slide结束时执行。
swiper.realIndex：当前活动的swiper-slide的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
以swiper4为例来写：
swiper4和swiper3的HTML结构一样，css样式也一样，使用的版本是swiper4.5
JS代码：
var mySwiper = new Swiper (‘.banner‘, {
loop: true, // 循环模式选项
loopedSlides:1,//如果是1的话不写也行
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination‘,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
},
on:{
init:function(){
console.log(this);
var total=this.slides.length-2;
console.log(total);
$(‘.total‘).text(‘0‘+total);
this.emit(‘transitionEnd‘);
},
transitionEnd:function(){
console.log(this.realIndex);
var index=this.realIndex+1;
$(".active").text("0"+index);
}
}
})
this.slides.length的长度为5，img的长度为3，所以减掉2，但是减去的前提是loopedSlides:1，的取值。
loopedSlides 在loop模式下使用slidesPerview:‘auto‘，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
this.realIndex是从0开始的。所以要在此基础上加1。
每天学习一点点，让自己进步一点点。
标签：rev 循环 代码 使用 rip nbsp ott back red
原文地址：https://www.cnblogs.com/ling-nl/p/10935749.html
