js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用

本文链接：https://blog.youkuaiyun.com/phoebemeng/article/details/125911723

本文详细介绍了移动端的触屏事件，包括touchstart、touchmove和touchend，以及如何实现移动端元素拖动。接着讨论了移动端轮播图的制作，包括自动播放和手动拖动功能。此外，还提到了移动端常见的300ms点击延迟问题，提出了使用Fastclick插件解决的方案，并简单介绍了Swiper插件的使用步骤，引导读者从官网获取相关资源并实践。

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

触屏事件

常见触屏事件：

触屏touch事件	说明
touchstart	手指触摸到DOM元素时触发
touchmove	手指在DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）
touches：正在触摸屏幕的所有手指列表。
targetTouches：正在触摸当前DOM元素的所有手指列表。
changedTouches：手指状态发生改变的列表，从无到有或者是从有到无。

如果侦听的是DOM元素touches和targetTouches是相同的。当手指离开时就没有这两个了。
经常使用的是targetTouches。
e.targetTouches[0],这样可以得到触摸元素的第一个手指的信息。

移动端拖动元素
（1）手指触摸屏幕touchstart，获得手指初始坐标的位置，同时获得盒子的位置。
（2）手指移动touchmove，计算手指滑动的距离，并且移动盒子。
（3）手指离开touchend。

<style>
			div{
				position: absolute;
				/* 盒子有定位可以通过left值来移动盒子 */
				left: 0;
				width: 50px;
				height: 50px;
				background-color: pink;
			}
		</style>

<body>
		<div></div>
		<script>
			// （1）手指触摸屏幕touchstart，获得手指初始坐标的位置，同时获得盒子的位置。
			// （2）手指移动touchmove，计算手指滑动的距离，并且移动盒子。
			// （3）手指离开touchend。
			//获取事件
			var div = document.querySelector('div');