无缝滚动

Posted 2020-08-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝滚动相关的知识，希望对你有一定的参考价值。

思路：

　　1、首先设置ul里面的图片一共8张：ul.innerhtml+=ul.innerHTML

　　2、计算ul的实际宽度：ul.style.width = li[0].offsetWidth *li.length +‘px‘

　　3、

代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>无缝滚动</title>
    <meta charset="utf-8"/>
    <style type="text/css">
       *{
            padding: 0px;
            margin: 0px;
        }
        .main{
            width: 1200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            list-style: none;
            position: absolute;
            top:0px;
            left: 0px;
            overflow: hidden;
        }
        ul li{
            width: 300px;
            float: left;
        }
        </style>
</head>
<body>
        <div class="main">
        <ul>
            <li>
                <img src="img/11.jpg" width="100%">
            </li>
            <li>
                <img src="img/22.jpg" width="100%">
            </li>
            <li>
                <img src="img/33.jpg" width="100%">
            </li>
            <li>
                <img src="img/44.jpg" width="100%">
            </li>
        </ul>
    </div>
</body>
    <script type="text/javascript">
        var div = document.querySelector(‘.main‘);
        var ul = document.querySelector(‘ul‘);
        var li = document.getElementsByTagName(‘li‘);
        var speed = -2;
        ul.innerHTML +=ul.innerHTML;
        ul.style.width = li[0].offsetWidth*li.length +‘px‘;
        var timer = setInterval(move,30);
        function move(){
            if (Number(ul.style.left) < -ul.offsetWidth/2) {
                ul.style.left = ‘0‘;
            }else if (ul.offsetLeft >0) {
                ul.style.left = -ul.offsetWidth/2 +‘px‘;
            }
            ul.style.left = ul.offsetLeft + speed +‘px‘;
        }
        div.onmouseover = function(){
            clearInterval(timer);
        }
        div.onmouseout = function(){
            timer = setInterval(move,30);
            speed = 2;
        }
    </script>

</html>

以上是关于无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章

常用JS图片滚动（无缝平滑上下左右滚动）代码大全

实现公告栏无缝滚动的js代码（转）