无缝滚动

最新推荐文章于 2025-08-11 17:50:11 发布

原创最新推荐文章于 2025-08-11 17:50:11 发布 · 255 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

无缝滚动

今天我们来学习如何实现无缝滚动的效果。我们先来看一下效果图。

无缝滚动

接下来我们来分析一下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无缝滚动</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #div1 {
                width: 712px;
                height: 108px;
                margin: 100px auto;
                position: relative;
                background: red;
                overflow: hidden;
            }
            #div1 ul {
                position: absolute;
                left: 0;
                top: 0;
            }
            #div1 ul li {
                float: left;
                width: 178px;
                height: 108px;
                list-style: none;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                var speed = -4;
                // oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
                oUl.innerHTML += oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

                function move() {
                    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    if(oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
                    }
                    oUl.style.left = oUl.offsetLeft + speed + 'px';
                }
                var timer = setInterval(move, 30);
                oDiv.onmouseover = function() {
                    clearInterval(timer);
                }//鼠标放上去停住
                oDiv.onmouseout = function() {
                    timer = setInterval(move, 30);
                }//鼠标移开，继续移动
                document.getElementsByTagName('a')[0].onclick = function() {
                    speed = -4;
                }//向左走
                document.getElementsByTagName('a')[1].onclick = function() {
                    speed = 4;
                }//向右走
            }
        </script>
    </head>
    <body>
        <a href="javascript:;">向左走</a>
        <a href="javascript:;">向右走</a>
        <div id="div1">
            <ul>
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
            </ul>
        </div>
    </body>
</html>

乍一看代码还挺长，其实你看懂的话，就会觉得代码其实并不复杂。
总结起来就三点：
一、效果原理
1.让ul一直向左移动
二、复制li
1.innerHTML和+=
2.修改ul的width
三、滚动过界后，重新设置
1.判断过界

function move() {
                    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    if(oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
                    }
                    oUl.style.left = oUl.offsetLeft + speed + 'px';
                }
                var timer = setInterval(move, 30);

好了，今天的学习就到这里了，想要源码的朋友关注我，回复"无缝滚动"即可。
愿你三冬暖,愿你春不寒,愿你天黑有灯,下雨有伞。