本文深入解析基于JavaScript的移动端轮播图实现原理。重点讲解touchstart、touchmove和touchend等触摸事件的使用，以及如何通过监听触摸坐标改变元素位置来实现无缝滚动。结合HTML结构与CSS样式，详细拆解代码逻辑，帮助开发者掌握移动端手势交互的核心技术。
移动端轮播原理与触摸事件概述
这段轮播代码并非原创，而是偶然在简友主页发现，今日结合刚学习的事件知识，决定对其逐行进行剖析。移动端与PC端的交互差异在于，移动端主要依赖触摸和手势操作，因此我们需要使用JavaScript中与触摸相关的新事件。轮播的核心原理与以往一致，即通过改变元素位置来控制图片显示，但难点在于那些用于追踪触摸状态的具体属性。
接下来，简要介绍与触摸操作相关的核心知识。
核心触摸事件类型
触摸事件机制
- touchstart：当手指接触屏幕时触发，即使只有一根手指放在屏幕上也会激活该事件。
- touchmove：当手指在屏幕上进行滑动操作时连续触发。在此事件处理过程中，可以使用preventDefault()方法来阻止页面的默认滚动行为。
- touchend：当手指从屏幕抬起离开时触发。
- touchcancel：当系统决定停止跟踪触摸操作时触发。
上述所有触摸事件均支持事件冒泡，并且都可以被取消。
触摸对象属性详解
触摸对象属性
- touches：表示当前正在跟踪的触摸操作中Touch对象构成的数组。
- targetTouches：特定于事件目标的Touch对象数组（可简单理解为手指当前触摸屏幕的位置集合）。
- changedTouches：表示自上次触摸操作以来发生变化的Touch对象数组（通常指手指离开屏幕时的位置）。
每个Touch对象包含以下具体属性：
- clientX：触摸点在视口内的X坐标。
- clientY：触摸点在视口内的Y坐标。
- identifier：标识此次触摸的唯一ID。
- pageX：触摸点在页面中的X坐标。
- pageY：触摸点在页面中的Y坐标。
- screenX：触摸点在屏幕坐标系中的X坐标。
- screenY：触摸点在屏幕坐标系中的Y坐标。
- target：触发触摸事件的DOM节点目标。
具体实现代码如下：
完整代码实现
<!DOCTYPE html>
<html>
<head>
<title>移动端轮播</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 980px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#box ul {
width: 4900px;
height: 100px;
position: relative;
transform: translateX(-980px);
}
#box ul li{
width: 980px;
height: 100px;
float: left;
list-style-type: none;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;//这样就可以把所有li标签获取到了
var iNow = 1;
var x = -iNow*aLi[0].offsetWidth;//li标签的位置
var bReady = true;
oUl.addEventListener('touchstart',function(ev){
//当手指触摸屏幕的时候触发事件，让li的位置随手指滑动而改变
if(bReady == false){return;}
bReady = false;
var downX = ev.targetTouches[0].pageX; //记录触摸位置
var disX = downX - x;//下一个li要移动到的位置
function fnMove(ev) {
x = downX-disX;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
}
function fnEnd(ev){
var upX = ev.changedTouches[0].pageX;//离开的位置
if(Math.abs(upX - downX)>50){
//左边移动
if(upX - downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1;}
}else{
//右边移动
iNow--;
if(iNow==-1){iNow=0;}
}
}
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
oUl.style.transition = '200ms all ease';
function tEnd(){
if(iNow==4){
iNow=1;
}
if(iNow==0){iNow=3;}
oUl.style.transition = 'none'
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
bReady = true;
}
oUl.addEventListener('transitionend',tEnd,false);
//释放内存
document.removeEventListener('touchend',fnEnd,false);
document.removeEventListener('touchmove',fnMove,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
//阻止默认事件
ev.preventDefault();
},false);
}
</script>
</head>
<body>
<div id="box">
<ul>
<li style="background:green">3</li>
<li style="background:orange">1</li>
<li style="background:yellow">2</li>
<li style="background:green">3</li>
<li style="background:orange">1</li>
</ul>
</div>
</body>
</html>
以上内容为本文的全部讲解，希望对各位的学习有所帮助，也欢迎大家继续支持本站。