搜索
DEDE建站

dede新闻滚动模板如何实现？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 4 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 34 分钟
位置： 首页 › DEDE建站 › 正文

纯 CSS 滚动条 (最简单)

这种效果不需要 JavaScript，纯 CSS 实现,内容会无限循环地从右向左滚动。

dede新闻滚动模板
（图片来源网络，侵删）

准备工作

我们需要在后台创建一个自定义的文档模型（或使用默认的“文章”模型）,并确保新闻列表有数据。

创建模板文件

在您的模板目录（如 /templets/default/）下，创建一个新的模板文件，css_news_scroll.htm。

模板代码 (css_news_scroll.htm)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">DedeCSS新闻滚动</title>
    <style type="text/css">
        /* 滚动条容器样式 */
        .news-scroll-container {
            width: 100%; /* 可以设置固定宽度，如 600px */
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            overflow: hidden; /* 关键：隐藏超出容器的内容 */
            white-space: nowrap; /* 关键：让内容不换行 */
            font-size: 14px;
            margin: 20px 0;
        }
        /* 滚动条内容样式 */
        .news-scroll-content {
            display: inline-block; /* 关键：让内容可以水平排列 */
            padding-left: 100%; /* 初始位置：将内容完全移出可视区域 */
            animation: scroll-left 20s linear infinite; /* 关键：应用滚动动画 */
        }
        /* 鼠标悬停时暂停滚动 */
        .news-scroll-container:hover .news-scroll-content {
            animation-play-state: paused;
        }
        /* 定义滚动动画 */
        @keyframes scroll-left {
            0% {
                transform: translateX(0); /* 从左边开始 */
            }
            100% {
                transform: translateX(-100%); /* 向左滚动一个自身的宽度 */
            }
        }
        /* 新闻链接样式 */
        .news-scroll-content a {
            color: #333;
            text-decoration: none;
            padding: 0 15px;
        }
        .news-scroll-content a:hover {
            color: #ff6600;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h2>网站新闻滚动</h2>
    <!-- DedeCMS 调用新闻标签开始 -->
    <div class="news-scroll-container">
        <div class="news-scroll-content">
            {dede:arclist row='10' titlelen='30' typeid='1'}
            <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
            {/dede:arclist}
        </div>
    </div>
    <!-- DedeCMS 调用新闻标签结束 -->
</body>
</html>

代码解析

  • .news-scroll-container: 这是滚动条的“舞台”。
    • overflow: hidden; 是核心,它隐藏了超出容器宽度的部分。
    • height: 30px; 设置了滚动条的高度。
  • .news-scroll-content: 这是滚动的“内容块”。
    • display: inline-block; 让列表项可以水平排列在一行。
    • padding-left: 100%; 初始时，将整个内容块向右移动一个自身的宽度,使其完全不可见。
    • animation: scroll-left 20s linear infinite; 定义了动画效果。
      • scroll-left: 我们自定义的动画名称。
      • 20s: 动画持续20秒。
      • linear: 动画匀速进行。
      • infinite: 动画无限循环。
  • @keyframes scroll-left: 定义了动画的具体步骤。
    • 0% { transform: translateX(0); }: 动画开始时，内容块在原始位置（但因为 padding-left，它在可视区外）。
    • 100% { transform: translateX(-100%); }: 动画结束时，内容块向左移动100%的自身宽度,正好把第二份内容移入可视区。
  • hover: 当鼠标移动到滚动条上时，animation-play-state: paused; 会让动画暂停,方便用户点击。

如何使用

  1. 在后台的“模板管理”中，新建一个模板，将上面的代码粘贴进去，保存为 css_news_scroll.htm。
  2. 在需要显示滚动新闻的页面（如首页 index.htm），使用 {dede:include filename='css_news_scroll.htm'/} 来引入这个模板。

JavaScript 实现的焦点图/新闻列表滚动 (更专业、更常用)

这种效果通常包含一个主大图（焦点图）和下方的小标题列表，点击小标题可以切换大图，它功能更丰富,交互性更强。

准备工作

  • 图片模型: 确保您的新闻模型绑定了图片字段（默认的“文章”模型没有），如果需要，可以创建一个新的“带图片的文章”模型。
  • JS库: 我们会使用 jQuery，请确保在页面中引入了 jQuery 库。

创建模板文件

在模板目录下创建 js_news_scroll.htm。

dede新闻滚动模板
（图片来源网络，侵删）

模板代码 (js_news_scroll.htm)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">DedeJS新闻滚动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
        /* 整体容器 */
        .focus-news-box {
            width: 600px;
            height: 300px;
            margin: 20px auto;
            border: 1px solid #eee;
            overflow: hidden;
        }
        /* 主图片容器 */
        .focus-image {
            width: 100%;
            height: 250px;
            overflow: hidden;
            position: relative;
        }
        .focus-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保证图片不变形 */
            display: none; /* 初始隐藏所有图片 */
        }
        .focus-image img.active {
            display: block; /* 只显示激活的图片 */
        }
        /* 新闻列表容器 */
        .news-list {
            height: 50px;
            background-color: #f5f5f5;
            padding: 0 10px;
        }
        .news-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100%;
        }
        .news-list li {
            flex: 1;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
        }
        .news-list li.active {
            background-color: #ff6600;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>网站焦点新闻</h2>
    <!-- DedeCMS 调用新闻标签开始 -->
    <!-- 注意：这里我们使用 typeid='1' 来指定栏目，请根据您的实际情况修改 -->
    {dede:arclist row='5' titlelen='20' typeid='1' imgwidth='600' imgheight='250'}
    <div class="focus-news-box">
        <!-- 主图片区 -->
        <div class="focus-image">
            <!-- [field:litpic/] 是获取缩略图的标签，imgwidth和imgheight会自动处理 -->
            <img src="[field:litpic/]" alt="[field:title/]" class="{dede:global.autoindex runphp='yes'}@me = (@me == 1) ? 'active' : '';{/dede:global.autoindex}">
        </div>
        <!-- 新闻标题列表区 -->
        <div class="news-list">
            <ul>
                <!-- 再次调用 arclist 来获取标题列表，但只显示标题 -->
                {dede:arclist row='5' titlelen='20' typeid='1'}
                <li data-index="{dede:global.autoindex runphp='yes'}@me;{/dede:global.autoindex}">
                    <a href="[field:arcurl/]" title="[field:title/]" style="color: inherit; text-decoration: none;">[field:title/]</a>
                </li>
                {/dede:arclist}
            </ul>
        </div>
    </div>
    {/dede:arclist}
    <!-- DedeCMS 调用新闻标签结束 -->
    <script type="text/javascript">
        $(document).ready(function(){
            // 获取所有图片和列表项
            const $images = $('.focus-image img');
            const $listItems = $('.news-list li');
            let currentIndex = 0; // 当前显示的索引
            // 初始化：第一个列表项为激活状态
            $listItems.eq(0).addClass('active');
            // 定义切换函数
            function showSlide(index) {
                // 如果索引超出范围，重置为0
                if (index >= $images.length) {
                    index = 0;
                } else if (index < 0) {
                    index = $images.length - 1;
                }
                // 隐藏所有图片和取消所有列表项的激活状态
                $images.removeClass('active');
                $listItems.removeClass('active');
                // 显示当前索引的图片和激活对应的列表项
                $images.eq(index).addClass('active');
                $listItems.eq(index).addClass('active');
                currentIndex = index; // 更新当前索引
            }
            // 点击列表项切换
            $listItems.on('click', function(){
                const index = $(this).data('index') - 1; // data-index 从1开始，数组索引从0开始
                showSlide(index);
            });
            // 自动轮播
            setInterval(function(){
                currentIndex++;
                showSlide(currentIndex);
            }, 3000); // 每3秒切换一次
        });
    </script>
</body>
</html>

代码解析

  • DedeCMS 标签:
    • 我们使用了两次 {dede:arclist}，第一次用来生成图片容器和 <img> 标签，并利用 runphp='yes' 和 autoindex 来给第一张图添加 active 类。
    • 第二次用来生成标题列表，同样利用 autoindex 给每个 <li> 添加 data-index 属性，方便 JS 识别。
  • CSS:
    • .focus-image img 默认 display: none;，只有带有 active 类的图片才会 display: block;。
    • .news-list li 通过 active 类来改变样式,实现高亮效果。
  • jQuery:
    • $(document).ready(function(){...}): 确保页面加载完成后再执行 JS 代码。
    • showSlide(index): 核心函数,负责切换图片和标题的显示状态。
    • $listItems.on('click', ...): 为每个标题列表项绑定点击事件，点击时调用 showSlide。
    • setInterval(function(){...}, 3000): 设置一个定时器，每3秒自动调用 showSlide,实现自动轮播。

如何使用

  1. 确保有图片: 在后台发布新闻时,务必上传缩略图。
  2. 引入jQuery: 在您的页面头部 <head> 中引入 jQuery 库。
  3. 创建模板: 将上面的代码保存为 js_news_scroll.htm。
  4. 引入模板: 在需要的地方使用 {dede:include filename='js_news_scroll.htm'/} 引入。

总结与建议

特性 方案一 (CSS) 方案二 (JS)
实现难度 非常简单，无需JS知识 稍复杂，需要了解HTML/CSS/JS
功能 单一，仅文字横向滚动 丰富，焦点图+标题列表，支持点击切换和自动轮播
性能 性能好，纯CSS动画 性能良好，但依赖jQuery
适用场景 简单的文字公告、新闻速递 首页焦点新闻、重要内容展示

推荐选择:

  • 如果只是简单的几条文字新闻滚动，方案一 完全够用,且非常轻量。
  • 如果希望有更好的视觉效果和交互体验，吸引访客注意力，方案二 是更好的选择,是网站首页的标配。

希望这两个详细的教程能帮助您在 DedeCMS 中实现新闻滚动功能！

dede新闻滚动模板
（图片来源网络，侵删）
-- 展开阅读全文 --
头像
C语言里如何嵌入C语言？
« 上一篇 前天
幻灯片不滚动，织梦问题出在哪？
下一篇 » 前天

相关文章

取消
微信二维码
支付宝二维码

目录[+]