swiper 最后一页继续滑动跳转问题

 

<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>

 

posted @ 2015-04-27 14:02  Shimily  阅读(13838)  评论(0)  编辑  收藏  举报