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

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

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

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

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

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

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

 1   //移动端轮播图滑动
 2 
 3     //1、先获取手指在轮播图元素上的滑动方向(左右)
 4     //手指触摸开始时记录手指所在的坐标X
 5 
 6     //获取界面上的轮播图容器
 7     var $carousels=$('.carousel');
 8     //注册滑动事件
 9     var startX;
10     var endX;
11     var offset=50;
12     $carousels.on('touchstart',function(e){
13         startX=e.originalEvent.touches[0].clientX;
14         console.log(startX);
15     });
16 
17     //变量重复赋值
18     $carousels.on('touchmove',function(e){
19         endX=e.originalEvent.touches[0].clientX;
20         //console.log(endX);
21     });
22 
23     //结束触摸的一瞬间记录最后手指所在坐标X
24     //比较开始和结束的坐标大小
25      $carousels.on('touchend',function(e){
26      console.log(endX);
27          //控制精度
28          //获取每次手指滑动的距离，当距离大于一定值时，就认为有方向变化
29          var distance=Math.abs(startX-endX);
30          if(distance>offset){
31              //有方向变化
32              //console.log(startX>endX?'-':'+');
33 
34              //2、根据获得到的方向选择上一张或下一张
35 
36              // $('a').click();
37              // 原生的carousel方法实现 手向左滑出现下一张
38              //此处必须用$(this),若使用$carousels,当页面中有多个轮播图时，会一起动
39              $(this).carousel(startX>endX?'next':'prev');
40 
41 
42 
43          }