<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>jQuery触摸手机全屏上下滑动滚屏特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
var nowpage = 0;//所以nowpage 赋值就必须在网站加载的时候，不能放在加载JS里面，否则页面换屏后（第二页）就没法获取事件
$(function aaa() {
//网上代码这里都是给最大盒子赋值，虽然电脑上可以使用，但是手机滑屏的时候第二页就失去滑动事件，所以这里我直接指定页面获取事件
$("#test" + nowpage).swipe(
{
swipe: function (event, direction, distance, duration, fingerCount) {
if (direction == "up") {
nowpage = nowpage + 1;
} else if (direction == "down") {
nowpage = nowpage - 1;
}
if (nowpage > 4) {
nowpage = 4;
}
if (nowpage < 0) {
nowpage = 0;
}
$(".container").animate({ "top": nowpage * -100 + "%" }, 400);
$(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
aaa();//页面加载完成后，第一页面呗滑动后，就指定下一个滑动页获得监听事件
}
}
);
})
</script>
</head>
<body>
<h1 class="keTitle">jQuery触摸手机全屏上下滑动滚屏特效</h1>
<!--效果html开始-->
<div class="container" id="test">
<div class="page page0 cur" id="test0">
<h1>你好，我是0号屏幕，第一屏,鼠标单击向下拖动</h1>
</div>
<div class="page page1" id="test1">
<h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page2" id="test2">
<h1>你好，我是2号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page3" id="test3">
<h1>你好，我是3号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page4" id="test4">
<h1>你好，我是4号屏幕，到底了，鼠标单击向上拖动</h1>
</div>
</div>
<!--效果html结束-->
</body>
</html>
修改后的demo文件