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

嗯、刚接触移动端不久，可能写的不是特别的完美，或许还会有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>

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

猜你喜欢