Mobile Slide-screen components

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; Initial position the first page is also the current page
This.autoplay = null; Whether to play automatically

this.value = 0; Distance to Slide
THIS.LR = true; Default left or right swipe true up/down swipe false
This.settings = {//default value
' AutoPlay ': false,
' LR ': true,
' Value ': Document.documentElement.clientWidth,
}
this.decide = 0;

this.value_sum = 0;
this.distance = 0; Distance to determine how far the slide is performed
This.start_value = 0; Initial value
This.pre_value =//Original value
this.ispeed = 0; Speed
This.count = 0;

}

Slide.prototype = {
Constructor:slide,
Init:function (OPT) {//initialization
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; Distance to Slide
This.value_sum = This.len*this.value;
This.decide = THIS.VALUE/2;
if (opt.decide) {
This.decide = Opt.decide;
}
This.obj.style.display = ' None '; Hide Nodes First

This.obj.style.display = ' block '; Show it again after operation

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; Copy the present to the original
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) {//Perform changes

This.count + +; It's the first page to prevent initialization.
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 property overrides Obj1
for (Var attr in obj2) {
OBJ1[ATTR] = obj2[attr];
}
}

Main.js

var slide = new Slide ();
Slide.init ({
' ID ': ' main ',
' LR ': false,//whether the left or right slide is left to no write by default
' Value ': H,//sliding distance default is the current screen of the left and right distance can not write
' Decide ': 50,//decide whether to slide the distance by default is half of the sliding distance can not be written
' Len ': 1,
' OnChange ': function (n) {

}
});
Slide.len = 4;

Html

<!doctype html>
<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" >
<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>

Mobile Slide-screen components