一、移動端輪播圖滑動
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 $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 }
二、移動端獲取觸摸點的方式說明
1.
touchstart事件
手指頭觸摸屏幕上的事件
2.
touchmove
手指頭在屏幕上滑動觸發的事件
3.
touchend
當手指從屏幕上離開的時候觸發
利用jquery配合使用方法如下：
$("#demoid").bind('touchstart',function(){ //代碼處理});
touchstart、touchmove、touchend三種事件下的鼠標位置點獲取：
（1）
touchstart事件下獲取：
e.originalEvent.targetTouches[0].pageX
說明：由於手指頭是多點觸摸到屏幕上的我們所以e.originalEvent.targetTouches的
意思是一個手指觸碰點集合我們只需要獲取第一個點就可以了所以
e.originalEvent.targetTouches[0]，所以位置.pageX .pageY就ok了
（2）
touchend事件的獲取：
e3.originalEvent.changedTouches[0].pageX
下面是其他的一些介紹：
每個Touch對象包含的屬性如下。
clientX：觸摸目標在視口中的x坐標。
clientY：觸摸目標在視口中的y坐標。
identifier：標識觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX：觸摸目標在屏幕中的x坐標。
screenY：觸摸目標在屏幕中的y坐標。
target：觸目的DOM節點目標。