使用现成的Dede标签（最简单，推荐新手）
这是最简单直接的方法，利用DedeCMS自带的{dede:arclist}标签和channelartlist标签,配合一些CSS样式就能实现。
（图片来源网络，侵删）
场景1：在指定栏目下滚动产品（推荐）
这种方法最灵活,可以精确控制滚动哪个栏目的产品。
准备工作：
确保你已经创建了产品栏目，并上传了产品，产品图片最好使用pic字段，如果没有，可以在后台“内容模型管理”中为产品模型添加一个pic字段。
在模板文件中添加HTML和代码：
打开你想要显示滚动产品的模板文件（通常是 templets/default/index.htm 或其他自定义模板）,在合适的位置添加以下代码：
（图片来源网络，侵删）
<!-- 产品滚动区域开始 -->
<div class="product-scroll-container">
<h3>热门产品</h3>
<div class="scroll-wrapper">
<ul class="product-list">
{dede:arclist typeid='栏目ID' row='6' titlelen='30' orderby='pubdate' imgwidth='150' imgheight='150'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:pic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</li>
{/dede:arclist}
</ul>
</div>
</div>
<!-- 产品滚动区域结束 -->
代码解释：
typeid='栏目ID'：这是关键！将这里的栏目ID替换成你想展示产品的那个栏目的ID，如果你想滚动ID为5的“产品中心”栏目，就写成typeid='5'，如果想从所有顶级栏目中取，可以写成typeid='top'。row='6'：显示的产品数量，len='30'`：标题显示的字数。orderby='pubdate'：按发布时间排序。imgwidth='150'和imgheight='150'：缩略图的宽度和高度。
添加CSS样式：
在模板文件的CSS部分（<head>标签内的<style>标签，或外部的.css文件）添加以下样式：
/* 产品滚动区域样式 */
.product-scroll-container {
width: 100%;
margin: 20px 0;
overflow: hidden; /* 隐藏超出部分 */
}
.product-scroll-container h3 {
text-align: center;
margin-bottom: 15px;
}
.scroll-wrapper {
width: 100%;
overflow: hidden; /* 隐藏超出部分，为滚动做准备 */
}
.product-list {
display: flex; /* 使用Flex布局，让图片横向排列 */
list-style: none;
padding: 0;
margin: 0;
/* 关键：通过JS动态改变这个transform的值来实现滚动 */
transition: transform 0.5s ease-in-out;
}
.product-list li {
flex: 0 0 auto; /* 防止被压缩 */
width: 150px; /* 与imgwidth一致 */
margin-right: 15px; /* 图片之间的间距 */
text-align: center;
}
.product-list li img {
width: 100%;
height: 150px;
object-fit: cover; /* 保证图片不变形 */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-list li p {
margin-top: 8px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
添加JavaScript实现滚动效果：
（图片来源网络，侵删）
在模板文件的底部（</body>标签之前）添加以下JS代码：
<script>
document.addEventListener('DOMContentLoaded', function() {
const scrollWrapper = document.querySelector('.scroll-wrapper');
const productList = document.querySelector('.product-list');
const items = productList.querySelectorAll('li');
// 如果没有产品，则不执行
if (items.length === 0) return;
// 克隆一份产品列表，无缝衔接
const cloneList = productList.cloneNode(true);
scrollWrapper.appendChild(cloneList);
let scrollAmount = 0;
const scrollStep = items[0].offsetWidth + 15; // 图片宽度 + 间距
function scroll() {
scrollAmount += 1; // 滚动速度
if (scrollAmount > scrollStep * items.length) {
scrollAmount = 0; // 回到起点
}
productList.style.transform = `translateX(-${scrollAmount}px)`;
cloneList.style.transform = `translateX(-${scrollAmount}px)`;
}
// 每30毫秒滚动一次，数值越小滚动越快
const scrollInterval = setInterval(scroll, 30);
// 鼠标悬停时暂停滚动
scrollWrapper.addEventListener('mouseenter', () => {
clearInterval(scrollInterval);
});
// 鼠标离开时继续滚动
scrollWrapper.addEventListener('mouseleave', () => {
const newInterval = setInterval(scroll, 30);
// 为了在下次悬停时能清除，需要保存interval ID
scrollWrapper.dataset.intervalId = newInterval;
});
});
</script>
完成！ 这样就实现了一个从左到右自动滚动的产品展示,并且鼠标悬停时会暂停。
使用成熟的JS插件（功能强大，效果丰富）
如果你想要更丰富的滚动效果，比如轮播图（带左右箭头、指示器）、3D翻转等，使用成熟的JS插件是更好的选择，这里以 Swiper 为例,它非常流行且强大。
准备工作：
下载 Swiper 的 CSS 和 JS 文件，并将它们放到你的模板目录下（/templets/default/static/swiper/）。
在模板文件中引入Swiper资源：
在 <head> 标签内引入 Swiper 的 CSS 文件，在 </body> 标签前引入 Swiper 的 JS 文件。
<!-- 在 <head> 中 -->
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/static/swiper/swiper.min.css">
<!-- 在 </body> 前 -->
<script src="{dede:global.cfg_templets_skin/}/static/swiper/swiper.min.js"></script>
在模板中添加Swiper的HTML结构：
<!-- Swiper -->
<div class="swiper product-swiper">
<div class="swiper-wrapper">
{dede:arctype typeid='栏目ID'}
{dede:arclist row='6' titlelen='30' orderby='pubdate' imgwidth='200' imgheight='200'}
<div class="swiper-slide">
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:pic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</div>
{/dede:arclist}
{/dede:arctype}
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper End -->
添加Swiper的初始化JS代码：
在引入了 swiper.min.js 的后面,添加以下代码来初始化轮播图。
<script>
document.addEventListener('DOMContentLoaded', function () {
new Swiper('.product-swiper', {
slidesPerView: 4, // 同时显示的slide数量
spaceBetween: 30, // slide之间的间距
loop: true, // 循环模式
autoplay: {
delay: 2500, // 自动切换的时间间隔（毫秒）
disableOnInteraction: false, // 用户操作后是否停止自动切换
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 响应式设置
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 15,
},
480: {
slidesPerView: 1,
spaceBetween: 10,
}
}
});
});
</script>
添加一些基础样式（可选）：
.product-swiper {
width: 100%;
padding: 20px 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.swiper-slide img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}
.swiper-slide p {
margin-top: 10px;
font-size: 14px;
}
总结与对比
| 特性 | 纯Dede标签+JS | Swiper插件 |
|---|---|---|
| 实现难度 | 低，只需修改模板文件 | 中等，需引入外部资源 |
| 灵活性 | 一般，滚动效果较单一 | 极高，支持轮播、3D、瀑布流等 |
| 功能 | 基础的自动左右滚动 | 功能强大，带分页器、导航按钮、响应式、触摸滑动等 |
| 性能 | 轻量，无额外依赖 | 相对稍重，但Swiper本身已优化 |
| 适用场景 | 简单的、不占主要位置的产品滚动展示 | 首页焦点图、产品轮播等核心展示区域 |
建议：
- 如果只是想在侧边栏或某个小区域展示产品，方法一完全够用,且非常轻量。
- 如果想在首页等重要位置做一个酷炫的产品展示，强烈推荐方法二，效果更专业,用户体验更好。
