JavaScript实现移动端轮播效果

2024-05-06 16:37:40

字体：大中小

来源：转载

供稿：网友

这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码。首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到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节点目标

代码如下

<!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>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

下一篇：JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】