码迷,mamicode.com
首页 > Web开发 > 详细

js动画之无缝滚动

时间:2018-09-06 00:01:20      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:bsp   src   code   inner   sel   inter   type   ati   var   

<!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动画之无缝滚动

标签:bsp   src   code   inner   sel   inter   type   ati   var   

原文地址:https://www.cnblogs.com/menglong1214/p/9595032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!