欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法

 更新時間：2018年01月17日 11:39:39   作者：zhyue93  
假設(shè)當前顯示的是1，往左滑動一個遞減1，往右滑動一個遞增1。下面通過實例代碼給大家講解swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法，感興趣的朋友一起看看吧

假設(shè)當前顯示的是1，往左滑動一個遞減1，往右滑動一個遞增1

body下面添加如下代碼

<div class="swiper-container temp">
 <div class="swiper-wrapper">
  <div class="swiper-slide">
   1
  </div>
  <div class="swiper-slide">
   2
  </div>
  <div class="swiper-slide">
   3
  </div>
 </div>
</div>

引用swiper的css和js腳本(當前使用的是4.x以上版本)

添加js腳本

var now_ActiveIndex=2;//,//當前所在下標
var tempSwiper = new Swiper('.swiper-container.temp', {
 initialSlide: 1,
 loop:true,
 speed:400,
 on: {
  slideChange: function(swiper){//當當前Slide切換時執(zhí)行(activeIndex發(fā)生改變)
   var pre_number=Number($(this.slides[now_ActiveIndex]).text());
   if(now_ActiveIndex>this.activeIndex){
    if(now_ActiveIndex==4&&this.activeIndex==1){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//上一個
     var act_number=pre_number-1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }else if(now_ActiveIndex<this.activeIndex){
    if(now_ActiveIndex==0&&this.activeIndex==3){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//下一個
     var act_number=pre_number+1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }
   now_ActiveIndex=this.activeIndex;
  },
 },
})

初始值：

往左滑動三次：

往右滑動一次

做這個測試主要為了后面日歷的左右滑動改變上一月下一月

總結(jié)

以上所述是小編給大家介紹的swiper動態(tài)改變滑動內(nèi)容的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論