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

最近在做一个手机端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};

1、touchstart

outerDiv.addEventListener('touchstart',function(){$(this).removeClass('transition');//移除动画效果，否则移动时图片会颤动touchOption.touchStartX = e.touches[0].clientX;        if ($(this).css("-webkit-transform") == 'none') {          touchOption.startTranslateX = 0;        }        else {          //css-webkit-transform属性值格式：matrix(1, 0, 0, 1, -4140, 0)          var transfrom_info = $('.sourcePhotoDiv').css("-webkit-transform").split(',')[4];//获取当前outerDiv的x轴坐标          touchOption.startTranslateX = parseInt(transfrom_info);        }},false);

2、touchmove

outerDiv.addEventListener('touchmove',function(){       touchOption.moveDistance = (e.touches[0].clientX - touchOption.touchStartX);        var TranslateX = touchOption.startTranslateX + touchOption.moveDistance;        $(this).css('-webkit-transform', 'translateX('+ TranslateX +'px) translateZ(0)'); //移动图片},false);

3、touchend

outerDiv.addEventListener('touchend',function(){      $(this).addClass('transition);//添加动画效果       var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略               $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移动图片},false);