<!
DOCTYPE
HTML>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<
meta
name
=
"apple-touch-fullscreen"
content
=
"YES"
/>
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black"
/>
<
style
type
=
"text/css"
>
body{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
}
#cash_slider_canvas{
width: 100%;
height: 100%;
/*height: 568px;*/
overflow: hidden;
/*background: black;*/
}
.cash_slider_li,.cash_slider_ul{
list-style: none;
height: 100%;
overflow: hidden;
}
.cash_slider_li{
/*width: 100%;
height: 568px;*/
position: absolute;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cash_slider_img{
/*height: 568px;*/
/*height: 90%;*/
max-height: 100%;
max-width: 100%;
overflow: hidden;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"cash_slider_canvas"
>
<!-- <ul>
<li class="cash_slider_li" style="-webkit-transform:translate3d(0,0,0);">
<img class="cash_slider_img" src="imgs/0.jpg">
</li>
<li class="cash_slider_li" style="-webkit-transform:translate3d(320px,0,0);">
<img class="cash_slider_img" src="imgs/1.jpg">
</li >
<li class="cash_slider_li" style="-webkit-transform:translate3d(640px,0,0);">
<img class="cash_slider_img" src="imgs/2.jpg">
</li>
</ul> -->
</
div
>
<
script
type
=
"text/javascript"
>
//构建组件
var Slider = function(obj){
//构造函数需要的参数
this.canvas = obj.dom;
this.list = obj.list;
//初始化
this.init();
//渲染DOM
this.renderDOM();
//绑定DOM事件
this.bindDOM();
}
//初始化
Slider.prototype.init = function(){
//屏幕比例
this.scale = window.innerHeight / window.innerWidth;
//屏幕宽度
this.scaleW = window.innerWidth;
//初始化索引
this.idx = 0;
};
//渲染DOM
Slider.prototype.renderDOM = function(){
var scale = this.scale;
var scaleW = this.scaleW;
var canvas = this.canvas;
var lis = this.list;
var len = lis.length;
this.ul = document.createElement('ul');
for(i = 0 ; i <
len
; i++){
var
li
=
document
.createElement('li');
li.className
=
"cash_slider_li"
;
li.style.webkitTransform
=
"translate3d("
+ i * scaleW +"px, 0, 0)";
var
item
=
lis
[i];
//判断图片比例 确定图片显示方式
if(item['height'] / item['width'] > scale){
//长图
li.innerHTML = '<
img
class
=
"cash_slider_img"
src
=
"'+ item['img'] +'"
height
=
"'+ item['height'] +'"
/>';
}else{
//宽图
li.innerHTML = '<
img
class
=
"cash_slider_img"
src
=
"'+ item['img'] +'"
width
=
"'+ item['width'] +'"
/>';
}
this.ul.appendChild(li);
}
this.ul.style.cssText = 'width:' + scaleW + 'px';
this.ul.className = "cash_slider_ul";
canvas.style.height = window.innerHeight + 'px';
canvas.appendChild(this.ul);
};
//绑定事件
Slider.prototype.bindDOM = function(){
var self = this;
var ul = this.ul;
var scaleW = this.scaleW;
var len = self.list.length;
var startHandler = function(event){
event.preventDefault();
//开始坐标
self.startX = event.touches[0].pageX;
//初始化偏移值
self.offsetX = 0;
//开始时间
self.startTime = new Date() * 1;
};
var moveHandler = function(event){
event.preventDefault();
self.offsetX = event.touches[0].pageX - self.startX;
var lis = ul.getElementsByTagName('li');
console.log(self.offsetX);
var i = self.idx - 1;
var m = i + 3;
for(i ; i <
m
; i++){
// lis[i] && (lis[i]
.style.webkitTransition
=
'-webkitTransform 0s ease-out'
);
lis[i] && (lis[i]
.style.webkitTransition
=
'none'
);
lis[i] && (lis[i]
.style.webkitTransform
=
'translate3d('
+ ((i - self.idx) * self.scaleW + self.offsetX) +'px, 0, 0)');
}
};
var
endHandler
=
function
(event){
event.preventDefault();
//滑动值
var
offsetX
=
self
.offsetX;
//结束时间
var
endTime
=
new
Date() * 1;
var
boundary
=
scaleW
/ 6;
// 根据触摸时长触发快慢操作
if(endTime - self.startTime > 300){
//慢操作
if(offsetX >= boundary ){
//下一页
self.goIndex('-1');
}else if(offsetX < -boundary ){
//上一页
self.goIndex('+1');
}else{
//本页
self.goIndex('0');
}
}else{
//快操作
if(offsetX > 50){
//下一页
self.goIndex('-1')
}else if(offsetX < -50){
//上一页
self.goIndex('+1');
}else{
//本页
self.goIndex('0');
}
}
};
ul.addEventListener('touchstart', startHandler);
ul.addEventListener('touchmove', moveHandler);
ul.addEventListener('touchend', endHandler);
};
Slider.prototype.goIndex = function(n){
var idx = this.idx;
var lis = this.ul.getElementsByTagName('li');
var len = lis.length;
var cidx;
//如果是传字符则为索引的变化
if(typeof n =='number'){
cidx = idx;
}else if(typeof n =='string'){
cidx = idx + n * 1;
}
//索引超出
if(cidx > len - 1){
cidx = len - 1;
}else if(cidx <
0
){
cidx
=
0
;
}
//保留当前索引值
this.idx
=
cidx
;
//改变过渡方式,从无动画变成有动画
lis[cidx]
.style.webkitTransition
=
'-webkit-transform 0.2s ease-out'
;
lis[cidx - 1] && (lis[cidx - 1]
.style.webkitTransition
=
'-webkit-transform 0.2s ease-out'
);
lis[cidx + 1] && (lis[cidx + 1]
.style.webkitTransition
=
'-webkit-transform 0.2s ease-out'
);
//改变动画后所应该的位移值
lis[cidx]
.style.webkitTransform
=
'translate3d(0, 0, 0)'
;
lis[cidx - 1] && (lis[cidx - 1]
.style.webkitTransform
=
'translate3d(-'
+ this.scaleW +'px, 0, 0)');
lis[cidx + 1] && (lis[cidx + 1]
.style.webkitTransform
=
'translate3d(+'
+ this.scaleW +'px, 0, 0)');
}
//图片数据
var list = [{
height: 800,
width: 716,
img: "imgs/0.jpg"
},
{
height: 800,
width: 713,
img: "imgs/1.jpg"
},
{
height: 535,
width: 537,
img: "imgs/2.jpg"
},
{
height: 618,
width: 622,
img: "imgs/3.jpg"
},
{
height: 800,
width: 716,
img: "imgs/4.jpg"
},
{
height: 800,
width: 716,
img: "imgs/5.jpg"
},
{
height: 800,
img: "imgs/6.jpg",
width: 713
},
{
height: 800,
img: "imgs/7.jpg",
width: 716
},
{
height: 800,
img: "imgs/8.jpg",
width: 716
}];
window.onload
=
function
(){
new Slider({
dom : document.getElementById('cash_slider_canvas'),
list : list
});
}
</script>
</
body
>
</
html
>