图片无缝滚动

最新推荐文章于 2022-12-01 20:11:52 发布

非为000

最新推荐文章于 2022-12-01 20:11:52 发布

阅读量238

点赞数

分类专栏： Javascript_note 文章标签：定时器的配置与例子定时器无缝世界原生js

本文链接：https://blog.csdn.net/qq_30669833/article/details/72598207

版权

Javascript_note 专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 300px;
                height: 200px;
                margin: 100px auto;
                border: solid 1px grey;
                position: relative;
                /*overflow: hidden;*/
            }

            img {
                vertical-align: top;  //去除img默认的3px距离
            }

            ul {    //注意ul要用绝对定位，后续图片滚动实则是改变ul的left值；
                width: 300%;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
            }

            li {
                float: left;
                list-style: none;
            }
        </style>
    </head>

    <body>
        <div id="box" class="box">
            <ul id="bom">
                <li><img src="img/01.jpg" /></li>
                <li><img src="img/02.jpg" /></li>  
                <li><img src="img/01.jpg" /></li>  //最后一张图片必须与第一张相同，这样可以保证第三张显示结束之后，这个Ul快速从新开始，这是第三张图会和第一张，图片内容，初始位置都重合，给人错觉就是是同一张图，接下来正常显示第二张，给人无缝滚动的错觉；
            </ul>
        </div>
    </body>

    <script type="text/javascript">
        var oUl = document.getElementById('bom');
        var oLi = oUl.children[0];  

        var timer = null;
        var num = 0;

        timer = setInterval(fn,10);

        function fn(){
            num--;
            num > -600 ? oUl.style.left = num + 'px' : num = 0;  //保证ul滚动，且可以连续滚动
        }

        oUl.onmouseover = function(){  //鼠标移入ul时，停止滚动
            clearInterval(timer);
        }

        oUl.onmouseout = function(){
            timer = setInterval(fn,10);   //鼠标移出ul时，继续滚动
        }
    </script>
</html>