Html5 移动端触摸滑动事件

最新推荐文章于 2025-05-29 12:23:17 发布

原创最新推荐文章于 2025-05-29 12:23:17 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

html5

4 篇文章

订阅专栏

以下代码经过测试没有问题且可以循环滑动

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5测试</title>
<link href="Css/Index.css" rel="stylesheet" />
</head>
<body>
<div id="Index" style="text-align: center; width: auto;">
<img src="img/1.jpeg" class="imagestart" style="display: block;" data-id="1" />
<img src="img/2.jpeg" class="imagestart" data-id="2" />
<img src="img/3.jpeg" class="imagestart" data-id="3" />
</div>
<script src="/js/jquery-1.12.4.min.js"></script>
<script>
//初始化获取浏览器的屏幕的宽度
var LoadWidth = parseInt($(window).width());
//初始化触摸起点X轴
var loadX = 0;
//初始化触摸起点Y轴
var loadY = 0;
//初始化鼠标松开的X轴
var MoveUp = 0;

$(function () {
//
$(".imagestart").on('touchstart', function (e) {
var id = e.originalEvent.targetTouches[0];
//获取鼠标的起始位置x
var x = id.pageX;
//赋值起始位置x
loadX = x;
//点击时赋值鼠标起来的坐标在移动的时候会更新这个变量
MoveUp = x;
//获取鼠标的起始位置y
var y = id.pageY;
loadY = y;
$(this).css('position', 'fixed');
})
//

//
$(".imagestart").on("touchmove", function (e) {
var id = e.originalEvent.targetTouches[0];
//获取鼠标的每次移动位置x
var x = id.pageX;
MoveUp = x;
//获取鼠标的每次移动位置y
var y = id.pageY;
var ThisLoad = $(this);var ddd = x - loadX;
//移动元素
ThisLoad.animate({ 'left': x - loadX + "px" }, 0);

if ($(this).attr("data-id") == 3) {
//$(".imagestart").hide();
$(".imagestart").eq(0).show();
} else {
$(this).next().show();
}
})
//

//
$(".imagestart").on("touchend", function (e) {
//当手指松开的时候计算鼠标移动开始到结束 x轴变化多少
var MoveX = loadX - MoveUp;
if (MoveX<0) {
MoveX = MoveUp - loadX;
}

$(".imagestart").css("left", "0px");
//如果移动的x轴大于浏览器宽度的3/10 则换图片
if (MoveX / LoadWidth > 0.4) {
if ($(this).attr("data-id") == 3) {
//隐藏所有
$(".imagestart").hide();
//清空元素的style
$(".imagestart").removeAttr("style");
//让第一个显示
$(".imagestart").eq(0).css("display", "block");
} else {
//隐藏当前
$(this).css("display", "none");
//显示下一个元素
$(this).next().show();
}

} else {
//如果移动的位置屏幕的40%小于则图片返回到初始的位置
$(this).animate({ "letf": "0px" },0);
}
//恢复初始坐标
loadX = 0;
//恢复鼠标松开坐标
MoveUp = 0;

})
//

})
</script>
</body>
</html>