准备工作：获取产品数据
确保你的首页模板（通常是 index.htm）中已经有了需要展示的产品列表，DedeCMS通常通过调用 arclist 标签来实现。
一个典型的产品列表调用代码如下：
<!-- 准备一个容器来放置所有产品 -->
<div id="product-scroll-container">
<ul class="product-list">
{dede:arclist row='8' titlelen='30' typeid='1' orderby='pubdate'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</li>
{/dede:arclist}
</ul>
</div>
row='8'：表示调用8条产品。typeid='1'：表示调用ID为1的栏目下的产品,请根据你的实际情况修改。[field:litpic/]：产品缩略图。[field:title/]。[field:arcurl/]：产品链接。
使用jQuery实现无缝滚动（推荐）
这是最常用、效果最好的方法，可以实现平滑、无缝的滚动效果。
第1步：引入jQuery库
在你的首页模板 <head> 标签内，确保引入了jQuery库，如果你还没有,可以从CDN引入：
<head>
<meta charset="utf-8">我的Dede网站</title>
<!-- 引入jQuery库 -->
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<!-- 后面会引入我们的CSS和JS -->
<link rel="stylesheet" href="/static/css/product-scroll.css">
<script src="/static/js/product-scroll.js"></script>
</head>
第2步：编写CSS样式
在 /static/css/product-scroll.css 文件中（路径可以自定义）,添加以下样式：
/* 滚动容器 */
#product-scroll-container {
width: 100%; /* 或者固定宽度，如 1200px */
height: 200px; /* 固定高度 */
overflow: hidden; /* 隐藏超出部分，这是实现滚动的关键 */
position: relative;
margin: 20px auto;
border: 1px solid #eee;
}
/* 产品列表 */
.product-list {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* 使用flex布局让产品项横向排列 */
transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */
}
/* 单个产品项 */
.product-list li {
flex: 0 0 200px; /* 固定宽度，不允许伸缩 */
height: 200px;
margin-right: 10px; /* 产品之间的间距 */
text-align: center;
}
.product-list li a {
text-decoration: none;
color: #333;
display: block;
}
.product-list li img {
max-width: 100%;
max-height: 160px;
object-fit: contain; /* 保证图片不变形 */
margin-bottom: 5px;
}
.product-list li p {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
第3步：编写jQuery脚本
在 /static/js/product-scroll.js 文件中（路径可以自定义）,添加以下脚本：
$(document).ready(function() {
// 获取产品列表和容器
var $productList = $('.product-list');
var $container = $('#product-scroll-container');
// 克隆一份产品列表，用于无缝滚动
var $cloneList = $productList.clone();
// 将克隆的列表追加到原始列表后面
$container.append($cloneList);
// 设置初始位置
var totalWidth = $productList.width();
var animationSpeed = 50; // 滚动速度，值越小越快
// 开始向左滚动
function scrollLeft() {
// 当滚动到第一份列表的末尾时，瞬间重置位置，形成无缝效果
if ($productList.position().left <= -totalWidth) {
$productList.css('transform', 'translateX(0)');
}
// 继续向左移动
$productList.css('transform', 'translateX(' + ($productList.position().left - 1) + 'px)');
$cloneList.css('transform', 'translateX(' + ($cloneList.position().left - 1) + 'px)');
}
// 使用定时器实现连续滚动
var scrollInterval = setInterval(scrollLeft, animationSpeed);
// 鼠标悬停时暂停滚动
$container.hover(
function() {
clearInterval(scrollInterval);
},
function() {
scrollInterval = setInterval(scrollLeft, animationSpeed);
}
);
});
说明：
- 这个脚本会复制一份产品列表，当原始列表滚出视野时，复制的列表正好接上，然后瞬间将位置重置，从而实现“无缝”效果。
hover事件让鼠标移到滚动区域上时暂停，移开时继续,提升了用户体验。
使用现成的DedeCMS标签（最简单）
如果你不想写代码，可以寻找一些现成的DedeCMS滚动标签插件，这些插件通常只需要你复制一段代码到模板中,并稍作配置即可。
搜索关键词： dedeCMS 滚动标签、dedeCMS 产品轮播、dedeCMS marquee标签。
使用示例（以某个假想的滚动标签为例）：
<!-- 假设你找到了一个名为 'dede:scrollpic' 的标签 -->
<div class="scroll-box">
{dede:scrollpic row='8' titlelen='20' class='scroll-img' speed='100' isauto='1'}
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]" class="scroll-img">
<span>[field:title/]</span>
</a>
{/dede:scrollpic}
</div>
优缺点：
- 优点： 极其简单,零代码基础也能使用。
- 缺点：
- 灵活性差,样式和效果可能不符合你的网站设计。
- 依赖第三方插件,可能存在安全风险或不兼容新版本DedeCMS的风险。
- 停止维护的可能性较大。
不推荐使用 <marquee>：这是一个非常古老的HTML标签，虽然简单，但已废弃，样式丑陋，且在不同浏览器中表现不一致，强烈不建议使用。
纯CSS实现横向滚动（现代方法）
如果你只需要一个简单的横向滚动条，而不需要自动滚动效果，可以使用纯CSS实现,性能更好。
HTML 结构（与准备工作中的一样）
<div class="css-scroll-wrapper">
<div class="css-scroll-content">
{dede:arclist row='8' titlelen='30' typeid='1' orderby='pubdate'}
<div class="css-scroll-item">
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</div>
{/dede:arclist}
</div>
</div>
CSS 样式
/* 外层容器，提供滚动轨道 */
.css-scroll-wrapper {
width: 100%;
overflow-x: auto; /* 关键：允许水平滚动 */
white-space: nowrap; /* 关键：让子元素不换行 */
/* 为了美化滚动条，可以添加以下样式 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 #f1f1f1; /* Firefox */
}
/* 隐藏默认的滚动条（可选） */
.css-scroll-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
*/
.css-scroll-content {
display: inline-block; /* 关键：让宽度由内容撑开 */
}
/* 单个产品项 */
.css-scroll-item {
display: inline-block; /* 关键：横向排列 */
width: 200px;
margin-right: 15px;
text-align: center;
/* ... 其他样式如方法一 ... */
}
.css-scroll-item img {
max-width: 100%;
height: auto;
}
优缺点：
- 优点： 性能极佳，无需JavaScript,代码简洁。
- 缺点： 无法实现自动滚动效果,需要用户手动拖动滚动条。
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| jQuery无缝滚动 | 效果好，用户体验佳，功能强大 | 需要引入jQuery和写少量JS/CSS | 强烈推荐，绝大多数网站的首选。 |
| 现成Dede标签 | 极其简单，零代码 | 灵活性差，有第三方依赖风险 | 快速搭建、对样式要求不高的临时或简单网站。 |
| 纯CSS横向滚动 | 性能最好，代码简单 | 无自动滚动，需用户手动拖动 | 产品数量较多，需要用户自行浏览的场景。 |
对于绝大多数DedeCMS用户来说，方法一（jQuery无缝滚动） 是最佳选择，它兼顾了效果、性能和用户体验，你可以直接套用我提供的代码,并根据你的网站样式进行微调。
