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

<!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. flask 上传文件

    flask upload 近日在学习python,接触到了flask框架,刚好客户有个需求,需要在网页上传一个python 代码的zip包,然后使用docker 容器运行这个zip里面的程序,输出结果 ...

  2. android 事件传递机制（1）

    在项目中,经常遇到事件冲突,ScrollView,ViewPager滑动卡顿等情况,比如:onClick和onLongClick事件冲突,dispatchTouchEvent,onInterceptT ...

  3. 《英文写作指南 The elements of style》【PDF】下载

    <英文写作指南 The elements of style>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196361 The el ...

  4. 用过的关于css的知识

    1.代码片段 让两个div并排起来显示. <div style="width:1000px; text-align:center;" id="content&quo ...

  5. ABP-Module

    [TOC] 什么是Module? Module就是模块化的设计思想.开发人员可以将自定义的功能以模块的形式集成到项目中.具体的功能也可以设计成一个单独的模块 AbpModule AbpModule是所 ...

  6. 使用 webpack 打包 font 字体的问题

    之前在使用 Vue 做项目的时候使用了 font 字体,然而在打包的时候 font 字体的引用路径不正确. 解决办法就是在 webpack 的配置文件中设置根路径 目录在 \config\index. ...

  7. 三菱Q系列PLC的智能功能模块程序

    一.模拟量输入模块Q64AD 1.模块开关或者参数设置 1.1I/O分配 1.2开关设置使用通道1,0-5v, 1.3使用GX configurator设置自动刷新PLC设置智能功能模块参数,即将模拟 ...

  8. 在Ubuntu14.04下安装 ffmpeg-2.4.13（处理视频用，将视频保存为图片序列）

    首先在 http://www.ffmpeg.org/olddownload.html 下载 ffmpeg-2.4.13.tar.bz2 : 然后安装 yasm 和 libx264: apt-get i ...

  9. 598. Range Addition II

    Given an m * n matrixMinitialized with all0's and several update operations. Operations are represen ...

  10. BZOJ2001 HNOI2010 城市建设

    题目大意:动态最小生成树,可以离线,每次修改后回答,点数20000,边和修改都是50000. 顾昱洲是真的神:顾昱洲_浅谈一类分治算法 链接: https://pan.baidu.com/s/1c2l ...