javascript - swiper插件怎么监听滑动事件?
大家讲道理
大家讲道理 2017-04-11 13:31:05
0
2
2008

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(2)
大家讲道理

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

巴扎黑
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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal