移动端图片左右滑动效果

在移动端的网站或者APP中，图片左右滑动很常见，用户的体验也非常不错。我只要使用JQuery来实现此效果。话不多说，直接上代码。

1.html，css部分
html部分：

<div>
    <ul >
        <li ><img src="image/change_img/3.jpeg" ></li>
        <li ><img src="image/change_img/4.jpeg" ></li>
        <li ><img src="image/change_img/5.jpeg" ></li>
    </ul>
</div>

注意点：要实现图片左右滑动，必须将所以的 li 并排在同一行，如下图所示。

要实现把ul下的所以li并排显示，需要在ul中设置，white-space:nowrap;，这里还有一点需要注意，设置完ul后，每个li之间会默认有几个像素的间隔，显然这不是我们想要的，所以我们需要在ul中在设置一个属性来消除li之间的间隔，这个属性就是：font-size: 0;
设置完html和css部分的代码后，我们就需要编写JS部分的代码了，这样我们就能实现动态图片左右滑动效果了。

2.JS代码
实现思路：首先要获取这几个属性值：屏幕的宽度，li的总数量，点击图片的索引值，以及左右滑动的距离。

$('li').on('touchstart',function(event){
    //screenWidth:屏幕分辨率宽度
    var screenWidth = $(window).width();
    var that = this;
    //获取ul下的li总数
    var liCount = $('ul li').length;
    //index:获取当前被点击的图片的索引值
    var index = $(that).index();
    //最小滑动距离，当左右滑动距离小于这个值时，图片返回原位置，不产生向左或者向右切换图片的效果
    var minMoveDis = 100;
    //获取点击x坐标
    var _touch = event.originalEvent.targetTouches[0];
    var clickX = _touch.pageX;
    $("li").on('touchmove',function(event){
        //移动过程中，距离最开始点击位置的X距离
        var _sectouch = event.originalEvent.targetTouches[0];
        var distance = _sectouch.pageX - clickX ;
        var moveX = distance*(-1) + screenWidth * index * (-1);
        $('li').css("transform","translate3d("+moveX+"px,0,0)");
                //滑动事件结束时
                $('li').on('touchend',function(){
                    if (0 < distance < minMoveDis ) {
                        moveX = index *screenWidth*(-1);
                    }
                    if(distance >=minMoveDis ){
                        moveX = (index+1) *screenWidth*(-1);
                    }
                    if(distance <=0){
                        moveX = (index-1) *screenWidth*(-1);  
                    }
                    $('li').css("transform","translate3d("+moveX+"px,0,0)");
                    $('li').off('touchmove');
                });
            });     
        });

实现功能过程中遇到的坑点：① 移动端touch事件对应PC端的mouse事件，和mouse事件不同的是，在移动端没有offset属性，所以我们使用page属性来代替。
②移动端直接使用event.pageX是无法正常获取属性值得，必须写这么一句：var _touch = event.originalEvent.targetTouches[0]; 然后在获取触摸点的pageX的值：var moveX = _touch.pageX;

以上就是所有的内容，若有不足之处，欢迎大家交流讨论，让我们共同进步。O(∩_∩)O~