这篇文章主要为大家详细介绍了js实现手机web图片左右滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在做一个手机端web站点，里面有一个图片展示效果：
1、点击任意图片时图片全屏展示，左右滑动能展示其他的图片。
2、滑动超过一定范围自动滑到下一张图片，不超过则回退到当前照片位置。此处的滑动要带动画效果
实现：
每张图片外面一个p，将其宽度设置为100%，最外层有一个p[命名为outerp]，其宽度设为：总图片数量*100+‘%'。给最外层p设置touchstart,touchmove,touchend事件监听处理函数，在touchmove中根据移动的x轴距离动态改变outerp的x轴距离即可实现图片滑动效果，在touchend中根据当前滑动的距离判断滑动到下一张还是回退当前图片位置。
之前我们可以通过设置outerp的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
outerp.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 = $('.sourcephotop').css("-webkit-transform").split(',')[4];//获取当前outerp的x轴坐标 touchoption.starttranslatex = parseint(transfrom_info); }},false);
2、touchmove
outerp.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
outerp.addeventlistener('touchend',function(){ $(this).addclass('transition);//添加动画效果 var movex=100;//此处计算移动移动下一张图片还是退货当前图片代码省略 $(this).css('-webkit-transform', 'translatex('+ movex +'px) translatez(0)'); //移动图片},false);
总结：
1、outerp的动画参数和效果都是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值
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详细解读layui父子窗口如何传递参数
在微信小程序中如何实现image组件图片自适应显示
在vue移动音乐webapp中有关跨域请求失败方面的问题
以上就是在js中如何实现图片左右滑动的详细内容。