移动端滑屏组件
Posted 飞旋的留恋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端滑屏组件相关的知识，希望对你有一定的参考价值。
https://github.com/lihefen/slide.git
https://lihefen.github.io/slide/slide/index.html
slide.js
/**
*
* @authors Your Name ([email protected])
* @date 2016-12-20 15:54:47
* @version $Id$
*/
var H = document.documentElement.clientHeight;
function Slide(){
this.obj = null;
this.len = 0;
this.index = 0; //初始位置 第一页 也是当前页
this.autoPlay = null; //是否自动播放
this.value = 0; //滑动的距离
this.lr = true; //默认 左右滑动 true 上下滑动 是 false
this.settings = { //默认的值
‘autoPlay‘ : false,
‘lr‘ : true,
‘value‘ : document.documentElement.clientWidth,
}
this.decide = 0 ;
this.value_sum = 0;
this.distance = 0; //距离 判断滑动多少距离 就执行
this.start_value = 0; //初始值
this.pre_value = // 原来值
this.iSpeed = 0; //速度
this.count = 0;
}
Slide.prototype = {
constructor : Slide,
init : function(opt){ //初始化
var _this = this;
this.obj = document.getElementById(opt.id);
extend(this.settings,opt);
this.len = this.settings.len;
this.autoPlay = this.settings.autoPlay;
this.lr = this.settings.lr; ;
this.value = this.settings.value; //滑动的距离
this.value_sum = this.len*this.value;
this.decide = this.value / 2;
if(opt.decide){
this.decide = opt.decide;
}
this.obj.style.display = ‘none‘; //先隐藏节点
this.obj.style.display = ‘block‘; //操作完再显示出来
this.obj.addEventListener(‘touchstart‘,function(ev){
_this.config(ev);
},false);
this.obj.addEventListener(‘touchmove‘,function(ev){
_this.move(ev);
},false);
this.obj.addEventListener(‘touchend‘,function(ev){
_this.end();
},false);
_this.playTo(0);
_this.onchange = this.settings.onchange;
window.setTimeout(function(){
_this.onchange(0);
},300)
},
config : function(ev){
if(this.lr){
this.start_value = ev.touches[0].clientX;
}else{
this.start_value = ev.touches[0].clientY;
}
this.distance = 0;
this.iSpeed = 0;
},
move : function(ev){
if(this.lr){
var dix = ev.touches[0].clientX;
}else{
var dix = ev.touches[0].clientY;
}
this.iSpeed = dix - this.pre_value;
//console.log( this.iSpeed )
this.pre_value = dix; //把现在的 复制给原来的
this.distance = dix - this.start_value;
if(this.lr){
this.obj.style.cssText = ‘-webkit-transform: translate3d(‘+(this.distance-this.index*this.value)+‘px,0,0);-webkit-transition: 0ms;‘;
}else{
this.obj.style.cssText = ‘-webkit-transform: translate3d(0,‘+(this.distance-this.index*this.value)+‘px,0);-webkit-transition: 0ms;‘;
}
},
end : function(){
if( this.distance > this.decide || this.iSpeed >=3 ){
this.prev();
}else if( this.distance < -this.decide || this.iSpeed <= -3 ){
this.next();
}else{
this.playTo(this.index);
}
},
playTo : function(i){ //执行变化
this.count ++ ; //为防止初始化时就说 已经是第一页啦
var _this = this;
var before = this.index;
if( i > this.len - 1 ){
i = this.len - 1;
}else if( i < 0 ){
i = 0;
}
this.index = i;
if( this.index == 0 && this.count>1 ){
}else if( this.index == this.len-1 ){
}
if(this.lr){
this.obj.style.cssText = ‘-webkit-transform: translate3d(‘+(-this.index*this.value)+‘px,0,0);-webkit-transition: 300ms;‘;
}else{
this.obj.style.cssText = ‘-webkit-transform: translate3d(0,‘+(-this.index*this.value)+‘px,0);-webkit-transition: 300ms;‘;
}
if( before != this.index ){
window.setTimeout(function(){
_this.settings.onchange && _this.settings.onchange.call(_this,_this.index);
},300)
}
},
prev : function(){
this.playTo(this.index-1);
},
next : function(){
this.playTo(this.index+1);
}
}
function extend(obj1,obj2){ //把obj2的属性覆盖obj1的属性
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
main.js
var slide = new Slide();
slide.init({
‘id‘ : ‘main‘,
‘lr‘ : false, //是否左右滑动 默认是左右滑动 可以不写
‘value‘ : H, //滑动的距离 默认是当前屏幕的左右距离 可以不写
‘decide‘ : 50, //决定是否滑动的距离 默认是 滑动距离的一半 可以不写
‘len‘ : 1,
‘onchange‘ : function(n){
}
});
slide.len = 4;
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="" >
<meta name="description" content="" >
<title>slide</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wraper" id="wraper">
<div class="container" id="container">
<div class="main pr ani-n" id="main">
<section class="sec sec-1"></section>
<section class="sec sec-2"></section>
<section class="sec sec-3"></section>
<section class="sec sec-4"></section>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
以上是关于移动端滑屏组件的主要内容，如果未能解决你的问题，请参考以下文章