jQueryで画像にフリック機能を持たせてみた #CSS

css

style.css

.swipe-photo {
    position: relative;
    width: 320px;
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
}
.swipe-photo-container {
    position: absolute;
    top: 0;
    left: 0;
}
.swipe-photo-item {
    float: left;
}
.swipe-photo-thumbnail {
    width: 320px;
    height: 240px;
}

html,jquery

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swipe-photo">
    <ul class="swipe-photo-container clearfix">
        <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
        <li class="swipe-photo-item"><img src="img/5.jpg" class="swipe-photo-thumbnail"></li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

// 指を動かしている間は .swipe-photo-container が移動し、離したときに一番近い要素の位置までアニメーションする。
// x座標の取得方法
// function(e) {
//     e.originalEvent.changedTouches[0].pageX;
// }
// onに複数のイベントを貼る方法
// $(".hoge").on({
//     "event": function() { },
//     "event": function() { }
// });
// touchstart タッチした時処理。
// touchmove タッチして動いている時の処理。
// touchend タッチを離した時の処理。
$(function(){
  var spc =$(".swipe-photo-container"); //ul要素
      length = $(".swipe-photo-item").length,//imgの数
      imageWidth = $(".swipe-photo-item").width(),//imgのサイズ
      spc.width(imageWidth*length);//ulの横幅 1920px
      startX = 0,//スタートの座標
      endX = 0,//フリック後の座標
      diffX = 0,//移動幅
      left = 0,//ulのleftの値
      posiX = [];//移動幅の指定
      for(var i=0;i <= length;i++){//0, -320 ,-640 , -960 ,-1280 , -1600 ,-1920を配列に格納。
        posiX[i] = -imageWidth*i;
      }
  spc.on({
    "touchstart": function(e){//タッチ時の処理
      startX = e.originalEvent.changedTouches[0].pageX;//タッチ時のX座標を格納。
      left = spc.position().left; //ulのleftの値を格納。最初は0、前にスクロール済ならマイナスの値が入ってくる。
     },
    "touchmove":function(e){
      e.preventDefault();
      endX = e.originalEvent.changedTouches[0].pageX;//フリック後の座標を格納
      diffX = left - (startX - endX); //「ulのleft」- （「タッチ時座標」-「フリック後座標」）が移動幅になる
      //例 左フリック -320 - (300 - 50) = -570
      //例 右フリック -320 - (50 - 300) = -70
      if(diffX > 0){
        diffX = 0; //移動幅が0を超えたら左端の画面外にいってしまうので、0を格納
      }else if(diffX < posiX[length-1]){
        diffX = posiX[length-1];//移動幅が-1600を超えたら右端の画面外にいってしまうので、-1600を格納
      }
      spc.css({left:diffX}); //ulに移動幅をleftに指定。
      },
      "touchend": function(e){//離したときに一番近い要素の位置までアニメーションする処理
        var e = 0;//空の変数用意
        for(var i = 0;i < length;i++){
          if(posiX[i] + (imageWidth/2) > diffX  && diffX >= posiX[i+1] + (imageWidth/2)){
            //例 移動する画像が-320pxの時の画像の場合、-160 〜 -480間にdiffXの値がある場合に-320pxの位置に移動される。
            //それを計算するため(imageWidth/2)を足している。
            //例 diffXが-400の場合、
            //   posiX[1] + -160 > -400 && -400 >= posiX[2] + 160
            //   -160 > -400 && -400 >= -480 ←for文とif文でどのposition値か、計算した場合この式がtrueになる
            //   そのためdiffが-400の場合はposiX[1]の-320がleftの値になる
            e = i;
          }
        }
        spc.animate({left:posiX[e]},300);
      }
  });
});


</script>
</body>
</html>