<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>移动端触摸滑动</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="移动端触摸滑动" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<link type="text/css" rel="stylesheet" href="common/css/reset.css" />
<link type="text/css" rel="stylesheet" href="common/css/common.css" />
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.m-slider{
100%;
overflow:hidden;}
.m-slider .cnt{
position: relative;
left:0;
500%;
overflow: hidden;
}
.m-slider .cnt > div{
20%;
float: left;
}
.m-slider .cnt img{
display:block;
100%;
}
.m-slider .cnt p{
margin:20px 0;
}
.m-slider .icons{
text-align:center;
color:#000;
}
.m-slider .icons span{
margin:0 5px;
}
.m-slider .icons .curr{
color:red;
}
.f-anim{
-webkit-transition:left .2s linear;
}
#slider{
top: 0px;
}
</style>
</head>
<body>
使用说明在底部
<div class="m-slider">
<div class="cnt" id="slider" style="top: 0px;">
<p>上上上上上上上上上上上</p>
<div>
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div>
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div>
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div>
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div>
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="m-slider">
<div class="cnt" id="slider1" style="top: 0px;">
<p>下下下下下下下下下下下下下下</p>
<div>
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div>
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div>
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div>
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div>
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons1">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="m-slider">
<div class="cnt" id="slider2" style="top: 0px;">
<p>上下上下上下上下上下上下</p>
<div>
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div>
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div>
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div>
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div>
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons2">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="m-slider">
<div class="cnt" id="slider3" style="top: 0px;">
<p>左左左左左左左左左左</p>
<div>
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div>
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div>
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div>
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div>
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons3">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="m-slider">
<div class="cnt" id="slider4" style="top: 0px;">
<p>左右左右左右左右</p>
<div>
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div>
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div>
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div>
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div>
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons4">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script>
var Slider = {
//判断设备是否支持touch事件
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
init:function(obj){//初始化
if(obj && obj.ele){
var self = this;
var events = obj.events;//事件
events.ele = obj.ele;
events.htmEle = document.getElementById(events.ele);//滑动标识
events.icon = obj.icon;
if(events.icon){
events.htmIcon = document.getElementById(events.icon);//滑动icon盒子标识
if(events.htmIcon){
events.icons = events.htmIcon.getElementsByTagName("span");//滑动具体icon标识
}
}
events.index = 0;//当前滑动索引
events.isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
events.isUpDown = 0; //这个参数判断是向上滚动还是向下滚动
events.isLeftRight = 0; //这个参数判断是向左滚动还是向右滚动
if(!!self.touch) {
//addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
if(events.htmEle){
events.htmEle.addEventListener('touchstart',events.start,false);
events.htmEle.addEventListener('touchmove', events.move, false);
events.htmEle.addEventListener('touchend',events.end , false);
}else{
console.log("输入的元素标识无效");
return;
}
}
}else{
console.log("未能初始化成功");
return;
}
},
slideUp:function(obj){//向上滑动
var that = this;
if(typeof that.flag == "undefined") {
Slider.slideUp.prototype.start = function (event) {
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.top){
that.top = that.htmEle.style.top;
that.top = parseInt(that.top.substr(0,that.top.length-2));
}else{
that.top = 0;
}
};
Slider.slideUp.prototype.move = function (event) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动
if (that.isScrolling === 1 && that.isUpDown === 1) {//垂直滚动 向上
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight;
that.htmEle.style.top = (that.top + that.endPos.y) + 'px';
}
};
Slider.slideUp.prototype.end = function (event) {
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.y,duration);
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
},
slideDown:function(obj){//向下滑动
var that = this;
if(typeof this.flag == "undefined") {
Slider.slideDown.prototype.start = function (event) {
//this html元素
//that Slider.slideUp
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.top){
that.top = that.htmEle.style.top;
that.top = parseInt(that.top.substr(0,that.top.length-2));
}else{
that.top = 0;
}
};
Slider.slideDown.prototype.move = function (event) {
//当页面被缩放过，就不执行move操作
if ( event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动
if (that.isScrolling === 1 && that.isUpDown === 0) {//垂直滚动 向下
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight;
that.htmEle.style.top = (that.top + that.endPos.y) + 'px';
}
};
Slider.slideDown.prototype.end = function (event) {
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.y,duration);
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
},
slideUpDown:function(obj){//上下
var that = this;
if(typeof this.flag == "undefined") {
Slider.slideUpDown.prototype.start = function (event) {
//this html元素
//that Slider.slideUp
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.top){
that.top = that.htmEle.style.top;
that.top = parseInt(that.top.substr(0,that.top.length-2));
}else{
that.top = 0;
}
};
Slider.slideUpDown.prototype.move = function (event) {
//当页面被缩放过，就不执行move操作
if ( event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动
if (that.isScrolling === 1) {//垂直滚动 向下
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight;
that.htmEle.style.top = (that.top + that.endPos.y) + 'px';
}
};
Slider.slideUpDown.prototype.end = function (event) {
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.y,duration);
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
},
slideLeft:function(obj){//向左滑动
var that = this;
if(typeof that.flag == "undefined") {
Slider.slideLeft.prototype.start = function (event) {
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.left){
that.left = that.htmEle.style.left;
that.left = parseInt(that.left.substr(0,that.left.length-2));
}else{
that.left = 0;
}
};
Slider.slideLeft.prototype.move = function (event) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时表示向上滑动，0为向下滑动
that.isLeftRight = that.endPos.x < 0 ? 1:0; //isScrolling为1时表示向左滑动，0为向右滑动
if (that.isScrolling === 0 && that.isLeftRight === 1 ) {//水平向左滚动
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = (that.left + that.endPos.x) + 'px';
}
};
Slider.slideLeft.prototype.end = function (event) {
var duration = +new Date - that.startPos.time; //滑动的持续时间
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.x,duration);
}else{
that.icons[that.index].className = '';
if(Number(duration) > 10){
//判断是左移还是右移，当偏移量大于10时执行
if(that.endPos.x < -10){//向左滑动
if(that.index !== that.icons.length-1){
that.index += 1;
}
}
}
that.icons[that.index].className = 'curr';
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = -that.index*moveLen + "px";
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
},
slideRight:function(obj){//向右滑动
var that = this;
if(typeof that.flag == "undefined") {
Slider.slideRight.prototype.start = function (event) {
//this html元素
//that Slider.slideUp
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.left){
that.left = that.htmEle.style.left;
that.left = parseInt(that.left.substr(0,that.left.length-2));
}else{
that.left = 0;
}
};
Slider.slideRight.prototype.move = function (event) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动
that.isLeftRight = that.endPos.x < 0 ? 1:0; //isScrolling为1时表示向左滑动，0为向右滑动
if (that.isScrolling === 0 && that.isLeftRight === 0) {//水平向右滚动
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = that.left + that.endPos.x + 'px';
}
};
Slider.slideRight.prototype.end = function (event) {
var duration = +new Date - that.startPos.time; //滑动的持续时间
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.x,duration);
}else{
that.icons[that.index].className = '';
if(Number(duration) > 10){
//判断是左移还是右移，当偏移量大于10时执行
if(that.endPos.x > 10){//向右滑动
if(that.index !== 0) {
that.index -= 1;
}
}
}
that.icons[that.index].className = 'curr';
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = -that.index*moveLen + "px";
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
},
slideLeftRight:function(obj){//左右滑动
var that = this;
that.endFn = this.endFn = obj.endFn;
that.iconClass = obj.iconClass;
if(typeof that.flag == "undefined") {
Slider.slideLeftRight.prototype.start = function (event) {
//this html元素
//that Slider.slideUp
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值
if(that.htmEle.style.left){
that.left = that.htmEle.style.left;
that.left = parseInt(that.left.substr(0,that.left.length-2));
}else{
that.left = 0;
}
};
Slider.slideLeftRight.prototype.move = function (event) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if ( event.scale && event.scale !== 1) {
return;
}
var touch = event.targetTouches[0];
that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y};
that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动
if (that.isScrolling === 0) {//水平滚动
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = that.left + that.endPos.x + 'px';
}
};
Slider.slideLeftRight.prototype.end = function (event) {
var duration = +new Date - that.startPos.time; //滑动的持续时间
if(typeof obj.endFn === "function"){
obj.endFn(that.index,that.endPos.x,duration);
}else{
that.icons[that.index].className = '';
if(Number(duration) > 10){
//判断是左移还是右移，当偏移量大于10时执行
if(that.endPos.x > 10){//向左滑动
if(that.index !== 0) {
that.index -= 1;
}
}else if(that.endPos.x < -10){//向右滑动
if(that.index !== that.icons.length-1){
that.index += 1;
}
}
}
that.icons[that.index].className = that.iconClass;
var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth;
that.htmEle.style.left = -that.index*moveLen + "px";
}
};
that.flag = true;
}
obj.events = that;
Slider.init(obj);//初始化并绑定事件
}
};
var slideUp =new Slider.slideUp({
ele:"slider"
});
var slideDown =new Slider.slideDown({
ele:"slider1"
});
var slideUpDown =new Slider.slideUpDown({
ele:"slider2"
});
var slideLeft =new Slider.slideLeft({
ele:"slider3",
icon:"icons3",
endFn:function(index,x,duration){
}
});
var slideLeftRight =new Slider.slideLeftRight({
ele:"slider4",
icon:"icons4",
iconClass:"curr"
});
/*使用方法：
核心样式：
<style>
.m-slider{
100%;
overflow:hidden;
}
.m-slider .cnt{
position: relative;
left:0;
500%;
overflow: hidden;
}
</style>
* html结构：
* <div class="m-slider">
<div class="cnt" id="slider4"><!-- 滑动最外层盒子 必须是id标识
<p>左右左右左右左右</p>
<div><!-- 滑动具体盒子 必须是div
<img src="img/move1.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</div>
<div><!-- 滑动具体盒子 必须是div
<img src="img/move2.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</div>
<div><!-- 滑动具体盒子 必须是div
<img src="img/move3.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</div>
<div><!-- 滑动具体盒子 必须是div
<img src="img/move4.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</div>
<div><!-- 滑动具体盒子 必须是div
<img src="img/move5.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</div>
</div>
<div class="icons" id="icons4"><!--- 标识盒子 必须是id标识 该部分当需要时填写
<span class="curr">1</span><!--- 具体标识 必须是span
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
*js使用方法：
* 上：
* var slideUp =new Slider.slideUp({
ele:"slider", //滑动盒子标识 必选
endFn:function(index,distance,duration){//注：滑动结束时的方法 所有滑动均有该方法，可选
//index 滑动的标识
//distance 滑动距离
//duration 滑动时间
}
});
下：
var slideDown =new Slider.slideDown({
ele:"slider1"
});
上下：
var slideUpDown =new Slider.slideUpDown({
ele:"slider2"
});
左：
var slideLeft =new Slider.slideLeft({
ele:"slider3",
icon:"icons3"
});
右：
var slideLeft =new Slider.slideLeft({
ele:"slider3",
icon:"icons3"
});
左右
var slideLeftRight =new Slider.slideLeftRight({//在没有传入endFn方法时是一个插件内的滑动效果 模拟滑动幻灯片
ele:"slider4",
icon:"icons4",
iconClass:"curr"//仅在左右滑动时 没有endFn方法时有效
});
*
*
*
*
*
*
*
* */
</script>
</body>
</html>