向右滑动并向左滑动

时间:2013-11-07 06:41:07

标签: javascript jquery swipe

我正在为ipad构建一个应用程序。理想情况下,我希望主屏幕显示徽标,向左滑动以查看注册页面,然后向右滑动以登录。我希望第一个屏幕加载为var numberOfSliderObjects = 3的“中间”。我设置var currentSliderObject = 2(中间)我只能向左滑动一次,这是正确的,但是当我一直向右滑动时,我的div id ='slider'有element.style:left :768px;当它应该是0px并且仍然可以滑动。

var numberOfSliderObjects = 3;
var currentSliderObject = 2;
var slideDistance = 768;

// MOUSE EVENTS

$('#sliderPrevButton').on('tap', function(event){
    event.preventDefault();
    slideToPrevious();
});

$('#sliderNextButton').on('tap', function(event){ 
    event.preventDefault();
    slideToNext();  
});

//接触事件

$('#slider').on('swiperight', function(event){ 
    event.stopPropagation();
    slideToPrevious();
});

$('#slider').on('swipeleft', function(event){ 
    event.stopPropagation();
    slideToNext();      
});

//功能

function slideToPrevious(){
    if(currentSliderObject>1){
    $("#slider").animate({
    left: '+='+slideDistance
    }, 'easeInOutExpo');    

    currentSliderObject--;

    };
};

function slideToNext(){
    if(currentSliderObject<numberOfSliderObjects){
    $("#slider").animate({
    left: '-='+slideDistance
    }, 'easeInOutExpo');    

    currentSliderObject++;
    };
};

0 个答案:

没有答案