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

<!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 移动端 触摸滑动事件的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  3. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. HTML5移动端触摸事件

    一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...

  5. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  6. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  7. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  8. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  9. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

随机推荐

  1. 怎样将word文件转化为Latex文件：word-to-latex-2.56具体解释

    首先推荐大家读一读这篇博文:http://blog.csdn.net/ibingow/article/details/8613556 --------------------------------- ...

  2. 最受Java开发者青睐的Java应用服务器 —— Tomcat

    Tomcat 是一个小型的轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选.今天,就一起来了解下 Tomcat. Java 应用服务器 Tomc ...

  3. Redis命令与配置

    命令 开启服务端 redis-server.exe redis.conf 客户端连接 redis-cli.exe -h 127.0.0.1 -p 6379 1.连接操作相关的命令 quit:关闭连接( ...

  4. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  5. 58、js扩展

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理. 一.js的作用域 任何程序设计语言都有作用域的概念,简单的说,作用 ...

  6. 字符串输入时的strlen()与\0

    在做串的数据结构时,被字符串printf %s输出时的结尾判断.strlen();长度.自定义StrCopy();字符串复制函数.StrAssign();字符串赋值函数卡了一下,固写此博巩固相关知识点 ...

  7. [数据结构]C语言栈的实现

    有始有终,所以我准备把各种数据结构都讲一次,栈也分顺序存储和链式储存,这里我们选择链式存储来讲,顺序存储没有难度(链式其实也是) 作为数据结构中最简单的栈,这里不会说太多,首先考虑一下下面的model ...

  8. IntelliJ IDEA如何设置头注释，自定义author和date

    下面这张图,保证你一看就会: 下面这个模板,你拿去改一改就行了. /** * @Author: Gosin * @Date: ${DATE} ${TIME} */ 如果觉得上面名字下面的波浪线碍眼,可 ...

  9. http性能测试工具wrk源码学习之开篇

    1.前言 最近工作需要测试nginx反向代理的性能,于是找了一些http测试工具,例如经典的Apache的ab.siege.wrk.wrk使用多线程事件驱动方式,支持lua脚本扩展.关于wrk介绍可以 ...

  10. bzoj 2726: [SDOI2012]任务安排

    Description 机 器上有N个需要处理的任务,它们构成了一个序列.这些任务被标号为1到N,因此序列的排列为1,2,3...N.这N个任务被分成若干批,每批包含相邻的 若干任务.从时刻0开始,这 ...