JavaScript实现移动端轮播效果

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


  
 

  
3
  
1
  
2
  
3
  
1
 
  

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