js图片滚动无缝衔接

最新推荐文章于 2023-09-01 20:38:02 发布

weixin_30535167

最新推荐文章于 2023-09-01 20:38:02 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/lxystar/p/10214633.html

版权

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" alt="" /></li>
                <li><img src="b.jpg" alt="" /></li>
                <li><img src="c.jpg" alt="" /></li>
                <li><img src="d.jpg" alt="" /></li>
                <li><img src="a.jpg" alt="" /></li>
                <li><img src="b.jpg" alt="" /></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>

转载于:https://www.cnblogs.com/lxystar/p/10214633.html