1、点击任意图片时图片全屏展示，左右滑动能展示其他的图片。 2、滑动超过一定范围自动滑到下一张图片，不超过则回退到当前照片位置。此处的滑动要带动画效果
实现：
每张图片外面一个div，将其宽度设置为100%，最外层有一个div[命名为outerDiv]，其宽度设为：总图片数量*100+‘%'。给最外层div设置touchstart,touchmove,touchend事件监听处理函数，在touchmove中根据移动的x轴距离动态改变outerDiv的x轴距离即可实现图片滑动效果，在touchend中根据当前滑动的距离判断滑动到下一张还是回退当前图片位置。
之前我们可以通过设置outerDiv的position属性，然后改变left值实现移动效果，这里我用的是css3的动画函数transform，简单,且可以实现动画效果
transform参数：
//可以设置x、y、z轴方向移动距离.3D效果
-webkit-transition:.4s ease;//设置动画时间
-webkit-transition:.4s ease;//设置动画时间
定义动画时间：
关键代码：
1、touchstart
效果，否则移动时图片会颤动
touchOption.touchStartX = e.touches[0].clientX;
if ($(this).css("-webkit-transform") == 'none') {
touchOption.startTranslateX = 0;
}
else {
//css-webkit-transform属性值格式：matrix(1,1,-4140,0)
var transfrom_info = $('.sourcePhotoDiv').css("-webkit-transform").split(',')[4];//获取当前outerDiv的x轴坐标
touchOption.startTranslateX = parseInt(transfrom_info);
}
},false);
2、touchmove
图片
},false);
3、touchend
添加动画效果
var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略
$(this).css('-webkit-transform','translateX('+ moveX +'px) translateZ(0)'); //移动图片
},false);
总结：
1、outerDiv的动画参数和效果都是js动态添加的，不需要事先定义 2、用translate(x,y)这种参数时，图片移动时会颤动 3、用translateX() 且带translateZ(0)时图片移动正常，不带translateZ(0)同样出现颤动 4、如果用的是translateX(moveX) ranslateZ(0)这种格式，如果moveX用的是百分比值,如‘50%'，在android手机自动浏览器和uc浏览器中则没有动画效果，用px单位值则正常
为防止图片移动过程颤动和保证动画效果，建议大家用translateX(100px) ranslateZ(0)这种参数，且移动距离用px值
原文链接：https://www.f2er.com/js/34418.html