如何在没有任何库的情况下使用jquery swipe？

我需要创建jQuery mobile，如Swipe $("#slider ul li div").swipeleft(); 使用核心jQuery而不使用任何库或插件甚至jQuery mobile。

我知道jQuery移动小部件现在将被解耦，因此我们可以单独刷卡。 但我不能等那么久。

我需要一些类似于滑动手势的手动jQuery代码，用于滑动左右function。 我已经看过了 ，但是我无法理解如何从中轻扫手势。 任何人都可以帮我解决这个问题吗？

Answer 1

这是使用javascript进行触摸滑动的代码。 最后，通过互联网搜索我发现很难。 感谢padilicious .Below是滑块的HTML代码。

 
 
....
  

以下是触摸function的javascript代码。 这有点长。 但它对我有用。 你不必改变任何东西。 只有你必须改变的地方是processingRoutine（ ）函数。 我使用此代码sliders.goToNext()和sliders.goToPrev()调用了2个幻灯片function，即上一个和下一个。 你可以随意修改..

 var triggerElementID = null; // this variable is used to identity the triggering element var fingerCount = 0; var startX = 0; var startY = 0; var curX = 0; var curY = 0; var deltaX = 0; var deltaY = 0; var horzDiff = 0; var vertDiff = 0; var minLength = 72; // the shortest distance the user may swipe var swipeLength = 0; var swipeAngle = null; var swipeDirection = null; // The 4 Touch Event Handlers // NOTE: the touchStart handler should also receive the ID of the triggering element // make sure its ID is passed in the event call placed in the element declaration, like: // 
 function touchStart(event,passedName) { // disable the standard ability to select the touched object event.preventDefault(); // get the total number of fingers touching the screen fingerCount = event.touches.length; // since we're looking for a swipe (single finger) and not a gesture (multiple fingers), // check that only one finger was used if ( fingerCount == 1 ) { // get the coordinates of the touch startX = event.touches[0].pageX; startY = event.touches[0].pageY; // store the triggering element ID triggerElementID = passedName; } else { // more than one finger touched so cancel touchCancel(event); } } function touchMove(event) { event.preventDefault(); if ( event.touches.length == 1 ) { curX = event.touches[0].pageX; curY = event.touches[0].pageY; } else { touchCancel(event); } } function touchEnd(event) { event.preventDefault(); // check to see if more than one finger was used and that there is an ending coordinate if ( fingerCount == 1 && curX != 0 ) { // use the Distance Formula to determine the length of the swipe swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2))); // if the user swiped more than the minimum length, perform the appropriate action if ( swipeLength >= minLength ) { caluculateAngle(); determineSwipeDirection(); processingRoutine(); touchCancel(event); // reset the variables } else { touchCancel(event); } } else { touchCancel(event); } } function touchCancel(event) { // reset the variables back to default values fingerCount = 0; startX = 0; startY = 0; curX = 0; curY = 0; deltaX = 0; deltaY = 0; horzDiff = 0; vertDiff = 0; swipeLength = 0; swipeAngle = null; swipeDirection = null; triggerElementID = null; } function caluculateAngle() { var X = startX-curX; var Y = curY-startY; var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels var r = Math.atan2(Y,X); //angle in radians (Cartesian system) swipeAngle = Math.round(r*180/Math.PI); //angle in degrees if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); } } function determineSwipeDirection() { if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) { swipeDirection = 'left'; } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) { swipeDirection = 'left'; } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) { swipeDirection = 'right'; } else if ( (swipeAngle > 45) && (swipeAngle < 135) ) { swipeDirection = 'down'; } else { swipeDirection = 'up'; } } function processingRoutine() { var swipedElement = document.getElementById(triggerElementID); if ( swipeDirection == 'left' ) { sliders.goToNext(); } else if ( swipeDirection == 'right' ) { sliders.goToPrev(); } else if ( swipeDirection == 'up' ) { sliders.goToPrev(); } else if ( swipeDirection == 'down' ) { sliders.goToNext(); } }