移动端的无缝滚动

Posted 2020-08-26 rain92

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端的无缝滚动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            .wrap{width: 3.75rem;height:3rem;position: relative;overflow: hidden;}
            .list{width: 37.5rem;position: absolute;left: 0;top: 0;}
            .list li{width:3.75rem;height: 3rem;float: left;}
            img{width: 100%;height: 100%;}
            .pic{position: absolute;bottom: 0;width:3.75rem;left: 1rem;}
            .pic a{float:left;margin:0.1rem;width: 0.2rem;height: 0.2rem;background: red;}
            .pic a.light{background: #fff;}
        </style>
        <script type="text/javascript">
            (function(){
                var html=document.documentElement;
                html.style.fontSize=html.clientWidth/3.75+\'px\';
            })();
            document.addEventListener(\'touchstart\',function(e){
                e.preventDefault();
            })
            
            
        </script>
    </head>
    <body>
        <section class="wrap">
            <ul class="list">
                <li><img src="../img/hd4.jpg"/></li>
                <li><img src="../img/hd5.jpg"/></li>
                <li><img src="../img/hd6.jpg"/></li>
                <li><img src="../img/hd7.jpg"/></li>
                <li><img src="../img/hd8.jpg"/></li>
                <li><img src="../img/hd4.jpg"/></li>
                <li><img src="../img/hd5.jpg"/></li>
                <li><img src="../img/hd6.jpg"/></li>
                <li><img src="../img/hd7.jpg"/></li>
                <li><img src="../img/hd8.jpg"/></li>
            </ul>
            <div class="pic">
                <a class="light" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </section>
        <script type="text/javascript">
            var wrap=document.querySelector(\'.wrap\');
            var list=document.querySelector(\'.list\');
            var pic=document.querySelectorAll(\'a\');
            var disX=0;
            //获取到父元素的左边距
            var oList=0;
            var num=0;
            //获取容器的宽度
            var len=wrap.offsetWidth;
            //li的个数
            var listLen=list.children.length;
            var n=0;
            //给元素绑定事件
            list.addEventListener(\'touchstart\',start);
            list.addEventListener(\'touchmove\',move);
            list.addEventListener(\'touchend\',end);
            function start(ev){
                var e=ev.changedTouches[0];         
                disX=e.pageX;
                oList=this.offsetLeft;
                list.style.transition=\'none\';
                if(num==0){
                    num=pic.length;
                    oList=-num*len;
                }
                if(-num==listLen-1){
                    num=pic.length-1;
                    oList=-num*len;
                }
            }
            function move(ev){
                var e=ev.changedTouches[0];
                list.style.left=e.pageX-disX+oList+\'px\';
            }
            function end(){
                oList=this.offsetLeft;
                num=Math.round(oList/len);
                list.style.transition=\'.5s\';
                list.style.left=num*len+\'px\';
                //滑块的控制
                pic[n%pic.length].className=\'\';
                pic[-num%pic.length].className=\'light\';
                n=-num;
            }
        </script>
    </body>
</html>

以上是关于移动端的无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章