swiper是純javaScript打造的滑動特效插件，面向手機(jī)、平板電腦、移動終端；能實現(xiàn)觸屏焦點(diǎn)圖、觸屏teb切換、觸屏多圖切換。而且它是開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大的輕量級 移動設(shè)備觸控滑塊的框架 。
當(dāng)然swiper的強(qiáng)大之處不僅可以做輪播，還可做切換，那么問題來了，如何讀取sweiper中的索引值？
html的結(jié)構(gòu)
<div class="swiper-container swiper1" >
<div class="swiper-wrapper">
<div class="swiper-slide " >按鈕1</div>
<div class="swiper-slide">按鈕2</div>
<div class="swiper-slide">按鈕3</div>
<div class="swiper-slide">按鈕4</div>
<div class="swiper-slide">按鈕5</div>
</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">我是第一個頁面</div>
<div class="swiper-slide">我是第二個頁面</div>
<div class="swiper-slide">我是第三個頁面</div>
<div class="swiper-slide">我是第四個頁面</div>
<div class="swiper-slide">我是第五個頁面</div>
</div>
</div>
css樣式
.swiper1{ width: 100%;
}
.swiper1 .swiper-slide{
height:30px;
line-height:30px;
text-align: center;
background:lightblue;
color: #fff;
border: 1px solid #ddd;
}
.swiper2 .swiper-slide{
text-align: center;
background:lightskyblue;
color: #fff;
width: 100%;
line-height: 200px;
font-size: 20px;
height: 200px;
}
js行為
var swiper1 = new Swiper('.swiper1', {
slidesPerView:4,
// 輕拍事件:點(diǎn)擊slide會觸發(fā)
onTap:function(){
var navIndex = swiper1.clickedIndex; // 當(dāng)前點(diǎn)擊按鈕的下標(biāo)
$('.swiper1 .swiper-slide').eq(navIndex).addClass('active').siblings().removeClass('active');
// 指定swiper2切換的頁面
swiper2.slideTo(navIndex);
}
});
var swiper2 = new Swiper('.swiper2', {
// 當(dāng)slide開始滑動時觸發(fā)的事件
onSlideChangeStart:function(){
// 獲取當(dāng)前滑動頁的下標(biāo)
actIndex = swiper2.activeIndex;
$('.swiper1 .swiper-slide').siblings().removeClass('active');
$('.swiper1 .swiper-slide').eq(actIndex).addClass('active');
swiper1.slideTo(actIndex);
},
onSlideChangeEnd:function(){
//可以讀取到當(dāng)前活動的下班標(biāo)
var num=swiper2.activeIndex
console.log(num)
}
})
