Html5 移動端 觸摸滑動事件
以下代碼經過測試 沒有問題 且可以循環滑動
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5測試</title>
<link href="Css/Index.css" rel="stylesheet" />
</head>
<body>
<div id="Index" style="text-align: center; width: auto;">
<img src="img/1.jpeg" class="imagestart" style="display: block;" data-id="1" />
<img src="img/2.jpeg" class="imagestart" data-id="2" />
<img src="img/3.jpeg" class="imagestart" data-id="3" />
</div>
<script src="/js/jquery-1.12.4.min.js"></script>
<script>
//初始化獲取瀏覽器的屏幕的寬度
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>
Html5 移動端 觸摸滑動事件