div 图片滚动 / 文字滚动

最新推荐文章于 2023-08-16 15:59:41 发布

原创最新推荐文章于 2023-08-16 15:59:41 发布 · 878 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

28 篇文章

订阅专栏

html

17 篇文章

订阅专栏

本文介绍了两种网页元素滚动效果的实现方法，一种是基于表格布局的图片滚动，另一种是文字的垂直滚动。通过JavaScript控制元素的滚动，并使用布尔变量控制鼠标悬停时的暂停与继续。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天研究了一下图片滚动，网上有很多可以使用的例子，所以先是找了一个用的是表格布局的，如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="gpic" style="overflow: hidden; width: 600px; height: 182px;">


        <table border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td id="gpic1" valign="top" align="center">
                    <table width="974" border="0" align='center' cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="120" bgcolor="#FF00FF">图片/链接1</td>
                            <td valign='top' bgcolor="#00FFFF">图片/链接2</td>
                            <td valign='top' bgcolor="#FFFF00">图片/链接3</td>
                            <td valign='top' bgcolor="#0000FF">图片/链接4</td>
                            <td valign='top' bgcolor="#00FF00">图片/链接5</td>
                            <td valign='top' bgcolor="#FF0000">图片/链接6</td>
                        </tr>
                        <tr>
                            <td height="24" align="center">文字信息</td>
                            <td align="center">文字信息</td>
                            <td align="center">文字信息</td>
                            <td align="center">文字信息</td>
                            <td align="center">文字信息</td>
                            <td align="center">文字信息</td>
                        </tr>
                    </table>
                </td>
                <td id="gpic2" valign="top"></td>
            </tr>
        </table>
    </div>
    <script>
        var speed = 30
        gpic2.innerHTML = gpic1.innerHTML
        function Marquee() {
            if (gpic2.offsetWidth - gpic.scrollLeft <= 0)
                gpic.scrollLeft -= gpic1.offsetWidth
            else {
                gpic.scrollLeft++
            }
        }
        var MyMar = setInterval(Marquee, speed)
        gpic.onmouseover = function () { clearInterval(MyMar) }
        gpic.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
    </script>
</body>
</html>

这个滚动效果可以使用，但是表格布局现在一般不用，而且这个例子的onmouseover和onmouseout在频繁的setInterval；
个人感觉可以使用布尔变量true和false来控制，停止还是继续滚动。
自己改写如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="PicWall" style="width: 200px; overflow: hidden; white-space: nowrap;">
        <div id="InnerPic" style="display: inline; width: 200px;">
            <img src="a.jpg" alt="img-1" />1
            <img src="a.jpg" alt="img-2" />2
            <img src="a.jpg" alt="img-3" />3
            <img src="a.jpg" alt="img-4" />4
            <img src="a.jpg" alt="img-5" />5


        </div>
        <div id="InnerPic2" style="display: inline; width: 200px;"></div>
    </div>
    <script>
        var speed = 30;
        var scroll = true;
        InnerPic2.innerHTML = InnerPic.innerHTML;
        function Marquee() {
            if (scroll) {
                if (InnerPic2.offsetWidth - PicWall.scrollLeft <= 0) {
                    PicWall.scrollLeft -= InnerPic.offsetWidth;
                } else {
                    PicWall.scrollLeft++;
                }
            }
        }
        var MyMarquee = setInterval(Marquee, speed);
        PicWall.onmouseover = function () { scroll = false; }
        PicWall.onmouseout = function () { scroll = true; }
    </script>
</body>
</html>

另外有些了一个文字上下滚动

<!-- 临时或重点信息发布（滚动）【开始】 -->
                    <div id="TextWall" style="overflow: hidden; border: 1px solid #2aff00; height: 230px;">
                        <div id="InnerText" style="word-wrap: break-word;">
                            信息：
                                <br />
                            1、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                               <br />
                            2、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                               <br />
                            3、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                               <br />
                            4、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                               <br />
                        </div>
                        <div id="InnerText2" style="word-wrap: break-word;"></div>
                    </div>
                    <script>
                        var textSpeed = 30;
                        var textScroll = true;
                        InnerText2.innerHTML = InnerText.innerHTML;
                        function TextMarquee() {
                            if (textScroll) {
                                
                                if (InnerText.offsetHeight - TextWall.scrollTop <= 0) {
                                    TextWall.scrollTop -= InnerText.offsetHeight;
                                    
                                } else {
                                    TextWall.scrollTop++;
                                }
                            }
                        }
                        var MyTextMarquee = setInterval(TextMarquee, textSpeed);
                        TextWall.onmouseover = function () { textScroll = false; }
                        TextWall.onmouseout = function () { textScroll = true; }
                    </script>
                    <!-- 临时或重点信息发布（滚动）【结束】 -->