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

<!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. 分布式文件系统及FastDFS

    1.前言 今天来谈谈分布式文件系统,侧重点是文件系统,分布式稍微带一下.然后聊下我用的FastDFS的例子. 2.从小需求开始 我的博客的编辑器用的是markdown,它内嵌了一个文件上传功能,不过后 ...

  2. 7、创建ROS msg和srv

    一.msg和srv介绍 msg: msg文件使用简单的文本格式声明一个ROS message的各个域. 仅须要创建一个msg文件,就能够使用它来生成不同语言的message定义代码. srv:srv文 ...

  3. Best time to buy and sell stocks IV

    题目 https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv/ Say you have an array for which ...

  4. 查看和删除chrome浏览器缓存内容

    平时用chrome开发更多,介绍一下如何清除和查看chrome浏览器的缓存内容,其他浏览器大同小异就不细说了 打开设置==>隐私设置和安全性==>内容设置==>cookie ==&g ...

  5. java 拦截器

    一.前言 这是一篇关于 java 拦截器的文章,是我的写 java  web 所遇见的问题.当我们写好一个网站,必须要通过登陆页面才可以进入这个系统.那么我们就得写个 java 拦截器,如果是通过登录 ...

  6. 常规流(Normal flow)

    连我自己把float和绝对定位,都称为脱离文档流,想想概念又不那么清晰,于是寻找了W3C资料来理解,才发觉不应该叫文档流. 资料 英文:https://www.w3.org/TR/CSS22/visu ...

  7. asp.net core 2.0+sqlsugar搭建个人网站系列（0）

    一些废话 马上就要过年了,回顾这一年最大的收获就是技术有了很大的提升,其他的方面没有什么改变,现在还是单身小屌丝一枚. 这一年来学习的主要重点就是asp.net core,中间也使用 core+EF做 ...

  8. DEDECMS最新5.7版在Windows下的Memcache安装

    一,织梦后台后台设置进入系统后台,在[系统基本参数]下面的"性能选项"卡当中,关于memcache进行如下配置: cfg_memcache_enable : 是否启用memcach ...

  9. 【简单理解】gulp和webpack的区别

    Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...

  10. KMP 算法 C++

    #include <iostream>#include<string.h>#include<stdio.h>using namespace std; void Co ...