先看效果，图片跟着手指位置移动，然后显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 设置外层盒子、图片盒子居中 */
#main, #touch_div {
display: flex;
justify-content: center;
align-items: center;
}
/* 设置图片大小、位置为根据父元素对齐 */
img {
width: 50%;
height: 200px;
position: absolute;
top: 10%;
}
</style>
</head>
<body style="overflow: unset">
<div id="main">
<div id="touch_div">
<img class="img_" src="bg00.jpg">
<img class="img_" src="bg01.jpg">
<img class="img_" src="bg02.jpg">
</div>
</div>
<script>
// 获取屏幕尺寸
let w = window.innerWidth;
let h = window.innerHeight;
// 设置页面尺寸
document.getElementById("main").style.height = w;
document.getElementById("main").style.width = h;
// 获取图片盒子
let div_ = document.getElementById('touch_div');
// 获取所有图片
let imgs = document.getElementsByClassName("img_");
changeImage(imgs,div_,w,h);
function changeImage(images,touch_div,width,height){
// 为了移动端滑动更加平滑，设置事件捕捉方式，当true时为capture(由外向内,取消冒泡),默认为false时为bubbling(由内向外，也就是冒泡)
document.addEventListener('touchstart', () => {
}, true);
document.addEventListener('touchmove', () => {
}, true);
document.addEventListener('touchend', () => {
}, true);
// 手指按下位置
let position_start = {};
// 图片位置
let image_potition = images[0].getBoundingClientRect().left;
// 图片索引值
let index = 0;
// 图片初始处理
for (let i = 0; i < images.length; i++) {
// 假如不是第一幅图则隐藏
if (index != i) images[i].style.display = 'none';
// 设置所有图片的左边距
images[i].style.left = width / 2 - images[i] + 'px';
}
// 手指按下事件
touch_div.addEventListener('touchstart', (e) => {
position_start.x = parseInt(e.changedTouches[0].clientX);
images[index].style.zIndex = '1';
if (images[index + 1]) images[index + 1].style.zIndex = '0';
});
// 手指滑动事件
touch_div.addEventListener("touchmove", (e) => {
// 获取手指按下位置
let x = parseInt(e.changedTouches[0].clientX);
// 手指向左滑动
if (x > position_start.x) {
images[index].style.transform = 'translateX(' + parseInt(x - image_potition * 1.3) + 'px)';
if (images[index - 1]) images[index - 1].style.display = 'block';
else images[images.length - 1].style.display = 'block';
}
// 手指向右滑动
if (x < position_start.x) {
// 图片右移(手指触摸位置-图片位置)
images[index].style.transform = 'translateX(' + parseInt(x - image_potition * 2.5) + 'px)';
// 向左滑动时将下一张图片显示,假如不存在下一站则第一张显示
if (images[index + 1]) images[index + 1].style.display = 'block';
else images[0].style.display = 'block';
}
});
// 手指松开事件
touch_div.addEventListener('touchend', (e) => {
// 获取手指滑动值
let distance = parseInt(e.changedTouches[0].clientX) - position_start.x;
// 获取屏幕宽/5
let step = parseInt(-(width / 5));
// 当前图片恢复初始位置
images[index].style.transform = 'translateX(0)';
// 上一张
if (step > distance) {
// 当索引值不超过图片数量时索引值递增
if (index < images.length - 1) index += 1;
// 否则赋值0
else index = 0;
// 循环处理图片
for (let i = 0; i < images.length; i++) {
// 索引值变化后根据索引值变化图片
// 不是当前显示的图片全部隐藏
if (index != i) images[i].style.display = 'none';
// 当前显示图片
else images[i].style.display = 'block';
}
}
// 下一张
if(step < distance){
// 当图片索引值为0时，index==图片数量-1
if (index == 0) index = images.length - 1;
// 否则递减
else index -= 1;
// 循环处理图片
for (let i = 0; i < images.length; i++) {
// 索引值变化后根据索引值变化图片
// 不是当前显示的图片全部隐藏
if (index != i) images[i].style.display = 'none';
// 当前显示图片
else images[i].style.display = 'block';
}
}
});
}
</script>
</body>
</html>
版权声明：本文为weixin_45843676原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。