实例讲解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参数：

定义动画时间：

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

关键代码：

1、touchstart

2、touchmove

3、touchend

总结：

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值

相关推荐：

jQuery点击后一组图片左右滑动的实现代码_jquery

js实现微信小程序左右滑动功能

详解微信小程序左右滑动切换页面

以上就是实例讲解js实现手机web图片左右滑动的详细内容，更多请关注Gxl网其它相关文章！