首页 > Web开发 > 详细

js图片滚动无缝衔接

时间:2019-01-03 16:08:11      阅读:162      评论:0      收藏:0      [点我收藏+]

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图片滚动无缝衔接

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!