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

js图片滚动无缝衔接

时间:2019-01-03 16:41:48      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:absolute   time   func   mouseover   tin   box   one   auto   oat   

js图片滚动无缝衔接

<style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:600px;
            height:200px;
            position:relative;
            border:1px solid red;
            margin:100px;
            overflow:hidden;
        }
        ul{
            width:600%;
            position:absolute;
            left:0;
        }
        li{
            float:left;
            list-style:none;
        }
    </style>
    <body>
        <div id="box">
            <ul id="u">
                <li><img src="a.jpg"  /></li>
                <li><img src="b.jpg"  /></li>
                <li><img src="c.jpg"  /></li>
                <li><img src="d.jpg"  /></li>
                <li><img src="a.jpg"  /></li>
                <li><img src="b.jpg"  /></li>
            </ul>
        </div>
    </body>
</html>
<script>
    var num = 0; // 默认ul位置
    var oUl = document.getElementById("u");
    var box = document.getElementById("box");

    function autoPlay(){
        oUl.style.left=num+"px";
        num-=2;
        if(num<=-1200){
            num=0
        }
    }
    var timer=setInterval(autoPlay,100);
    box.onmouseover=function(){
        clearInterval(timer);
    }
    box.onmouseout=function(){
        timer=setInterval(autoPlay,100);
    }
</script>

js图片滚动无缝衔接

标签:absolute   time   func   mouseover   tin   box   one   auto   oat   

原文地址:https://www.cnblogs.com/lxystar/p/10214633.html

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