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