我正在为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++;
};
};