移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

四种touch事件

• touchstart 当手指触摸到屏幕时触发，即使已经有一个手指放在了屏幕上也会触发。
• touchmove 当手指在屏幕上连续滑动时触发，在这个事件发生期间，调用preventDefault()可阻止滚动。
• touchend 当手指从屏幕上移开时触发
• touchcancel 当系统停止跟踪触摸时触发（这个事件没有确定的触发时间）

它们都是冒泡的，也可以取消。

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸属性

touches:表示当前跟踪的触摸操作的Touch对象的数组。 targetTouches:特定于事件目标的Touch对象的数组。 changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置pageX / pageY: //触摸点相对于页面的位置screenX / screenY: //触摸点相对于屏幕的位置identifier: //touch对象的IDtarget: //当前的DOM元素

一些手势

• gesturestart 当一个手指按在屏幕上另外一个手指又触摸屏幕时触发
• gesturechange 依赖前者当其中的一个手指发生改变时触发
• gestureend 当任何一个手指离开时触发

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。event.preventDefault();

例如：

document.body.addEventListener('touchmove', function(event) { event.preventDefault();}, false);

完整示例：

   
      
         
     
      div