页面水平滑动Silder

最新推荐文章于 2024-12-29 09:00:00 发布
转载最新推荐文章于 2024-12-29 09:00:00 发布 · 674 阅读
130 篇文章
订阅专栏
<!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>