首页 > 代码库 > 移动端的无缝滚动

移动端的无缝滚动

2024-08-30 23:20:22   218人阅读

技术分享技术分享

<!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>

 

移动端的无缝滚动


联系
我们