滑屏轮播—绝对定位版

最新推荐文章于 2023-03-07 20:20:56 发布

信封中的阳光

最新推荐文章于 2023-03-07 20:20:56 发布

阅读量379

点赞数

分类专栏：学习笔记——移动端滑屏

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/53070128

版权

学习笔记——移动端滑屏专栏收录该内容

8 篇文章 0 订阅

订阅专栏

滑屏轮播—绝对定位版

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <title>滑屏轮播——绝对定位版</title>
        <!--
            需要掌握知识点：
                1、用JS动态设置wrap的高度和ul、li的width;
                2、判断移动超过下半时自动移动下一张，未到一半时回到当前张;
                3、下面的pagination跟随图片一起更新位置;
                4、左右移动未做限制，现超出会报错;
        -->
        <style id="css">
            body{
                margin: 0;
            }
            #wrap{
                overflow: hidden;
                position: relative;
            }
            #list{
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #list li{
                float: left;

            }
            #list img{
                width: 100%;
                display: block;
            }
            #nav{
                position: absolute;
                bottom: 10px;
                left: 0;
                width: 100%;
                text-align: center;
            }
            #nav span{
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: black;
            }
            #nav .active{
                background: #fff;
            }
            .clear:after{/* 用于清除浮动 */ 
                content: "";
                display: block;
                clear: both;

            }
        </style>
        <script>
            document.addEventListener(
                //用于阻止系统默认的菜单、文字默认选中、橡皮筋回弹效果
                //缺点：系统默认滚动条消失
                "touchstart",
                function(e){
                    e.preventDefault();
                }
            );
            window.onload = function(){
                var wrap=document.querySelector('#wrap');
                var list=document.querySelector('#list');
                var lis=document.querySelectorAll('#list li');
                var navSpan=document.querySelectorAll('#nav span');

                //用JS动态设置wrap的高度和ul、li的width;
                var css=document.querySelector('#css');
                var style="#wrap{height:"+lis[0].offsetHeight+"px;}";
                style+="#list{width:"+lis.length*100+"%}";
                style+="#list li{width:"+(1/lis.length)*100+"%}";
                css.innerHTML+=style;

                var startPoint=0;//用于储存手指按下的坐标
                var startX=0;//用于储存手指按下时元素距离定位父级的距离
                var wrapW=wrap.offsetWidth;//wrap的占位宽

                wrap.addEventListener(
                    "touchstart",
                    function(e){
                        var touch=e.changedTouches[0];
                        startPoint=touch.pageX;//手指按下时手指距离屏幕X轴的距离
                        startX=list.offsetLeft;//手指按下时UL距离屏幕X轴的距离
                    }
                );
                wrap.addEventListener(
                    "touchmove",
                    function(e){
                        var touch=e.changedTouches[0];
                        var nowPoint=touch.pageX;//手指移动时手指距离屏幕X轴的距离
                        var distance=nowPoint-startPoint;//手指移动时距离
                        var left=startX+distance;//手指按下时UL应该距离屏幕X轴的距离
                        list.style.left=left+"px";
                    }
                );
                wrap.addEventListener(
                    "touchend",
                    function(){
                        var left = list.offsetLeft;//手指离开时UL距离屏幕X轴的距离，正常为负值
                        //判断移动超过一半时自动移动下一张，未到一半时回到当前张
                        var now = Math.round(-left/wrapW);
                        console.log(now);
                        left = -now*wrapW;
                        list.style.left=left+"px";

                        //下面的pagination跟随图片一起更新位置
                        for(var i=0,len=lis.length;i<len;i++){
                            navSpan[i].className="";
                        }
                        navSpan[now].className="active";
                    }
                );
            }
        </script>
    </head>
    <body>
        <div id="wrap"><!-- 包裹层 -->
            <ul id="list" class="clear"><!-- 滑动层 -->
                <li><a href="#"><img src="img/1.jpg"/></a></li>
                <li><a href="#"><img src="img/2.jpg"/></a></li>
                <li><a href="#"><img src="img/3.jpg"/></a></li>
                <li><a href="#"><img src="img/4.jpg"/></a></li>
            </ul>
            <nav id="nav"><!-- 底部按钮 -->
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>
        </div>
    </body>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑屏轮播—绝对定位版

滑屏轮播—绝对定位版<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>滑屏轮播——绝对定位版</title> <!--
复制链接

扫一扫