移动端轮播

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



    移动端轮播
    
    


  
  • 3
  • 1
  • 2
  • 3
  • 1

你可能感兴趣的:(移动端轮播)