HTML笔记五：手机滑动图片

最新推荐文章于 2021-11-17 17:26:41 发布
_Star_
最新推荐文章于 2021-11-17 17:26:41 发布
阅读量1k
点赞数 1
分类专栏： H5+CSS3 文章标签： html
本文链接：https://blog.csdn.net/qq_19972169/article/details/51985205
版权
H5+CSS3 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!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>