js实现手机web图片左右滑动效果

实现效果:

1、点击任意图片时图片全屏展示，左右滑动能展示其他的图片。

2、滑动超过一定范围自动滑到下一张图片，不超过则回退到当前照片位置。此处的滑动要带动画效果

实现：

每张图片外面一个div，将其宽度设置为100%，最外层有一个div[命名为outerDiv]，其宽度设为：总图片数量*100+‘%'。给最外层div设置touchstart,touchmove,touchend事件监听处理函数，在touchmove中根据移动的x轴距离动态改变outerDiv的x轴距离即可实现图片滑动效果，在touchend中根据当前滑动的距离判断滑动到下一张还是回退当前图片位置。

之前我们可以通过设置outerDiv的position属性，然后改变left值实现移动效果，这里我用的是css3的动画函数transform，简单,且可以实现动画效果

transform参数：

-webkit-transform:translate(100px,200px) tr //可以设置x、y轴方向移动距离
-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) 

//可以设置x、y、z轴方向移动距离.3D效果
-webkit-transition:.4s ease;//设置动画时间

定义动画时间：

.transition {
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition: .4s ease;
  transition:.4s ease;
}

关键代码：

var touchOption={touchStartX:0,startTranslateX:0,moveDistance:0};

$("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 2 right");
    }
    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
        alert("right 2 left");
    }
//  else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
//      alert("top 2 bottom");
//  }
//  else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
//      alert("bottom 2 top");
//  }
    else{
        alert("just touch");
    }
});















beck