html5实现无缝滚动的效果

最新推荐文章于 2023-11-28 14:47:27 发布

青木郎

最新推荐文章于 2023-11-28 14:47:27 发布

阅读量1.3w

点赞数 3

分类专栏： Html5 文章标签： html5 无缝滚动

本文链接：https://blog.csdn.net/qingmulang/article/details/53173594

版权

Html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了，不会制作gif。
直接上代码，避免以后重复造车轮。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>走马灯效果</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                background: red;
                width: 1200px;
                height: 250px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }

            #div1 ul {
                position: absolute;
                left: 100;
                top: 0;
            }

            #div1 ul li {
                float: left;
                list-style: none;
                width: 300px;
                height: 250px;
            }

            #div1 ul li img {
                width: 300px;
                height: 250px;
            }
        </style>

        <script type="text/javascript">
            window.onload = function() {
                var oDiv1 = document.getElementById("div1");
                var oUl = oDiv1.getElementsByTagName("ul")[0];
                var aLi = oUl.getElementsByTagName("li");
                var space = -2;

                oUl.innerHTML += oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

                function play() {
                    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    if(oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
                        space = 2;
                    }
                    oUl.style.left = oUl.offsetLeft + space + 'px';
                };
                var timer = setInterval(play, 30);
                oDiv1.onmouseover = function() {
                    clearInterval(timer);
                };
                oDiv1.onmouseout = function() {
                    timer = setInterval(play, 30);
                };
                var oLeft = document.getElementsByTagName("a")[0];
                var oRidht = document.getElementsByTagName("a")[1];
                oLeft.onclick = function() {
                    space = -2;
                }
                oRidht.onclick = function() {
                    space = 2;
                }
            };
        </script>

    </head>

    <body>
        <div>
            <a href="javascript:;">向左运动</a>
            <a href="javascript:;">向右运动</a>
        </div>
        <div id="div1">
            <ul>
                <li>
                    <img src="img/6e6f32045de828a239ea948b261a2783.png" />
                </li>
                <li>
                    <img src="img/7d9cabd86d8aa35f87d1630242919699.jpg" />
                </li>
                <li>
                    <img src="img/d77d3f09a1cd86ee05f9dc069676494b.jpg" />
                </li>
                <li>
                    <img src="img/ed388771ab4a232dbb0a14a8e90d467d.jpg" />
                </li>
            </ul>
        </div>
    </body>

</html>

实现了向左或向右的无缝滚动

青木郎

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
html5实现无缝滚动的效果

在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了，不会制作gif。直接上代码，避免以后重复造车轮。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>走马灯效果</title> <style type="text/css">
复制链接

扫一扫