∧＿∧
　 (´･ω･) いやどす
　　ﾊ∨/~ヽ
　 ﾉ[三ﾉ　|
　(L|く＿ノ
　　|＊　|
　　ﾊ､_＿|
""~""""""~""~""~""
指示が意味不明で困るパターンのひとつ。
実際に言われた事ないですが、言われると怖いですね。
では、今回は、スワイプイベントの付け方とかをやってみましょう。

スワイプ

jQueryでもこのイベントとかはきちんと用意はされているんですが
今回はまぁ色々やってみようかと思います。

デモ

これはスマホで見てくだしあ。Chromeのデベロッパーツール使ってもよいです

デモの仕様

1. どっちの方向にスワイプを行ったのかを表示
2. 方向確定後は判定、処理を行わない
3. 方向確定には、30px移動時に判定を行う

実際に動かくしてもらうと、スタート位置やらなんやら数値が変わっているのが分かると思います。
このデモでは【touchstart】【touchmove】【touchend】という３つのイベントを使用しています。
各イベントについて簡単な説明を入れます。

touchstart

いわゆる、【タップしたとき】の意味となります。

touchmove

スワイプをされた時に動作。スワイプ中は常に動いています。

touchend

指を離したときに実行されます。

JSのソース

以下の内容の通りっちゃその通りなんですが
【タッチイベントのX座標】と【スワイプ時のX座標】を比較し、30px以上の差がある場合に処理を実行
但し上記処理は１度実行すると、指を離さないと二度と実行しないようにしています。
指を離して再度スワイプすると上記処理は再度実行されます。
１スワイプ１実行です。
スライダーの動作を想定していますので、ここでは制御していますが、必ずそうする必要というわけではありません。

$(function(){

 var movePoint = {'sPoint':'','ePoint':'','endFlickFlg':'','diff':'','moveFlg':'0'};
   movingFlg = 0; // スワイプ方向実行フラグ 0:未実行 1;実行済

 /**************************************************
  *
  * touchHandler
  * イベント処理
  *
  * @param Object e イベントハンドラ
  * @return none;
  *
  **************************************************/
 function touchHandler(e)
 {
  //------------------------------------------------
  // イベントのキャンセル余計な事をさせない
  //------------------------------------------------
  e.preventDefault();

  //------------------------------------------------
  // タッチオブジェクトの取得
  //------------------------------------------------
  var touch = e.touches[0];

  if(e.type == "touchstart")
  {
   //--------------------------------------------------
   // タップされた時の処理
   // タップされた地点のX座標を取得
   //--------------------------------------------------
   movePoint['sPoint'] = touch.pageX;
  }
  if(e.type == "touchmove")
  {
   //--------------------------------------------------
   // スワイプされた時の処理
   // タップされた地点のX座標を取得
   //--------------------------------------------------
   movePoint['ePoint'] = touch.pageX;
   movePoint['diff'] = movePoint['sPoint'] - movePoint['ePoint'];

   //--------------------------------------------------
   // タップされたX座標とスワイプされた時のX座標の差分が
   // 30を超えた場合は処理を実行する
   //--------------------------------------------------
   if(movePoint['sPoint'] < movePoint['ePoint'])
   {
    //----------------------------------------------------------------------
    // スワイプされた時のX座標のほうが大きい場合は右へ移動したと判定する
    //----------------------------------------------------------------------
    movePoint['endFlickFlg'] = 1; // 右へ移動したフラグ
    movePoint['diff'] = movePoint['diff']*-1; // 判定用に正の数値に変換する
    $('#sData').text(movePoint['sPoint']);
    $('#eData').text(movePoint['ePoint']);
    $('#diffData').text(movePoint['diff']);
   }
   else if(movePoint['sPoint'] > movePoint['ePoint'])
   {
    //----------------------------------------------------------------------
    // タップされた時のX座標のほうが大きい場合は左へ移動したと判定する
    //----------------------------------------------------------------------
    movePoint['endFlickFlg'] = 2; // 左へ移動したフラグ
    $('#sData').text(movePoint['sPoint']);
    $('#eData').text(movePoint['ePoint']);
    $('#diffData').text(movePoint['diff']);
   }

   //----------------------------------------------------------------------
   // スワイプ距離判定
   //----------------------------------------------------------------------
   if(movePoint['diff'] >= 30)
   {
    //----------------------------------------------------------------------
    // 差分距離が30以上の場合のみ処理を実行する
    //----------------------------------------------------------------------
    if(movingFlg == 1) return false; // 判定済の場合は処理の終了
    movingFlg = 1; // 判定済フラグを立てる

    //----------------------------------------------------------------------
    // 以下判定処理
    //----------------------------------------------------------------------
    randnum = Math.floor( Math.random() * 100 );
    $('#text').text(randnum);

    if(movePoint['endFlickFlg'] == 1)
    {
     $('#direction').text('右');
    }
    else if(movePoint['endFlickFlg'] == 2)
    {
     $('#direction').text('左');
    }
   }
  }
  if(e.type == "touchend")
  {
   //----------------------------------------------------------------------
   // 判定済フラグを折って次回に備える
   //----------------------------------------------------------------------
   movingFlg = 0;
  }
 }

 //-------------------------------------------------
 // イベントの登録
 //-------------------------------------------------
 var box = $("#flickArea")[0];
 box.addEventListener("touchstart", touchHandler, false);
 box.addEventListener("touchmove", touchHandler, false);
 box.addEventListener("touchend", touchHandler, false);

});