Q&A
前提・実現したいこと
ｊQueryを使用してフリック操作を実装したいです。
指を動かしている間は .swipe-photo-container が移動し、離したときに一番近い要素の位置までアニメーションします。
発生している問題・エラーメッセージ
左右に50px以上フリックしないと画像が動かないように作成しました。 一枚目の画像はうまくいくのですが、二枚目以降はうまく反応せずクリックするだけでも 画像が流れて行っていまいます。
該当のソースコード
<!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"> "use strict"; $(function() { var $swipe = $(".swipe-photo-container"), $swipeList = $swipe.find(".swipe-photo-item"), $swipeImg = $swipe.find(".swipe-photo-thumbnail"), swipeImgLength = $swipeImg.length, swipeImgWidth = $swipeImg.width(), direction = '', swipe = 0, undefined = { x:undefined, thisX:undefined, startX:undefined, moveX:undefined }; $swipe.width(swipeImgLength * swipeImgWidth); $swipeList.on( { touchstart: function(e) { undefined.$thisX = parseInt($swipe.css("left")); undefined.$startX = e.originalEvent.changedTouches[0].pageX - undefined.$thisX; }, touchmove: function(e) { undefined.$moveX = e.originalEvent.changedTouches[0].pageX - undefined.$thisX; directionImg(); }, touchend: function() { swipeImg(direction); } }); function directionImg() { if (undefined.$startX - undefined.$moveX > 50) { //50px以上右にフリックした場合 direction = "right"; console.log(direction); } else if (undefined.$startX - undefined.$moveX < -50) { //50px以上左にフリックした場合 direction = "left"; console.log(direction); } }; function swipeImg(direction) { if (direction == "right") { swipe++; if(swipe < swipeImgLength) { $swipe.stop(true, false).animate( { left: swipe * -swipeImgWidth }, 500); } else { swipe = 0; $swipe.animate( { left: 0 }, 500); } } else if (direction == "left") { swipe--; if (swipe < 0) { swipe = swipeImgLength - 1; $swipe.animate( { left: swipe * -swipeImgWidth }, 500); } else { $swipe.stop(true, false).animate( { left: swipe * -swipeImgWidth }, 500); } } } }); </script> </body> </html>
試したこと
console.logにて５０ｐｘ以上フリックしないとdirectionに挿入されないことは確認できているのですが、
画像は流れて行っていまいます。
補足情報（FW/ツールのバージョンなど）
JavaScrpt,jQueryでお願いできましたら幸いです。
宜しくお願い致します。
あなたの回答
tips
プレビュー
