天天看點

Swiper4.0:H5手機端滑屏判斷目前頁Index并且觸發動畫(slideChangeTransitionEnd與swiper.activeIndex)

API:

https://www.swiper.com.cn/api/event/92.html

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
  // 如果需要分頁器
  pagination: {
    el: '.swiper-pagination',
  },
  // 如果需要前進後退按鈕
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 如果需要滾動條
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  on: {
    slideChangeTransitionEnd: function(){
      // alert(this.activeIndex);//切換結束時,告訴我現在是第幾個slide
      if ( this.activeIndex === 1) {
        $("#znq").animate({
          "top":"23%"
        },2000)
        $("#qj").animate({
          "top":"38%",
          "right":"0"
        },2000)
        $("#hdqc").animate({
          "left":"0"
        },2000)
        $("#jxbd").animate({
          "right":"0"
        },2000)
      } else if ( this.activeIndex === 2 ) {
          $(".detail-wrap:nth-of-type(1)").fadeIn(1000);
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(2)").fadeIn(1000);
        },500)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(3)").fadeIn(1000);
        },1000)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(4)").fadeIn(1000);
        },1500)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(5)").fadeIn(1000);
        },2000)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(6)").fadeIn(1000);
        },2500)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(7)").fadeIn(1000);
        },3000)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(8)").fadeIn(1000);
        },3500)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(8)").fadeIn(1000);
        },4000)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(9)").fadeIn(1000);
        },4500)
        setTimeout(function(){
          $(".detail-wrap:nth-of-type(10)").fadeIn(1000);
        },5000)
      }
    }
  }
})