84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
如题,我想监听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吧