js动画之无缝滚动

Posted 乱了夏天蓝了海

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" />
                <img src="img/222.jpg" />
                <img src="img/333.jpg" />
                <img src="img/111.jpg" />
            </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>

 

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

JS 实现无缝滚动动画原理（初学者入）

js之无缝滚动

CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

js从右向左无缝滚动原理

无缝滚动js代码

无缝轮播图的一种方式原理