移动端滑动图片实现无缝滚动小实例

我会带着你远行 2022-05-24 14:10 149阅读 0赞

嗯、刚接触移动端不久，可能写的不是特别的完美，或许还会有bug，如果您看到了有哪些地方做的不是特别的好，或者您有更好的意见，欢迎在留言区指出，吾将不胜感激，当然我也会随着学习的深入，不断回来完善，尽量做到完美

话不多说，上代码：（注：css代码没有附带，有兴趣的可以留言区留言）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no"/>
        <link rel="stylesheet" href="less/event.css"/>
        <script>
            (function(){
                var html = document.documentElement;
                var hWidth = html.getBoundingClientRect().width;
                var scale = hWidth/15;
                html.style.fontSize = scale+'px';
            })()
    
            document.addEventListener('touchstart',function(ev){
                ev.preventDefault();
            })
    
        </script>
        <title>图片无缝滚动</title>
    </head>
    <body>
    <section>
    <ul id="list">
        <li><img src="img/img4.jpg"/></li>
        <li><img src="img/img.jpg"/></li>
        <li><img src="img/img2.jpg"/></li>
        <li><img src="img/img3.jpg"/></li>
        <li><img src="img/img4.jpg"/></li>
        <li><img src="img/img.jpg"/></li>
    </ul>
        <div id="dot"><a class="active" href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div>
    </section>
    <script>
        window.onload = function(){
            var oList = document.querySelector('#list');
            var aLi = oList.querySelectorAll('li');
            var oDot = document.querySelector('#dot');
            var oA = oDot.querySelectorAll('a');
            var len = aLi.length;
            var num = oA.length;
            var disX = 0;
            var  disL = 0;
            var dL = 0;
            var w = aLi[0].offsetWidth;
            var n = 0;
    
                oList.addEventListener('touchstart',start);
                oList.addEventListener('touchmove',move);
                oList.addEventListener('touchend',end);
    
    
            function start(ev){
                var ev = ev.changedTouches[0];
                disX = ev.pageX;
                disL = oList.offsetLeft;
                oList.style.transition = null;
                if(disL ==0){
                    disL = -w*num;
                    oList.style.left = disL+'px';
                }
                //console.log(w*(len-1))
                if(disL ==-w*(len-1)){
                    disL = -w;
                    oList.style.left = disL+'px';
                }
            }
            function move(ev){
                var ev = ev.changedTouches[0];
                dL = ev.pageX - disX;
                oList.style.left = disL+dL+'px';
            }
            function end(ev){
                var ev = ev.changedTouches[0];
                var scale = Math.round(dL/w);
                //console.log(scale)
               oList.style.left = disL+scale*w+'px';
                disL = oList.offsetLeft;
                    if(disL ==0){
                        disL=-w*num;
                    }
                    if(disL ==-w*(len-1)){
                        disL=-w;
                    }
                    n = Math.abs((disL+w)/w);
                    for(var i=0; i<num;i++){
                        oA[i].className = '';
                    }
    
                    oA[n].className = 'active';
    
    
            }
    
    
    
        }
    </script>
    </body>
    </html>