<div class="swiper-container swiper1"> <div class="arrows_left a_left1"><img src="images/bm_leftbtnpng.png" alt=""/></div> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="uploads/detail_pic.jpg" alt=""/> </div> <div class="swiper-slide"> <img src="uploads/detail_pic.jpg" alt=""/> </div> <div class="swiper-slide"> <img src="uploads/detail_pic.jpg" alt=""/> </div> <div class="swiper-slide"> <img src="uploads/detail_pic.jpg" alt=""/> </div> <div class="swiper-slide"> <img src="uploads/detail_pic.jpg" alt=""/> </div> </div> <div class="arrows_right a_right1"><img src="images/bm_rightbtn.png" alt=""/></div> </div>
/*
* swiper初始化
*/
var swiper1 = new Swiper('.swiper1', { loop:false, grabCursor: true, onSlideChangeStart: function(){ var index=swiper1.activeSlide; $(".p1").html(index+1); swiper2.swipeTo (index); }, onTouchEnd:function(){ /*手指滑動時，判斷手指滑動的方向*/ // alert(swiper1.slides.length); goprev(); /*上一篇*/ gonext(); /*下一篇*/ } });
/* * 滑到上一篇 */ function goprev(){ var startX, startY, moveEndX, moveEndY, X, Y; $(".swiper1 .swiper-slide:first").on("touchstart", function(e) { // e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $(".swiper1 .swiper-slide:first").on("touchmove", function(e) { // e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { //從左側向右滑動 $.afui.loadContent("#article",false,false,"slide"); } }); } /* * 滑到下一篇 */ function gonext(){ var startX, startY, moveEndX, moveEndY, X, Y; $(".swiper1 .swiper-slide:last").on("touchstart", function(e) { // e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $(".swiper1 .swiper-slide:last").on("touchmove", function(e) { // e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { //從右側向左滑動 $.afui.loadContent("#article",false,false,"slide"); } }); }
判斷手指滑動的方向：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Document</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> 移動端，手指滑動屏幕查看效果。 <script type="text/javascript"> var windowHeight = $(window).height(), $body = $("body"); $body.css("height", windowHeight); var startX, startY, moveEndX, moveEndY, X, Y; $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $("body").on("touchmove", function(e) { e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { //從左側向右滑動 alert("left to right"); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { //從右側向左滑動 alert("right to left"); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { //從上方向下滑動 alert("top to bottom"); } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { //從下方向上滑動 alert("bottom to top"); } else{ alert("just touch"); } }); </script> </body> </html>