recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - swiper插件怎么监听滑动事件?

如题,我想监听swiper滑动事件,当它滑动时执行一些东西?

大家讲道理大家讲道理2812 Il y a quelques jours2002

répondre à tous(2)je répondrai

  • 大家讲道理

    大家讲道理2017-04-11 13:33:05

    http://www.swiper.com.cn/api/...
    直接看api吧

    répondre
    0
  • 巴扎黑

    巴扎黑2017-04-11 13:33:05

    var startY,startX,endX,endY;
    var mySwiper = new Swiper('.swiper-container',{
        preventClicks : true,
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        preventLinksPropagation : true,
        spaceBetween: 30,
        effect: 'fade',
        onSlideChangeEnd:function(swiper){
           alert(swiper.activeIndex+'');
           // swiper.activeIndex 这个就是索引, 从 0 开始! 可看一共有多少元素!
        },
        onTouchStart: function(swiper,event){
            var touch = event.touches[0];
            startY = touch.pageY;
            startX = touch.pageX;
        },
        onTouchMove: function(swiper,event){
            var touch = event.touches[0];
            endX = touch.pageX-startX;
            endY = touch.pageY-startY;
        },
        onTouchEnd: function(swiper){
            if(Math.abs(endX)>5){
                endX=0;
                return false;
            }else{
                var href;
               switch (swiper.index){
                   case 1:
                       href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
                   case 2:
                       href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
                   case 3:
                       href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
                   case 4:
                       href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
                }
                self.location = href;
                endX=0;
            }
        }
    
    });
    
    HTML
    
    <p class="swiper-container swiper-container-horizontal"   >
        <p class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <p class="swiper-slide blue-slide swiper-slide-active"  style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170436288.jpg)">
                <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
            </p>
            <p class="swiper-slide red-slide swiper-slide-next" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170435896.jpg)">
                <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
              </p>
            <p class="swiper-slide orange-slide" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170406833.jpg)" >
                <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
            </p>
            <p class="swiper-slide orange-slide" style="background-image:url(https://newi0.jrj.com.cn/bxcsv2016/banner-lb.png)" >
                <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
            </p>
        </p>
        <p class="swiper-pagination swiper-pagination-white"></p>
    </p>

    répondre
    0
  • Annulerrépondre