84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
如题,我想监听swiper滑动事件,当它滑动时执行一些东西?
光阴似箭催人老,日月如移越少年。
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>
http://www.swiper.com.cn/api/...
直接看api吧