原生touch事件实现简易轮播

最新推荐文章于 2021-06-26 16:04:47 发布

luck_lin

最新推荐文章于 2021-06-26 16:04:47 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qwe502763576/article/details/80237466

javascript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的简单示例，通过触摸操作可以在列表项之间进行水平滑动切换。该示例包括了基本的页面结构、样式设置以及交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>Document</title>
	<style type="text/css">
		*{margin:0; padding:0;}
		.box{
			box-sizing: border-box;
			width: 400vw;
			position: absolute;
			left: 0;
			top: 0;
		}
		.box li{
			box-sizing: border-box;
			width: 100vw;
			height: 140vw;
			outline:1px solid green;
			float: left;
		}
		#wrap{
			height: 140vw;
			width: 100vw;
			border:1px solid;
			overflow: hidden;
			position: relative;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<ul class="box">
			<li>11111111111</li>
			<li>22222222222</li>
			<li>33333333333</li>
			<li>44444444444</li>
		</ul>
	</div>
	
<script type="text/javascript">
	let box = document.getElementsByClassName("box")[0];
	let liWidth = box.getElementsByTagName("LI")[0].offsetWidth;
	let left = 0;
	let now = 0; 
	box.addEventListener("touchstart", (e)=>{
		e.preventDefault();
		left =  e.targetTouches[0].pageX;
		now = box.offsetLeft;
	});
	box.addEventListener("touchmove", (e)=>{
		let range = e.targetTouches[0].pageX - left;
		box.style.left = now + range +"px";
	})
	box.addEventListener("touchend", (e)=>{
		let n = Math.round(box.offsetLeft / liWidth);
		n = n > 0 ? 0 : n < -3 ? -3 : n;
		box.style.left = n * liWidth + "px";
	})
</script>
</body>
</html>