HTML笔记五：手机滑动图片

来源：互联网发布：跨境电商erp php源码编辑：程序博客网时间：2024/04/30 21:05
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>手机滑动</title>  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> </head> <style>        *{margin:0px; padding:0px;}        .m-slider{width:100%; overflow:hidden;}        .slider{width:500%; position:relative; left:0px; }        .slider li{width:20%; float:left; position:relative; }        .slider li img{width:100%;}        .slider li p{text-indent:2em; width:100%; position:absolute; bottom:0px; height:30px; background:rgba(0,0,0,0.5); line-height:30px; color:#fff; }        .icons{ text-align:center; line-height:60px;}        .icons span{margin:0px 8px; padding:10px; border:1px solid #0099cc; border-radius:50%; box-shadow:0px 0px 10px #333;}        .icons .curr{color:#f00; }        .anim{transition:left 500ms linear;} /*css3  过度  指left0 -100% 过总共发生的时间 */ </style> <body>        <div class="m-slider">            <ul class="slider" id="slider">                <li>                    <img src="images/1.jpg"/>                    <p>简单快捷</p>                </li>                <li>                    <img src="images/2.jpg"/>                    <p>简单快捷</p>                </li>                <li>                    <img src="images/3.jpg"/>                    <p>简单快捷</p>                </li>                <li>                    <img src="images/4.jpg"/>                    <p>简单快捷</p>                </li>                <li>                    <img src="images/5.jpg"/>                    <p>简单快捷</p>                </li>            </ul>            <div class="icons" id="icons">                <span class="curr">1</span>                <span>2</span>                <span>3</span>                <span>4</span>                <span>5</span>            </div>        </div>        <script>            var _width = document.body.clientWidth; //clientWidth  可视页面宽度            //alert(_width);            var slider = {                //判断设备是否支持 touch 事件                touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,                slider:document.getElementById('slider'),                //事件                events:{                    index:0,  //显示元素的索引                    slider:this.slider,  //this 为 silder 对象                    icons:document.getElementById('icons'),                    icon:this.icons.getElementsByTagName('span'),                    ////利用handleEvent 把 对象变成事件                    handleEvent:function(event){                        var self = this;  // this.是event 对象                        //touchstart  触摸开始的时候                        //touchmove  中间 触摸 移动                        //touchend  结束                        if(event.type == 'touchstart'){                            self.start(event);                        }else if(event.type == 'touchmove'){                            self.move(event);                        }else if(event.type == 'touchend'){                            self.end(event);                        }                    },                    //touchstart  触摸开始的时候                    start:function(event){                        //获取所有的touches  数组对象 取第一个    多点触摸                        var touch = event.targetTouches[0];                        // 去第一个 触摸点的位置 x y                       startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};                         //  那个方向滑动                         isScrolling = 0;                        //添加监听事件                        this.slider.addEventListener('touchmove',this,false);                        this.slider.addEventListener('touchend',this,false);                    },                    //touchmove  中间 触摸 移动                    move:function(event){                    // 判断页面是否有多个touch 或者 页面被缩放 就不执行了                        if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;                        //恒等运算符 ===  !==                     var touch = event.targetTouches[0];                      endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};                     isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;                    // 1 纵  0 横                     if(isScrolling === 0){                        event.preventDefault(); //阻止触摸默认事件 -》 滚屏                        this.slider.className = 'slider';                        this.slider.style.left = -this.index*_width + endPos.x + 'px';                     }                    },                    //touchend  结束                      end:function(event){                        var duration = +new Date - startPos.time;                        if(isScrolling === 0){                             //清空默认样式 12345                            this.icon[this.index].className = '';                            if(Number(duration) > 10){                                //判断左移动还是右移动                                if(endPos.x > 10){                                    if(this.index !== 0) this.index -= 1;                                }else if(endPos.x < -10){                                    if(this.index !== this.icon.length-1) this.index += 1;                                }                            }                            this.icon[this.index].className = 'curr';                            this.slider.className = 'slider anim';                            this.slider.style.left = -this.index*_width + 'px';                        }                        //解绑事件                        this.slider.removeEventListener('touchmove',this,false);                        this.slider.removeEventListener('touchend',this,false);                    }                },                //初始话                init:function(){                    var self = this; // this 指silder                    if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);                 }            };            slider.init();        </script> </body></html>
0 0