ウェブページのために左右にスワイプ

Question

私は列挙された一連のウェブページを持っています。そして、各ページには左と右の矢印アイコンがあり、シリーズの前/次のページに移動します。

私の質問：スワイプの左/右ジェスチャを実装する最も簡単な（！）方法は同じものですか？ （他のジェスチャーはありません - 複雑な解決策はありません、私は血まいれな初心者です！）

ありがとうございました！ 、

var start = null; 
window.addEventListener("touchstart",function(event){ 
    if(event.touches.length === 1){ 
     //just one finger touched 
     start = event.touches.item(0).clientX; 
    }else{ 
     //a second finger hit the screen, abort the touch 
     start = null; 
    } 
    }); 

を次に指が画面をレフト場合オフセット値より高いかどうかをチェック：

Answer 1

単にユーザーがタッチダウン最初のポイントを保存

window.addEventListener("touchend",function(event){ 
    var offset = 100;//at least 100px are a swipe 
    if(start){ 
     //the only finger that hit the screen left it 
     var end = event.changedTouches.item(0).clientX; 

     if(end > start + offset){ 
     //a left -> right swipe 
     } 
     if(end < start - offset){ 
     //a right -> left swipe 
     } 
    } 
    }); 

あなたは追加の追加かもしれませんチェックするdelta y（clientY）が一定量以下の場合、またはtouchmoveがちょうど一方向にある場合しかし、それはオプションであり、あなたが別のスワイプアクションと異なる必要があるかどうかによって異なります。あなたはまた、例えば、ページをオフに必要なスワイプdependend幅作ることができます。：

var offset = window.clientX * 0.9; // the swipe mist be 90% of the windows size 

Test it