织梦网站如何添加滚动公告？-织梦建站-盈思创科技

纯HTML/CSS/JS代码实现（最灵活，推荐）

这种方法不依赖织梦的任何模块,直接在模板文件中写入代码，可以完全控制公告的样式和滚动效果。

优点：

完全自由,样式和效果可以自定义。
不需要创建额外的数据表,对网站结构无影响。
简单直接,一次设置，永久使用。

缺点：

需要手动修改代码,如果公告很多，管理起来不方便。

操作步骤：

准备公告内容 假设你有几条公告，
- 欢迎访问我们的网站,新用户注册送好礼！
- 网站系统将于本周六凌晨2点进行维护,届时将无法访问。
- 【重要通知】关于XX活动的最终获奖名单已公布。

准备滚动代码 将以下代码复制到你的模板文件中，推荐放在 head 标签之后，或者你想要显示公告的任何位置（比如网站顶部导航栏下方）。

<div class="announcement-container">
    <div class="announcement-title">
        <span>网站公告</span>
        <a href="/plus/list.php?tid=1" style="color: #fff; font-size: 12px; margin-left: 10px;">更多</a>
    </div>
    <div class="announcement-content">
        <ul>
            <li>欢迎访问我们的网站，新用户注册送好礼！</li>
            <li>网站系统将于本周六凌晨2点进行维护，届时将无法访问。</li>
            <li>【重要通知】关于XX活动的最终获奖名单已公布。</li>
            <!-- 在这里继续添加你的公告 <li>...</li> -->
        </ul>
    </div>
</div>
<style>
    /* 样式可以根据你的网站风格调整 */
    .announcement-container {
        width: 100%;
        background-color: #f8f8f8;
        border-bottom: 1px solid #e7e7e7;
        padding: 8px 0;
        font-size: 14px;
        color: #333;
    }
    .announcement-title {
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 0 20px;
        margin-bottom: 5px;
    }
    .announcement-content {
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        position: relative;
    }
    .announcement-content ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: absolute;
        width: 100%;
    }
    .announcement-content li {
        padding: 0 20px;
        white-space: nowrap; /* 防止换行 */
    }
</style>
<script>
(function(){
    // 获取公告列表和容器
    const announcementList = document.querySelector('.announcement-content ul');
    const announcementContent = document.querySelector('.announcement-content');
    if (!announcementList) return; // 如果找不到元素，则不执行
    let lineHeight = 24; // li的高度，与CSS中的line-height保持一致
    let index = 0;
    // 克隆一份列表，无缝滚动
    const cloneList = announcementList.cloneNode(true);
    announcementContent.appendChild(cloneList);
    function scroll() {
        // 使用transform: translateY来实现平滑滚动，性能更好
        index -= 1;
        if (index <= -lineHeight * announcementList.children.length) {
            index = 0;
        }
        announcementList.style.transform = `translateY(${index}px)`;
        cloneList.style.transform = `translateY(${index}px)`;
    }
    // 每50毫秒滚动一次，数值越小，滚动越快
    const scrollInterval = setInterval(scroll, 50);
    // 鼠标悬停时暂停滚动
    announcementContent.addEventListener('mouseenter', function() {
        clearInterval(scrollInterval);
    });
    // 鼠标移开时继续滚动
    announcementContent.addEventListener('mouseleave', function() {
        const newInterval = setInterval(scroll, 50);
        // 为了能在下次鼠标悬停时清除，需要保存interval ID
        announcementContent.intervalId = newInterval;
    });
})();
</script>

代码解释
- HTML部分：创建了一个公告容器，包含标题和内容列表。<li> 标签里放的就是你的公告内容。
- CSS部分：定义了公告的样式，关键点在于 .announcement-content 设置了 overflow: hidden 和 height，隐藏了超出部分；ul 设置了 position: absolute，为JS移动做准备。
- JS部分：这是滚动的核心逻辑。
  - 它首先克隆了一份公告列表,并追加到后面，这样当第一份列表滚动完时，第二份紧接着出现，形成无缝循环。
  - 通过 setInterval 定时改变 ul 的 transform: translateY() 值来实现向上滚动。
  - 添加了鼠标悬停暂停、移开继续的交互功能，提升用户体验。

利用“自定义表单”实现（织梦官方方法，内容易管理）

如果你的公告需要频繁更新,不希望每次都修改代码，可以使用织梦的“自定义表单”来管理公告内容。

优点：

在后台管理,非常方便，无需懂代码。
可以轻松添加、删除、修改公告。

缺点：

需要创建额外的数据表。
模板调用代码比方法一稍复杂。

操作步骤：

后台创建自定义表单
- 登录织梦后台,进入【核心】 -> 【内容模型管理】 -> 【自定义表单】。
- 点击“增加一个新表单”，表单名称填写 网站公告 或 announcement。
- 在字段管理中,增加一个字段，
  - 字段名: content
  - 字段别名: 公告内容
  - 字段类型: multiline text (多行文本)
- 保存并生成表单。
添加公告数据
- 进入【自定义表单】列表，找到你刚创建的 网站公告。
- 点击“增加新公告内容”，在 content 字段中输入你的公告，然后发布。
在模板中调用数据
- 打开你想要显示公告的模板文件（如 index.htm）。
- 在合适的位置加入以下调用代码：
```
<div class="announcement-container">
    <div class="announcement-title">网站公告</div>
    <div class="announcement-content">
        <ul>
            {dede:sql sql="SELECT content FROM dede_addonarticle WHERE typeid = [你的自定义表单生成的栏目ID] ORDER BY id DESC"}
            <li>[field:content/]</li>
            {/dede:sql}
        </ul>
    </div>
</div>
```
注意：dede_addonarticle 是默认的表单数据表名，如果你的表单设置了不同的表名，需要相应修改。typeid 是你的自定义表单对应的栏目ID，你可以在后台的【频道管理】中找到这个栏目并查看其ID。
添加样式和JS 这部分代码和方法一完全一样，将方法一的 <style> 和 <script> 部分复制到你的模板文件中即可，这样，JS就会自动读取你通过 {dede:sql} 标签获取到的公告列表并实现滚动。

利用“互动问答”或“留言板”模块实现（最简单）

如果你的网站已经启用了“互动问答”或“留言板”模块，并且允许游客发表内容，你可以直接调用这些模块的数据作为滚动公告。

优点：

无需任何额外设置,直接调用现有数据。
管理起来也方便,后台统一管理。

缺点：

数据来源不纯粹,可能会混入用户留言。
调用方式可能不如前两种灵活。

操作步骤：

后台确认模块已启用
- 进入【系统】 -> 【系统基本参数】 -> 【互动设置】，确保“是否启用互问答功能”是“是”。

在模板中调用

打开模板文件,加入调用代码，调用“互动问答”的最新标题：

<div class="announcement-container">
    <div class="announcement-title">网站公告</div>
    <div class="announcement-content">
        <ul>
            {dede:ask row='5' titlelen='30'}
            <li><a href="[field:url/]">[field:title/]</a></li>
            {/dede:ask}
        </ul>
    </div>
</div>

row='5' 表示调用5条数据。
titlelen='30' 表示标题显示30个字符。

添加样式和JS 同样，将方法一的 <style> 和 <script> 部分复制过来即可。

总结与建议

方法	优点	缺点	适用场景
纯代码	灵活、高效、不占数据库	内容需手动修改代码	固定，不常更新的网站，追求极致性能和开发者。
自定义表单	内容管理方便，后台操作	需要建表，调用稍复杂	公告需要频繁更新、增删改的管理型网站。最推荐给普通用户。
互动模块	无需额外设置，直接调用	数据可能不纯粹，功能受限	已有互动模块，且想快速实现一个简单滚动效果。

对于绝大多数用户,我强烈推荐使用方法二（自定义表单），它完美地平衡了易用性和功能性，让你可以在后台轻松管理公告，同时又能获得流畅的滚动效果。

织梦网站如何添加滚动公告？

纯HTML/CSS/JS代码实现（最灵活，推荐）

操作步骤：

利用“自定义表单”实现（织梦官方方法，内容易管理）

操作步骤：

利用“互动问答”或“留言板”模块实现（最简单）

操作步骤：

总结与建议

相关文章

目录[+]