javascript - jquery - 滑动页面计数

Question

我正在使用库 touchSwipe.js 创建滑动页面系统。

使用我的方法，我可以在页面之间切换，但是，我无法正确返回上一页。

现在，如果我向右和向左滑动几次，计数系统就会对滑动进行求和。我怎样才能正确地建立计数系统以便在页面之间移动？

var swipeRight = 0;
var swipeLeft = 0;
var swipePage = 0;

function swipe1(event, direction, distance, duration, fingerCount) {

  if (direction == "left") {
    swipeLeft++;
    if (swipeLeft == 5) {
      swipeLeft = 0;
    }
  }

  if (direction == "right") {
    swipeRight++;
    if (swipeRight == 5) {
      swipeRight = 0;
    }
  }

  swipePage = swipeLeft - swipeRight;

  if (swipePage == 0) {
    $("html, body").animate({
      scrollLeft: 0,
    }, 1500);
    swipeLeft = 0;
    swipeRight = 0;
  }

  if (swipePage == 1) {
    $("html, body").animate({
      scrollLeft: $("#hwwPage").offset().left
    }, 1500);
  }

  if (swipePage == 2) {
    $("html, body").animate({
      scrollLeft: $("#projPage").offset().left
    }, 1500);
  }

  if (swipePage == 3) {
    $("html, body").animate({
      scrollLeft: $("#digiPage").offset().left
    }, 1500);
  }

  if (swipePage == 4) {
    $("html, body").animate({
      scrollLeft: $("#contPage").offset().left
    }, 1500);
  }

  console.log(swipeRight + "+" + swipeLeft);
  console.log(swipePage);
}

Answer 1

我已经修复了你的代码:我认为你并不真的需要 swipeleft 和 swiperight。只需根据滑动方向增加或减少 swipePage 值:

var swipePage = 0;

function swipe1(event, direction, distance, duration, fingerCount) {

    if (direction == "left") 
        if (swipePage > 0) 
           swipePage++;

    if (direction == "right") 
        if (swipePage < 4) 
           swipePage--;

    var pageIds = ["",
                   "#hwwPage",
                   "#projPage",
                   "#digiPage",
                   "#contPage"
                  ];
    $("html, body").animate({
       scrollLeft: $(pageIds[swipePage]).offset().left
    }, 1500);
}