swiper无缝滚动轮播图下标索引值重复问题解决方案
在使用swiper插件写无缝滚动的轮播图的时候，如果需要获取轮播图的索引值，经常会遇到在循环播放的时候，第一个索引值会出现两次。
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper无缝滚动轮播图title>
<script src="js/one.js">script>
<link rel="stylesheet" href="css/commen.css">
<link rel="stylesheet" href="css/memberIntro1.css">
<script src="js/jquery.min.js">script>
<link rel="stylesheet" href="fullpage/jquery.fullpage.css">
<script src="fullpage/jquery.fullpage.js">script>
<link rel="stylesheet" href="swiper/css/swiper.css">
<script src="swiper/js/swiper.js">script>
head>
<body>
<div id="fullpage">
<div class="section firstSection">div>
<div class="section right">div>
<div class="section">div>
<div class="section">
<img src="images/two/logo.png" class="logo">
<img src="images/four/title.png" class="title">
<div class="giftTit">
<div class="itemTit">
<img src="images/four/gift1/giftTit.png" alt="">
div>
<div class="itemTit">
<img src="images/four/gift2/giftTit.png" alt="">
div>
<div class="itemTit">
<img src="images/four/gift3/giftTit.png" alt="">
div>
div>
<div class="swiper-container swiper-container-horizontal swiper-container-ios giftImg">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(82.8047px, 0px, 0px);">
<div class="swiper-slide" style="margin-right: 30px;">
<img src="images/four/gift1/giftImg.png" alt="">
div>
<div class="swiper-slide" style="margin-right: 30px;">
<img src="images/four/gift2/giftImg.png" alt="">
div>
<div class="swiper-slide" style="margin-right: 30px;">
<img src="images/four/gift3/giftImg.png" alt="">
div>
div>
div>
<div class="giftIntro">
<div class="itemIntro">
<img src="images/four/gift1/giftIntro.png" alt="">
div>
<div class="itemIntro">
<img src="images/four/gift2/giftIntro.png" alt="">
div>
<div class="itemIntro">
<img src="images/four/gift3/giftIntro.png" alt="">
div>
div>
div>
div>
<script>
// 全屏滚动
$(function () {
$('#fullpage').fullpage();
});
// 第四屏礼包图片
var swiper = new Swiper('.giftImg', {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
indexNum: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
speed:1000,
autoplay: {
delay: 2000
},
loop: true,
on: {
slideChange: function () {
// 获取当前活动下标
var index = this.realIndex;
console.log(index);
$('.giftTit .itemTit').fadeOut().eq(index).fadeIn();
$('.giftIntro .itemIntro').fadeOut().eq(index).fadeIn();
}
}
});
script>
body>
html>
此时的输出结果如图：
要解决这个问题，首先要知道为什么会出现这个问题。
从我们手写轮播图的思路来说，实现一个不循环播放的轮播图的思路如下图：
如果要实现轮播图循环无缝滚动，则需要把轮播图的第一张图片拿到最后一张图片之后，也就是说本来我们这个轮播图有三张图片，而此时呢，要实现轮播图的无缝滚动，就相当于轮播图有四张图片，其中第一张图片在收尾分别重复出现。如图所示：
用swiper写轮播图，添加 loop：true 这个属性之后就可以实现轮播图的循环无缝滚动，实现的思路同我们手写轮播图的思路一样，也是相当于把轮播图的第一张图片动态的添加到了最后，这也就是为什么第一张图片的索引值会出现两次的原因。
知道了问题产生的原因，那么解决问题就变得很简单了。
我们需要设置一个变量来判断是索引值0是否为第一次输出，并设置其默认值为非第一次输出。
// 第四屏礼包图片
var swiper = new Swiper('.giftImg', {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
indexNum: 1, //设置变量判断索引值0是否为第一次输出
pagination: {
el: '.swiper-pagination',
clickable: true,
},
speed:1000,
autoplay: {
delay: 2000
},
loop: true,
on: {
slideChange: function () {
// 获取当前活动下标
var index = this.realIndex;
// 过滤重复动作
if (index == 0 && this.indexNum == 0) {
return false;
}
// 当下标为0时
if (index == 0) {
this.indexNum = 0;
} else {
this.indexNum = 1;
}
console.log(index);
$('.giftTit .itemTit').fadeOut().eq(index).fadeIn();
$('.giftIntro .itemIntro').fadeOut().eq(index).fadeIn();
}
}
});
如果是第一次输出索引值0，把 indexNum重置为0，再不做任何处理，
当重复输出的时候，index=0 并且 在第一次输出索引值为0的时候已经把 indexNum重置为0，
此时 index==0 && indexNum==0 条件成立，执行return false。
这样就解决了索引值重复出现的问题。
（slideChange函数会在每次轮播图切换的时候触发。）