第127天：移动端-获取触摸点的位置

一，移动端轮播图滑动

如图1所示，先获取手指在轮播图元素上的滑动方向（左右）

（1）手指触摸开始时记录手指所在的坐标X
（2）获取界面上的轮播图容器

var $carousels=$('.carousel');

（3）注册滑动事件
（4）变量重复赋值

（5）结束触摸的一瞬间记录最后手指所在坐标X

（6）比较开始和结束的坐标大小
（7）控制精度 获取每次手指滑动的距离，当距离大于一定值时，就认为有方向变化

2，根据获得到的方向选择上一张或下一张

必须用$(this),若使用$carousels,当页面中有多个轮播图时，会一起动
 $(this).carousel(startX>endX?'next':'prev');

 

JavaScript的代码

 1   //移动端轮播图滑动
 2 
 3     //1、先获取手指在轮播图元素上的滑动方向(左右)
 4     //手指触摸开始时记录手指所在的坐标X
 5 
 6     //获取界面上的轮播图容器
 7     var $caro