Html5 移动端触摸滑动事件-白红宇

以下代码经过测试没有问题且可以循环滑动

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//初始化获取浏览器的屏幕的宽度

var LoadWidth = parseInt($(window).width());

//初始化触摸起点X轴

var loadX = 0;

//初始化触摸起点Y轴

var loadY = 0;

//初始化鼠标松开的X轴

var MoveUp = 0;

$(function () {

$(".imagestart").on('touchstart', function (e) {

var id = e.originalEvent.targetTouches[0];

//获取鼠标的起始位置x

var x = id.pageX;

//赋值起始位置x

loadX = x;

//点击时赋值鼠标起来的坐标在移动的时候会更新这个变量

MoveUp = x;

//获取鼠标的起始位置y

var y = id.pageY;

loadY = y;

$(this).css('position', 'fixed');

})

$(".imagestart").on("touchmove", function (e) {

var id = e.originalEvent.targetTouches[0];

//获取鼠标的每次移动位置x

var x = id.pageX;

MoveUp = x;

//获取鼠标的每次移动位置y

var y = id.pageY;

var ThisLoad = $(this);var ddd = x - loadX;

//移动元素

ThisLoad.animate({ 'left': x - loadX + "px" }, 0);

if ($(this).attr("data-id") == 3) {

//$(".imagestart").hide();

$(".imagestart").eq(0).show();

} else {

$(this).next().show();

}

})

$(".imagestart").on("touchend", function (e) {

//当手指松开的时候计算鼠标移动开始到结束 x轴变化多少

var MoveX = loadX - MoveUp;

if (MoveX<0) {

MoveX = MoveUp - loadX;

}

$(".imagestart").css("left", "0px");

//如果移动的x轴大于浏览器宽度的3/10 则换图片

if (MoveX / LoadWidth > 0.4) {

if ($(this).attr("data-id") == 3) {

//隐藏所有

$(".imagestart").hide();

//清空元素的style

$(".imagestart").removeAttr("style");

//让第一个显示

$(".imagestart").eq(0).css("display", "block");

} else {

//隐藏当前

$(this).css("display", "none");

//显示下一个元素

$(this).next().show();

}

} else {

//如果移动的位置屏幕的40%小于则图片返回到初始的位置

$(this).animate({ "letf": "0px" },0);

}

//恢复初始坐标

loadX = 0;

//恢复鼠标松开坐标

MoveUp = 0;

})

</script>

</body>

</html>