圖片滑動-兼容手機與pc端

時間 2019-11-19
標籤圖片滑動兼容手機简体版
原文原文鏈接
<!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>
           html, body{height:100%;margin:0;padding:0}
           #canvas{width:100%;height:100%;background:gray;}
           ul{list-style:none;margin:0;padding:0;background:black;width:100%;height:100%;position:relative;overflow:hidden;}
           ul li{background:black;top:0;position:absolute;width:100%;height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
           ul li img{max-width:100%;max-height:100%}
           @media(min-width:600px) {
           #canvas{width:500px;height:600px;margin:0 auto;}
           }

    </style>
</head>

<body>
    <!-- 外層畫布 -->
    <div id="canvas">
    </div>
    <script type="text/javascript">
    //全部的數據
    var list = [{
            height: 950,
            width: 800,
            img: "imgs/1.jpg"
        },
        {
            height: 1187,
            width: 900,
            img: "imgs/2.jpg"
        },
        {
            height: 766,
            width: 980,
            img: "imgs/3.jpg"
        },
        {
            height: 754,
            width: 980,
            img: "imgs/4.jpg"
        },
        {
            height: 493,
            img: "imgs/5.jpg",
            width: 750
        },
        {
            height: 500,
            img: "imgs/6.jpg",
            width: 750
        },
        {
            height: 600,
            img: "imgs/7.jpg",
            width: 400
        }
    ];
    //構造函數
    function slider(opts) {
        //構造函數須要的參數
        this.wrap = opts.dom;
        this.list = opts.list;
        //構造三部曲
        this.init();
        this.renderDom();
        this.bindDom();
    }
    //init()函數
    slider.prototype.init = function() {
        //this.radio=window.innerHeight/window.innerWidth;
        if (window.innerWidth > 600) {
            // 屏幕大於600的時候的時候，寬度設置爲500px
            this.width = 500
        } else {
            //不然全屏
            this.width = window.innerWidth;
        }
        //當前圖片的索引(在視覺範圍內的圖片下標)
        this.idx = 0;
    }
    //renderDom()函數
    slider.prototype.renderDom = function() {
        var wrap = this.wrap;
        var width = this.width;
        var data = this.list;
        var len = data.length;
        //var radio=this.radio;
        //建立ul元素
        this.outer = document.createElement("ul");
        for (i = 0; i < len; i++) {
            //循環建立li元素
            var li = document.createElement("li");
            var item = data[i];
            //下面的寬度能夠加px也能夠不加，能夠直接是數值
            //li.style.width=scaleW +"px";
            li.style.webkitTransform = 'translate3d(' + i * width + 'px,0,0)'; //此行的px不能省略
            li.innerHTML = '<img src="' + item['img'] + '" />'
            this.outer.appendChild(li);
        }
        //wrap.style.height=window.innerHeight + "px";
        wrap.appendChild(this.outer);
    }
    // bindDom()函數,綁定dom事件
    slider.prototype.bindDom = function() {
        var self = this;
        var width = self.width; //
        var outer = self.outer;
        var len = self.list.length;


        var startEvt, moveEvt, endEvt;
        if ("ontouchstart" in window) {
            startEvt = "touchstart";
            moveEvt = "touchmove";
            endEvt = "touchend"
        } else {
            startEvt = "mousedown";
            moveEvt = "mousemove";
            endEvt = "mouseup";
        }
        //手指按下的處理事件或者pc端的mousedown
        var startHander = function(evt) {
            var touches = evt.touches;
            if (touches && touches[0]) {
                //console.log(touches)
                //記錄手指按下的座標
                self.startX = touches[0].pageX;
            } else {
                outer.addEventListener(moveEvt, moverHander);
                outer.addEventListener(endEvt, endHander);
                self.startX = evt.pageX;
                console.log(evt.pageX);
            }

            //清除偏移量
            self.offsetX = 0;
            //記錄剛剛開始按下的時間
            self.startTime = new Date() + 1;
            console.log("time")

        };

        //手指移動的處理事件
        var moverHander = function(evt) {
            console.log("move")
            var touches = evt.touches;
            if (touches && touches[0]) {
                //兼容chrome android 阻止瀏覽器默認行爲
                evt.preventDefault();
                //計算手指的偏移量
                self.offsetX = touches[0].pageX - self.startX;
                console.log(self.offsetX);
            } else {
                evt.preventDefault();
                self.offsetX = evt.pageX - self.startX;
                console.log("offsetX:" + self.offsetX)
            }
            var lis = outer.getElementsByTagName("li");
            //起始索引
            var i = self.idx - 1;
            console.log(i - self.idx)
            //結束索引
            var m = i + 3;
            //最小化改變Dom屬性
            for (i; i < m; i++) {
                lis[i] && (lis[i].style.webkitTransition = '-webkit-transform 0s ease-out');
                lis[i] && (lis[i].style.webkitTransform = 'translate3d(' + ((i - self.idx) * self.width + self.offsetX) + 'px,0,0)');

            }

        };


        var endHander = function(evt) {
            var type = evt.type;
            console.log("up")

            console.log(evt)
            if (type !== "touchend") {
                outer.removeEventListener(moveEvt, moverHander);
            }

            var lis = outer.getElementsByTagName('li');
            var boundory = this.width / 6;
            var endTime = new Date() + 1;
            if (endTime - self.startTime > 800) {
                if (self.offsetX >= boundory) {
                    //上一頁進入
                    self.go('-1');
                } else if (self.offsetX <= -boundory) {
                    //下一頁進入
                    self.go('+1');
                } else {
                    //留在本頁
                    self.go('0');
                }
            } else {
                //快操做
                //優化
                if (self.offsetX > 50) {
                    //上一頁進入
                    self.go('-1');
                } else if (self.offsetX < -50) {
                    //下一頁進入
                    self.go('+1');
                } else {
                    //留在本頁
                    self.go('0');
                }
            }
        };

        if ("ontouchstart" in window) {
            outer.addEventListener(startEvt, startHander);
            outer.addEventListener(moveEvt, moverHander);
            outer.addEventListener(endEvt, endHander);

        } else {
            outer.addEventListener(startEvt, startHander);
        }

        //outer.addEventListener(moveEvt, moverHander);
        //outer.addEventListener(endEvt, endHander);
        //outer.removeEventListener(moveEvt, moverHander);
    }

    slider.prototype.go = function(n) {
        var index = this.idx;
        console.log(index + " hi")
        //var agentIndex;
        var lis = this.outer.getElementsByTagName("li");
        var width = this.width;
        console.log(width)
        var len = lis.length;
        //接受這樣的數據go(5) ，跳到lis 下標爲5
        if (typeof n == "number") {
            //agentIndex=index
            index = index
        } else if (typeof n == "string") {
            console.log("string")
            //agentIndex=index+n*1
            // 轉換類型 go('+1');'+1'*1 = 1;'-1'*1 =-1
            index = index + n * 1

        }
        //處理邊界
        if (index > len - 1) {
            index = len - 1
        } else if (index < 0) {
            index = 0
        }
        //this.idx = agentIndex;
        this.idx = index

        console.log(index)
        lis[index].style.webkitTransition = '-webkit-transform 0.2s ease-out'
        lis[index - 1] && (lis[index - 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
        lis[index + 1] && (lis[index + 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')

        lis[index].style.webkitTransform = 'translate3d(0,0,0)';
        lis[index - 1] && (lis[index - 1].style.webkitTransform = 'translate3d(-' + width + 'px,0,0)');
        lis[index + 1] && (lis[index + 1].style.webkitTransform = 'translate3d(' + width + 'px,0,0)')
    }

    new slider({
        dom: document.getElementById("canvas"),
        list: list
    })

    //注意'translate3d(-'+width+'px,0,0)' 必定要加px
    </script>
</body>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。