移动端原生无缝滑动

布局

• 包裹层相对定位
• ul绝对定位，后续通过调整left值达到移动效果
• li浮动

原理

• 基础布局结果
  

• 当手指触摸黄色区域1时，布局如下
  
  -当手指触摸蓝色区域3时，布局如下
  

• 通过瞬间改变ul的left值，此时达到视觉上的左右滑动都无缝

函数

        function start(ev){
            let e = ev.changedTouches[0];

            disX = e.pageX;  //记录当前X坐标
            list.style.transition = 'none';

            let num = Math.round(list.offsetLeft / w);  //计算当前是第几幅图片
            //首尾处理
            if(num == 0){
                num = a.length;
                list.style.left = (-num*w)+'px';
            }

            if(-num==len*2-1){
                num = a.length-1;
                list.style.left = (-num*w)+'px';
            }


            listL = list.offsetLeft;

        }

        function move(ev){
            let e = ev.changedTouches[0];
            list.style.left = e.pageX - disX + listL + 'px';  //相比上次移动的距离+原先的距左距离
        }

        function end(ev){
            //超过图片一半则切换图片
            let num = Math.round(list.offsetLeft / w); //计算当前应该显示的图片
            list.style.transition = '1s';  //平滑过渡
            list.style.left = num*w + 'px'; //更新ul位置

            a[idx].className = '';
            a[-num%len].className = 'active';  //更新圆点激活状态
            idx = -num%len;
        }

• 完整demo地址>>>>>>https://github.com/webxing/seamless_slipping

个人链接

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd