布局
- 包裹层相对定位
- ul绝对定位,后续通过调整left值达到移动效果
- li浮动
原理
-
基础布局结果
1.png -
当手指触摸黄色区域1时,布局如下
2.png
-当手指触摸蓝色区域3时,布局如下
3.png -
通过瞬间改变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
网友评论