- 使用织梦自带的
marquee：这是最简单、最织梦化的方法，但功能有限，且marquee标签本身在HTML5中已被废弃。 - 使用第三方JS库（如jQuery）：这是目前最推荐的方法，功能强大、效果丰富、兼容性好,是现代网站开发的主流做法。
下面我将详细介绍这两种方法,并提供完整的代码示例。
（图片来源网络，侵删）
使用织梦自带的 {dede:marquee}
这是织梦系统内置的一个功能，专门用来实现跑马灯效果，它非常简单,无需引入额外的JS文件。
标签基本语法
{dede:marquee width='宽度' height='高度' direction='方向' scrollamount='速度' scrolldelay='延迟' behavior='滚动类型'}
<!-- 在这里放入你要跑马灯的内容，比如图片 -->
<img src="图片地址1" />
<img src="图片地址2" />
<img src="图片地址3" />
...
{/dede:marquee}
参数说明
width 和 height：跑马灯区域的宽度和高度,单位是像素。direction：滚动方向。
left：从右向左滚动（最常用）。right：从左向右滚动。up：从下向上滚动。down：从上向下滚动。
scrollamount：滚动速度，数值越大,滚动越快。scrolldelay：滚动延迟，数值越大,滚动越慢。behavior：滚动类型。
scroll：默认值,循环滚动。slide：滚动一次后停止。alternate：来回交替滚动。
实战示例：从右向左滚动的图片跑马灯
假设你想在首页某个位置展示一个产品图片的跑马灯。
步骤1：准备图片
将你要展示的图片上传到网站目录，/uploads/images/。
步骤2：修改模板文件
打开你想要显示跑马灯的模板文件，index.htm。
（图片来源网络，侵删）
步骤3：编写代码
<!-- 跑马灯容器，可以设置一个背景色和边框，让区域更明显 -->
<div style="background-color: #f0f0f0; padding: 10px; margin: 20px 0;">
<!-- 使用织梦marquee标签 -->
{dede:marquee width='100%' height='120' direction='left' scrollamount='5' scrolldelay='50'}
<!-- 这里直接写死图片地址，或者从数据库调用 -->
<!-- 示例：写死图片地址 -->
<a href="/product1.html" target="_blank"><img src="/uploads/images/product1.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product2.html" target="_blank"><img src="/uploads/images/product2.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product3.html" target="_blank"><img src="/uploads/images/product3.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product4.jpg" target="_blank"><img src="/uploads/images/product4.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
{/dede:marquee}
</div>
步骤4：更新并生成页面
保存模板文件，然后在织梦后台“生成” -> “更新主页”或更新对应栏目页。
优点：
- 简单直接,无需额外代码。
- 织梦原生支持,兼容性好。
缺点：
（图片来源网络，侵删）
- 效果单一，无法暂停、鼠标悬停等。
marquee标签已过时,不符合HTML5标准。- 灵活性差。
使用jQuery实现（强烈推荐）
这种方法效果更专业，可以实现暂停、鼠标悬停、无缝滚动等高级效果。
准备工作
步骤1：引入jQuery库
确保你的模板文件中已经引入了jQuery库，如果没有，在模板文件的 <head> 标签内加入以下代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
或者将jQuery文件下载到你的网站目录,然后本地引入。
步骤2：准备HTML结构
创建一个用于跑马灯的容器,里面包含一个用于滚动的列表。
<!-- 跑马灯外层容器，用于设置样式和尺寸 -->
<div class="marquee-container" style="width: 100%; height: 120px; overflow: hidden; margin: 20px 0; background-color: #f5f5f5;">
<!-- 跑马灯内层列表，内容将在这里滚动 -->
<div class="marquee-list">
<ul>
<!-- 图片列表，可以循环调用，这里用静态示例 -->
<li><a href="/product1.html" target="_blank"><img src="/uploads/images/product1.jpg" width="150" height="100" alt="产品1"></a></li>
<li><a href="/product2.html" target="_blank"><img src="/uploads/images/product2.jpg" width="150" height="100" alt="产品2"></a></li>
<li><a href="/product3.html" target="_blank"><img src="/uploads/images/product3.jpg" width="150" height="100" alt="产品3"></a></li>
<li><a href="/product4.jpg" target="_blank"><img src="/uploads/images/product4.jpg" width="150" height="100" alt="产品4"></a></li>
</ul>
</div>
</div>
步骤3：编写CSS样式
在模板文件的 <head> 标签内或外部的CSS文件中添加以下样式：
<style>
.marquee-list {
display: flex;
/* 实现无缝滚动的关键：复制一份内容到后面 */
/* 注意：这个样式在JS中动态添加，CSS里可以不写 */
}
.marquee-list ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.marquee-list li {
flex-shrink: 0; /* 防止图片被压缩 */
margin-right: 15px; /* 图片之间的间距 */
}
.marquee-list li a {
display: block;
}
.marquee-list li img {
display: block;
border: none;
}
</style>
步骤4：编写jQuery脚本
这是实现跑马灯动画的核心，将以下代码放在模板文件的底部，</body> 标签之前。
<script>
$(document).ready(function(){
// 定义滚动速度，数值越小越快
var speed = 30;
// 获取列表和列表的克隆
var $marqueeList = $('.marquee-list');
var $marqueeUl = $marqueeList.find('ul');
var $marqueeLi = $marqueeUl.find('li');
// 如果列表内容宽度小于容器宽度，则不需要滚动
if ($marqueeUl.width() > $marqueeList.width()) {
// 克隆一份列表内容并追加到后面，用于无缝滚动
$marqueeUl.append($marqueeLi.clone());
// 开始动画
function marquee() {
// 如果左边滚动的距离大于列表宽度的一半（即第一个列表完全滚出）
if ($marqueeList.scrollLeft() >= $marqueeUl.width() / 2) {
// 将滚动位置重置为0，实现无缝衔接
$marqueeList.scrollLeft(0);
} else {
// 每次向左滚动1个像素
$marqueeList.scrollLeft($marqueeList.scrollLeft() + 1);
}
}
// 使用定时器来执行marquee函数，形成动画
var marqueeTimer = setInterval(marquee, speed);
// 鼠标悬停时暂停滚动
$marqueeList.hover(
function() {
clearInterval(marqueeTimer);
},
function() {
marqueeTimer = setInterval(marquee, speed);
}
);
}
});
</script>
效果说明
- 无缝滚动：通过克隆列表内容，当第一组图片完全滚出后，瞬间跳回起始位置，此时第二组克隆的图片正好接上,视觉上就是无缝的。
- 鼠标悬停暂停：当鼠标移动到跑马灯区域上时，滚动会停止；鼠标移开后,滚动继续。
- 可调速度：只需修改
speed 变量的值即可调整滚动速度。
总结与对比
特性
织梦 {dede:marquee}
jQuery 实现跑马灯
易用性
⭐⭐⭐⭐⭐ (非常简单)
⭐⭐ (需要基础JS知识)
功能丰富度
⭐ (功能单一)
⭐⭐⭐⭐⭐ (可高度定制)
效果流畅度
⭐⭐⭐ (一般)
⭐⭐⭐⭐⭐ (非常流畅)
灵活性
⭐ (固定)
⭐⭐⭐⭐⭐ (非常灵活)
标准符合度
⭐ (标签已废弃)
⭐⭐⭐⭐⭐ (符合现代标准)
推荐度
⭐⭐ (仅用于快速、简单的需求)
⭐⭐⭐⭐⭐ (强烈推荐，尤其用于正式项目)
如果你的需求非常简单，只是想让几张图从右到左动一下，不介意效果简陋，可以使用方法一。
如果你的网站对用户体验有要求，希望有更专业、更流畅、可交互的跑马灯效果，请务必使用方法二。
这是织梦系统内置的一个功能，专门用来实现跑马灯效果，它非常简单,无需引入额外的JS文件。
标签基本语法
{dede:marquee width='宽度' height='高度' direction='方向' scrollamount='速度' scrolldelay='延迟' behavior='滚动类型'}
<!-- 在这里放入你要跑马灯的内容，比如图片 -->
<img src="图片地址1" />
<img src="图片地址2" />
<img src="图片地址3" />
...
{/dede:marquee}
参数说明
width和height：跑马灯区域的宽度和高度,单位是像素。direction：滚动方向。left：从右向左滚动（最常用）。right：从左向右滚动。up：从下向上滚动。down：从上向下滚动。
scrollamount：滚动速度，数值越大,滚动越快。scrolldelay：滚动延迟，数值越大,滚动越慢。behavior：滚动类型。scroll：默认值,循环滚动。slide：滚动一次后停止。alternate：来回交替滚动。
实战示例：从右向左滚动的图片跑马灯
假设你想在首页某个位置展示一个产品图片的跑马灯。
步骤1：准备图片
将你要展示的图片上传到网站目录，/uploads/images/。
步骤2：修改模板文件
打开你想要显示跑马灯的模板文件，index.htm。
（图片来源网络，侵删）
步骤3：编写代码
<!-- 跑马灯容器，可以设置一个背景色和边框，让区域更明显 -->
<div style="background-color: #f0f0f0; padding: 10px; margin: 20px 0;">
<!-- 使用织梦marquee标签 -->
{dede:marquee width='100%' height='120' direction='left' scrollamount='5' scrolldelay='50'}
<!-- 这里直接写死图片地址，或者从数据库调用 -->
<!-- 示例：写死图片地址 -->
<a href="/product1.html" target="_blank"><img src="/uploads/images/product1.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product2.html" target="_blank"><img src="/uploads/images/product2.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product3.html" target="_blank"><img src="/uploads/images/product3.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
<a href="/product4.jpg" target="_blank"><img src="/uploads/images/product4.jpg" width="150" height="100" style="margin-right: 15px;" border="0" /></a>
{/dede:marquee}
</div>
步骤4：更新并生成页面 保存模板文件，然后在织梦后台“生成” -> “更新主页”或更新对应栏目页。
优点：
- 简单直接,无需额外代码。
- 织梦原生支持,兼容性好。
缺点：
（图片来源网络，侵删）
- 效果单一，无法暂停、鼠标悬停等。
marquee标签已过时,不符合HTML5标准。- 灵活性差。
使用jQuery实现（强烈推荐）
这种方法效果更专业，可以实现暂停、鼠标悬停、无缝滚动等高级效果。
准备工作
步骤1：引入jQuery库
确保你的模板文件中已经引入了jQuery库，如果没有，在模板文件的 <head> 标签内加入以下代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
或者将jQuery文件下载到你的网站目录,然后本地引入。
步骤2：准备HTML结构 创建一个用于跑马灯的容器,里面包含一个用于滚动的列表。
<!-- 跑马灯外层容器，用于设置样式和尺寸 -->
<div class="marquee-container" style="width: 100%; height: 120px; overflow: hidden; margin: 20px 0; background-color: #f5f5f5;">
<!-- 跑马灯内层列表，内容将在这里滚动 -->
<div class="marquee-list">
<ul>
<!-- 图片列表，可以循环调用，这里用静态示例 -->
<li><a href="/product1.html" target="_blank"><img src="/uploads/images/product1.jpg" width="150" height="100" alt="产品1"></a></li>
<li><a href="/product2.html" target="_blank"><img src="/uploads/images/product2.jpg" width="150" height="100" alt="产品2"></a></li>
<li><a href="/product3.html" target="_blank"><img src="/uploads/images/product3.jpg" width="150" height="100" alt="产品3"></a></li>
<li><a href="/product4.jpg" target="_blank"><img src="/uploads/images/product4.jpg" width="150" height="100" alt="产品4"></a></li>
</ul>
</div>
</div>
步骤3：编写CSS样式
在模板文件的 <head> 标签内或外部的CSS文件中添加以下样式：
<style>
.marquee-list {
display: flex;
/* 实现无缝滚动的关键：复制一份内容到后面 */
/* 注意：这个样式在JS中动态添加，CSS里可以不写 */
}
.marquee-list ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.marquee-list li {
flex-shrink: 0; /* 防止图片被压缩 */
margin-right: 15px; /* 图片之间的间距 */
}
.marquee-list li a {
display: block;
}
.marquee-list li img {
display: block;
border: none;
}
</style>
步骤4：编写jQuery脚本
这是实现跑马灯动画的核心，将以下代码放在模板文件的底部，</body> 标签之前。
<script>
$(document).ready(function(){
// 定义滚动速度，数值越小越快
var speed = 30;
// 获取列表和列表的克隆
var $marqueeList = $('.marquee-list');
var $marqueeUl = $marqueeList.find('ul');
var $marqueeLi = $marqueeUl.find('li');
// 如果列表内容宽度小于容器宽度，则不需要滚动
if ($marqueeUl.width() > $marqueeList.width()) {
// 克隆一份列表内容并追加到后面，用于无缝滚动
$marqueeUl.append($marqueeLi.clone());
// 开始动画
function marquee() {
// 如果左边滚动的距离大于列表宽度的一半（即第一个列表完全滚出）
if ($marqueeList.scrollLeft() >= $marqueeUl.width() / 2) {
// 将滚动位置重置为0，实现无缝衔接
$marqueeList.scrollLeft(0);
} else {
// 每次向左滚动1个像素
$marqueeList.scrollLeft($marqueeList.scrollLeft() + 1);
}
}
// 使用定时器来执行marquee函数，形成动画
var marqueeTimer = setInterval(marquee, speed);
// 鼠标悬停时暂停滚动
$marqueeList.hover(
function() {
clearInterval(marqueeTimer);
},
function() {
marqueeTimer = setInterval(marquee, speed);
}
);
}
});
</script>
效果说明
- 无缝滚动：通过克隆列表内容，当第一组图片完全滚出后，瞬间跳回起始位置，此时第二组克隆的图片正好接上,视觉上就是无缝的。
- 鼠标悬停暂停：当鼠标移动到跑马灯区域上时，滚动会停止；鼠标移开后,滚动继续。
- 可调速度：只需修改
speed变量的值即可调整滚动速度。
总结与对比
| 特性 | 织梦 {dede:marquee}
| |
|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ (非常简单) | ⭐⭐ (需要基础JS知识) |
| 功能丰富度 | ⭐ (功能单一) | ⭐⭐⭐⭐⭐ (可高度定制) |
| 效果流畅度 | ⭐⭐⭐ (一般) | ⭐⭐⭐⭐⭐ (非常流畅) |
| 灵活性 | ⭐ (固定) | ⭐⭐⭐⭐⭐ (非常灵活) |
| 标准符合度 | ⭐ (标签已废弃) | ⭐⭐⭐⭐⭐ (符合现代标准) |
| 推荐度 | ⭐⭐ (仅用于快速、简单的需求) | ⭐⭐⭐⭐⭐ (强烈推荐，尤其用于正式项目) |
如果你的需求非常简单，只是想让几张图从右到左动一下，不介意效果简陋，可以使用方法一。 如果你的网站对用户体验有要求，希望有更专业、更流畅、可交互的跑马灯效果，请务必使用方法二。
