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)
      }
    }
  }
})

猜你喜欢

转载自blog.csdn.net/weixin_42450794/article/details/82188685
今日推荐