我在制作动画时遇到一些问题,并且在我的ipad上随机停留
所以我有这个HTML
<body>
<div class="touchslider-prev sliderButtons" style="display: block;">back</div>
<div class="touchslider-next sliderButtons" style="display: block;">next</div>
<section id="mainContent" style="width: 950px; overflow:hidden">
<div id="pageHolder" style="float: left; left: 0; position: relative; width: 6000px;">
<div class="pageSize activeSlide" id="page1" style="width: 950px; float: left; position: relative; height:500px; background-color:#F00">
blah
</div>
<div class="pageSize " id="page" style="width: 950px; float: left; position: relative; height:500px; background-color:#FF0">
blah 2
</div>
</div>
</section>
</body>
和这个javascript
<script type="text/javascript">
function clickHandlerPrev(event) {
// If event isn't already marked as handled, handle it
if(event.handled !== true) {
// Kill event handler, preventing any more clicks
jQuery(window).off("swipeBackward", clickHandlerPrev);
jQuery(window).off("swipeForward", clickHandlerNext);
// Do your stuff here
pageSize = jQuery(".mainHeader").width();
slide("back", pageSize);
// Mark event as handled
event.handled = true;
}
return false;
}
function clickHandlerNext(event) {
// If event isn't already marked as handled, handle it
if(event.handled !== true) {
// Kill event handler, preventing any more clicks
jQuery(window).off("swipeBackward", clickHandlerPrev);
jQuery(window).off("swipeForward", clickHandlerNext);
// Do your stuff here
pageSize = jQuery(".mainHeader").width();
slide("forward", pageSize);
// Mark event as handled
event.handled = true;
}
return false;
}
function slide(data, pageSize) {
if (!pageSize) {
pageSize = 950;
}
var left = calcLeft(data, pageSize);
jQuery('#pageHolder').animate({
left: left
}, 400, function() {
console.log("animation started");
jQuery(window).on("swipeBackward", clickHandlerPrev);
jQuery(window).on("swipeForward", clickHandlerNext);
console.log("animation complete");
});
}
function calcLeft(action, pageSize){
var left;
var currentPos = currentPosition();
if (action == "back") {
console.log(pageSize);
if (currentPos == "0") {
left = -pageSize * 1;
} else {
left = currentPos + pageSize ;
}
} else if (action == "forward") {
if (currentPos == -pageSize * 1) {
left = 0;
} else {
left = currentPos - pageSize ;
}
}
return left;
}
function currentPosition() {
var currentPosition = parseInt(jQuery("#pageHolder").css("left"), 10);
return currentPosition;
}
jQuery(document).ready(function () {
jQuery(".touchslider-prev").click( function() {
jQuery(window).trigger('swipeForward');
});
jQuery(".touchslider-next").click( function() {
jQuery(window).trigger('swipeBackward');
});
jQuery(window).on('swipeForward', clickHandlerNext );
jQuery(window).on('swipeBackward', clickHandlerPrev );
console.log("here");
var maxTime = 1000,
// allow movement if < 1000 ms (1 sec)
maxDistance = 50,
// swipe movement of 50 pixels triggers the swipe
target = jQuery('.pageSize'),
startX = 0,
startTime = 0,
touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';
target.bind(startEvent, function(e) {
// prevent image drag (Firefox)
// e.preventDefault();
startTime = e.timeStamp;
startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
startTime = 0;
startX = 0;
}).bind(moveEvent, function(e) {
// e.preventDefault();
var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
// allow if movement < 1 sec
currentTime = e.timeStamp;
if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
if (currentX < startX) {
// swipe left code here
console.log("page forward trigger");
jQuery(window).trigger('swipeForward');
}
if (currentX > startX) {
// swipe right code here
console.log("page back trigger");
//slide("back", pageSize);
jQuery(window).trigger('swipeBackward');
}
startTime = 0;
startX = 0;
}
});
});
</script>
如果你打开这个就说一个ipad的想法是你可以刷主色面板。这有时会工作,有时也不会,我真的很难找到原因
任何人都可以帮忙吗?
幻灯片会定期停止,但如果用户只使用后退/下一个按钮,它总是有效,但幻灯片代码似乎没有问题,因为它只会触发事件?
我已将代码放在这里
http://demo.stg.brightonconsulting.net.au/templates/tests/ipadSlider/
答案 0 :(得分:0)
在我看来,您可以为swipeForward和swipeBackward安装事件处理程序,但之后您只需卸载触发的事件处理程序。下一次,你再次安装两个事件处理程序,因此其中一些将堆积并安装多次,当一次安装多次触发时,肯定会弄乱你的动画。如果你要在一个人开火时卸载,那么你需要卸载两个,而不仅仅是解雇的那个。点击处理程序也存在同样的问题。
此外,在calcLeft()
中,变量left
应声明为局部变量。另外,当jQuery.when(promise)
是整数时promise
做什么?您应该将延迟对象传递给jQuery.when()
。