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

<!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. 纯CSS实现图片

    在Web开发中.通过CSS代码也能够实现一些简单的图片,当然,假设你有耐心,也能够实现较为复杂的图片噢. 那么请问为什么有图片不去用而须要用CSS来实现呢?一是由于性能的原因,图片带给server和c ...

  2. 兔子-ps抠图

    介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...

  3. python 列表解析

    列表解析,主要用于动态创建列表 本篇主要说一下,lambda.map().和filter()同列表解析语句之间结合的用法 列表解析的基本语法为:[expr for iter_var in iterab ...

  4. 自学Python2.4-基本数据类型-字典dict(objct)

    Python dict方法总结 一.字典介绍 1.字典概述 ①字典是python中唯一内建的映射类型.又称关联数组或散列②映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关 ...

  5. NoSQL数据库

    NoSQL数据库 1.NoSQL简介 最初表示"反SQL"运动,用新型的非关系型数据库取代关系数据库:现在表示"Not only SQL"关系和非关系型数据库各 ...

  6. java8 新特性入门 stream/lambda

    Java 8 中的 Stream 是对集合(Collection)对象功能的增强,它专注于对集合对象进行各种非常便利.高效的聚合操作(aggregate operation),或者大批量数据操作 (b ...

  7. Java8函数之旅 (五) -- Java8中的排序

    前言    对数据进行排序是平常经常会用到的操作之一,使用Jav8排序可以减少你在排序这方面的代码量,优化你的代码. 测试用例代码 定义个实体类User,拥有姓名name,年龄age,积分credit ...

  8. ArcGIS 网络分析[8.3] 设置IDENetworkDataset的属性及INetworkDataset的对比/创建网络数据集

    创建网络数据集就得有各种数据和参数,这篇文章很长,慎入. 网络分析依赖于网络数据集的质量,这句话就在这里得到了验证:复杂.精确定义. 本节目录如下: 1. INetworkDataset与IDENet ...

  9. scrapy框架第一章

    操作环境:python2.7+scrapy 安装比较简单,网上教程也超多,就不在此赘述. 示例网站:https://www.cnblogs.com/cate/python/ (爬去关于博客园所有pyt ...

  10. Tomcat安装和目录简介

    要知道动态的网页必须要有服务器的支撑! 1.知名的java web服务器 Tomcat:Apache组织发布,免费开源的,轻量级 JBoss.WebLogic是商用的,价格较高,但相对于开源的更加稳定 ...