页面水平滑动Silder

<! 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 >