js动画之无缝滚动 

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .outter{
                width: 750px;
                height: 366px;
                margin:100px auto;
                overflow: hidden;
                border: dotted 4px yellowgreen;
            }
            
            .inner{
                width: 400%;
                position: relative;
                left: 0;
            }
            
            img{
                display: block;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outter">
            <div class="inner">
                <img src="img/111.jpg" alt=""/>
                <img src="img/222.jpg" alt=""/>
                <img src="img/333.jpg" alt=""/>
                <img src="img/111.jpg" alt=""/>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var inner = document.querySelector('.inner');
        setInterval(scroll,10);
        
        var l = 0;
        function scroll(){
            l--;
            if(l <= -2250){
                l = 0;//切换到最后一张时，替换成第一张
            }
            inner.style.left = l + "px";
        }
    </script>
</html>

 

posted @ 2018-09-05 21:58  乱了夏天蓝了海  阅读(118)  评论(0)  编辑  收藏  举报