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