移动端实现手指滑动图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
#dingwei {
width: 400px;
height: 200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#ls {
width: 1600px;
height: 200px;
position: relative;
left: 0;
}
.lsc {
height: 200px;
width: 400px;
float: left;
}
</style>
</head>
<body>
<div id="dingwei">
<div id="ls">
<div class="lsc" style="background-color: #00FFFF;"></div>
<div class="lsc" style="background-color: #55aa00;"></div>
<div class="lsc" style="background-color: #00aa00;"></div>
<div class="lsc" style="background-color: #aa00ff;"></div>
</div>
</div>
<script type="text/javascript">
var ls = document.getElementById('ls');
var lss = document.getElementsByClassName('lsc');
var startX; //保存起始x坐标
var endX; //保存结束x坐标
var settime = null; //延时函数句柄
var chuinit = null; //初始偏移量
var chumoshiX; //触摸时之前x
var schumoshiX; //触摸之后的x
var conter = 0; //排除第一次执行无chumoshiX的情况
var lswidth3 = ls.offsetWidth - lss[0].offsetWidth
//按下确定初始值
function start(event) {
var touch = event.targetTouches[0];
startX = Number(touch.clientX); //页面触点X坐标
//手指按下时间判断
settime = setTimeout(() => {
clearTimeout(settime)
settime = 0;
}, 500)
chuinit = ls.offsetLeft
}
// 触摸时让图片跟随
function anxiaa(event) {
var touch = event.targetTouches[0];
chumoshiX = touch.clientX
if (conter > 0) {
var weiyi = chumoshiX - schumoshiX //保存了触摸时的距离
if (weiyi > 0 && ls.offsetLeft < 0) {
//右移
ls.style.left = ls.offsetLeft + weiyi + 'px'
} else if (weiyi < 0 && -ls.offsetLeft < lswidth3) {
// 左移
ls.style.left = ls.offsetLeft + weiyi + 'px'
}
}
conter++;
schumoshiX = chumoshiX
}
function end(event) {
var touch = event.changedTouches[0];
endX = Number(touch.clientX); //页面触点X坐标
conter = 0; //清零计数器
//根据手指按下时间判断是直接到达尾部，还是根据滑动距离判断是否要回退到初始位置
// 为实现时间时间判断，在手指按下时定义一个延时函数，手指拿起时依据句柄是否等于0存在进行对应操作
var lenWidths = endX - startX; //仅保存位移
if (lenWidths < 0) {
lenWidths = -lenWidths
}
//小于1秒直接调用
if (settime != 0) {
jisuan()
} else if (settime == 0) { //大于一秒选择调用
// 距离小于3分之一回退
if (lenWidths < 130) {
huitui()
} else {
//大于三分之一则下一页jisuan()
jisuan()
}
}
}
//回退
function huitui() {
ls.style.left = chuinit + 'px'
}
// 将剩余位置移动至尾部
function jisuan() {
var lenWidth = endX - startX;
if (lenWidth > 0 && ls.offsetLeft < 0) {
//右移
while (ls.offsetLeft % 400 != 0) {
ls.style.left = ls.offsetLeft + 1 + 'px'
}
} else if (lenWidth < 0 && -ls.offsetLeft < lswidth3) {
//左移
while (-ls.offsetLeft % 400 != 0) {
ls.style.left = ls.offsetLeft - 1 + 'px'
}
} else {
console.log("未移动")
}
}
//注册事件并查看手指滑动距离
for (var i = 0; i < lss.length; i++) {
lss[i].addEventListener("touchstart", start, false)
lss[i].addEventListener("touchmove", anxiaa, false)
lss[i].addEventListener("touchend", end, false)
}
</script>
</body>
</html>
