为了做同样的事情,我搜索并发现这一个http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html
但是在这个博客中写的代码对我来说没有意义.
我也下载了http://www.idangero.us/sliders/swiper/提供的演示,并根据我的需要尝试修改.但是不能做同样的事情.
如果有任何人有Idea或Ling或演示项目,请帮助我.
问候！
解决方法
I have made some major modification,which give more control over touch events. You can now set minimum/maximum values of touch duration,distance,and threshold for both X and Y axis.
Moreover,images now are preloaded for smoother transition between images.
我已经根据触摸事件touchstart和touchend,水平和垂直地制作了这个相当复杂的代码.代码捕获触摸事件,然后将其解释为向上,向右,向下和向左滑动.
图像根据滑动的方向与.animate()交换.向上和向下滑动,加载数组中的下一个图像;下载和右载入以前的.
不知何故,有太多的增强空间.例如,您可以计算两个事件touchstart和touchend之间的时间,以确保触摸足以触发自定义滑动.
我将通过代码的主要部分进行更多的解释.
HTML
<div class="wrapper">
<div class="inner">
<!-- images go here -->
</div>
</div>
CSS
>包装 – 高度和宽度应根据您的需要进行调整：
.wrapper {
overflow: hidden;
position: relative;
height: 200px;
width: 400px;
margin: 0 auto;
}
>内包装 – 要将图像附加到：
.inner {
height: 200px;
width: auto;
position: absolute;
left: 0;
white-space: nowrap;
}
>转换包装 – 用于图像转换和转出：
.holder,.in,.hidden {
position: absolute;
}
>隐藏预加载图像：
.hidden {
display: none;
}
JS
>变量和默认值：
var total = images.length - 1,/* images total number */
current = 0,/* image's index */
startX = '',/* touchstart X coordinate */
startY = '',/* touchstart Y coordinate */
endX = '',/* touchend X coordinate */
endY = ''; /* touchend Y coordinate */
swipeDuration = 1000,/* max touch duration */
swipeDistanceX = 50,/* X-axis min touch distance */
swipeDistanceY = 50,/* Y-axis min touch distance */
thresholdX = 30,/* X-axis max touch displacement */
thresholdY = 30; /* Y-axis max touch displacement */
>预加载图像：
将每一个包裹在持有人中,然后将其附加到内部div,pageinit事件或任何其他jQM page events.
$(document).on("pageinit","#gallery",function () {
$.each(images,function (i,src) {
$("<div class='holder hidden'><img src=" + src + " /></div>").appendTo(".inner");
});
$(".inner .holder:first-child").toggleClass("visible hidden");
});
>触摸事件解释 – 将触摸事件绑定到内部div：
触摸持续时间和距离被添加到比较.
$(document).on("touchstart",".inner",function (e,ui) {
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
start = new Date().getTime(); /* touch start */
}).on("touchmove",ui) {
/* prevent page from scrolling */
e.preventDefault();
}).on("touchend",ui) {
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
end = new Date().getTime(); /* touch end */
if ((end - start) < swipeDuration) {
if (startX > endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
showImg(current,"left");
} else if (startX < endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
showImg(current,"right");
} else if (startY > endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
showImg(current,"up");
} else if (startY < endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
showImg(current,"down");
}
}
});
>转换showImg(图像索引,滑动类型)功能：
增加了动画不透明度.
function showImg(index,type) {
if (type == "left") {
current = index;
if (current >= 0 && current < total) {
current++;
var distance = $(".visible").width();
$(".inner .holder").eq(current).css({
left: distance
}).toggleClass("in hidden");
$(".visible").animate({
left: "-" + distance + "px",opacity: 0
},600,function () {
$(this).toggleClass("visible hidden").css({
top: "auto",left: "auto"
});
});
$(".in").animate({
left: 0,opacity: 1
},500,function () {
$(this).toggleClass("in visible");
});
}
}
if (type == "up") {
current = index;
if (current >= 0 && current < total) {
current++;
var distance = $(".visible").height();
$(".inner .holder").eq(current).css({
top: distance + "px"
}).toggleClass("in hidden");
$(".visible").animate({
top: "-" + distance + "px",left: "auto"
});
});
$(".in").animate({
top: 0,function () {
$(this).toggleClass("in visible");
});
}
}
if (type == "right") {
current = index;
if (current > 0 && current <= total) {
current--;
var distance = $(".visible").width();
$(".inner .holder").eq(current).css({
left: "-" + distance + "px"
}).toggleClass("in hidden");
$(".visible").animate({
left: distance + "px",function () {
$(this).toggleClass("in visible");
});
}
}
if (type == "down") {
current = index;
if (current > 0 && current <= total) {
current--;
var distance = $(".holder").height();
$(".inner .holder").eq(current).css({
top: "-" + distance + "px"
}).toggleClass("in hidden");
$(".visible").animate({
top: distance + "px",function () {
$(this).toggleClass("in visible");
});
}
}
}
07001 (1)
(1)在iPad 2和iPhone 5 – v7.0.4上测试