好资源导航 » 文章资讯 » JavaScript实现移动端轮播效果

JavaScript实现移动端轮播效果

2024-02-20 18:47:03 56

这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码。首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到js中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同，都是通过改变元素的位置来控制图片的出现，但让我们不是很上手的，是那些用于跟踪触摸的属性。

下面，我简单介绍一下与触摸相关的知识

触摸事件

touchstart：当手指触摸屏幕时触发，一只手指放在屏幕上也会触发
touchmove：当手指在屏幕上滑动时连续触发。在这个事件发生期间可以用preventDefault()可以阻止滚动。
touchend：手指从屏幕移开时触发。
touchcancel：当系统停止跟踪触发时触发。

上面这几个事件都会冒泡，也都可以取消。

属性

touches:表示当前跟踪的触摸操作的Touch对象的数组
targetTouches:特定于事件目标的Touch对象的数组。（简单点可以理解为手指触摸屏幕的位置）
changeTouches表示自上次触摸以来发生了什么改变的touch对象的数组。（手指离开的位置）

每个touch对象包括下列属性

clientX:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:标识触摸的唯一ID
pageX:触摸目标在页面中的x坐标
pageY:触摸目标在页面中的y坐标
screenX:触摸目标在页面中的x坐标
screenY:触摸目标在页面中的y坐标
target:触摸的dom节点目标

代码如下




移动端轮播

*{
margin:0;
padding:0;
}
#box{
width:980px;
overflow:hidden;
position:relative;
margin:0auto;
}
#boxul{
width:4900px;
height:100px;
position:relative;
transform:translateX(-980px);

}
#boxulli{
width:980px;
height:100px;
float:left;
list-style-type:none;
text-align:center;
color:#fff;
line-height:100px;
font-size:30px;
}


window.onload=function(){
varbox=document.getElementById('box');
varoUl=document.getElementsByTagName('ul')[0];
varaLi=oUl.children;//这样就可以把所有li标签获取到了
variNow=1;
varx=-iNow*aLi[0].offsetWidth;//li标签的位置
varbReady=true;
oUl.addEventListener('touchstart',function(ev){

//当手指触摸屏幕的时候触发事件，让li的位置随手指滑动而改变
if(bReady==false){return;}
bReady=false;

vardownX=ev.targetTouches[0].pageX;//记录触摸位置
vardisX=downX-x;//下一个li要移动到的位置
functionfnMove(ev){
x=downX-disX;
oUl.style.transform='translate3d('+x+'px,0,0)';
}
functionfnEnd(ev){
varupX=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='200msallease';
functiontEnd(){
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);

}





3
1
2
3
1

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

JavaScript实现移动端轮播效果

热门推荐

随机推荐