dede轮播调用简单，具体怎么实现？-DEDE建站-盈思创科技

使用系统自带的“图集”模型（最简单、最推荐）

这是最简单、最符合DedeCMS原生思路的方法，不需要修改任何代码,完全在后台操作。

（图片来源网络，侵删）

适用场景： 首页焦点图，内容固定,不常变动。

操作步骤：

创建图集栏目
- 登录DedeCMS后台，进入「[栏目管理]」。
- 点击「[添加顶级栏目]」。
- 栏目名称：填写 首页焦点图 或你喜欢的名字。
- 栏目类型：务必选择“图片集”。
- 栏目列表选项：勾选“使用栏目交叉栏目”。
- 其他选项默认即可，然后点击「确定」。
添加焦点图内容
（图片来源网络，侵删）
- 进入刚刚创建的「首页焦点图」栏目。
- 点击「[添加新内容]」。
- 填写这张图片的标题（欢迎访问我们的网站）。
- 缩略图：上传一张你想要作为轮播图的图片,并生成缩略图。
- 图集正文：在编辑器中，点击“图集”图标，上传你想要在轮播中展示的所有图片（可以是一张或多张），这一步是为了保证内容完整性,但轮播调用主要看缩略图。
- 点击「[保存]」。
在首页模板中调用
- 进入「[模板]」 -> 「[模板管理]」 -> 「[默认模板管理]」。
- 找到并编辑首页模板文件 index.htm。
- 在你想要显示轮播图的位置,插入以下代码：
```
{dede:arclist typeid='你的栏目ID' row='5' orderby='pubdate'}
    <a href="[field:arcurl/]" title="[field:title/]">
        <img src="[field:picname/]" alt="[field:title/]">
    </a>
{/dede:arclist}
```
代码解释：
- typeid='你的栏目ID'：这是最关键的一步！将 '你的栏目ID' 替换成你在第一步创建的“首页焦点图”栏目的ID，你可以在「栏目管理」中鼠标悬停在栏目名称上,浏览器状态栏会显示ID。
- row='5'：表示调用5条内容，也就是5张轮播图,根据你的需要修改。
- [field:picname/]：调用文章的缩略图地址。
- [field:arcurl/]：调用文章的链接地址。
- [field:title/]：调用文章的标题，用作 img 标签的 alt 属性。

添加CSS和JS

上面代码只生成了 <a> 和 <img> 标签，你还需要一个轮播组件（如Bootstrap, Swiper, Owl Carousel等）的CSS和JS文件来让它动起来。
以 Bootstrap 为例：
1. 在 <head> 标签内引入 Bootstrap 的 CSS 和 JS 文件。
2. 将你的图片代码包裹在 Bootstrap 的轮播结构中。

完整的 Bootstrap 轮播示例代码：

<!-- 在 head 中引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 轮播图开始 -->
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <!-- 动态生成轮播指示器 -->
    {dede:arclist typeid='你的栏目ID' row='5'}
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="[field:global.autoindex/]" {dede:if equal='[field:global.autoindex/]' '0'}class="active" aria-current="true" aria-label="Slide [field:global.autoindex/]"{/dede:if}></button>
    {/dede:arclist}
  </div>
  <div class="carousel-inner">
    <!-- 动态生成轮播项 -->
    {dede:arclist typeid='你的栏目ID' row='5'}
    <div class="carousel-item {dede:if equal='[field:global.autoindex/]' '0'}active{/dede:if}">
      <img src="[field:picname/]" class="d-block w-100" alt="[field:title/]">
      <div class="carousel-caption d-none d-md-block">
        <h5>[field:title/]</h5>
        <p>一些描述性文字...</p>
      </div>
    </div>
    {/dede:arclist}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- 轮播图结束 -->
<!-- 在 body 结束前引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

使用自由列表/广告位（更灵活）

如果你的轮播图内容来自不同栏目，或者想更灵活地控制，可以使用“自由列表”或“广告管理”功能。

适用场景： 轮播图链接到不同栏目、外部链接,或者需要更复杂的排序。

操作步骤：

后台创建广告位
- 进入「[广告管理]」。
- 点击「[增加广告位]」。
- 广告位名称：首页焦点图。
- 广告位尺寸：设置你的轮播图尺寸，如 1920x500。
- 模板：使用默认的 ad_default.htm。
- 点击「确定」。
添加广告内容
- 点击「[广告管理]」，然后点击「[增加广告]」。
- 选择你刚刚创建的“首页焦点图”广告位。
- 广告名称：第一张图。
- ：这里直接输入HTML代码。
```
<a href="https://www.example.com" target="_blank">
    <img src="/uploads/images/2025/10/slide1.jpg" alt="示例图片1">
</a>
```
- 点击「保存」，重复此步骤,添加所有轮播图。
在首页模板中调用
- 在首页模板 index.htm 中,插入以下非常简单的代码：
```
{dede:myad name='首页焦点图'/}
```
代码解释：
- {dede:myad ...} 是DedeCMS调用广告的标签。
- name='首页焦点图' 对应你在后台创建的广告位名称。
添加CSS和JS
- 同样,你需要在模板中引入轮播组件的CSS和JS。
- 由于广告位输出的就是一段HTML，你可以手动将广告内容包裹在轮播组件的HTML结构中，或者修改广告内容模板 ad_default.htm 来自动生成。

使用自定义表单+arclist（高级玩法）

如果你想让前台用户也能提交轮播图，或者需要非常自定义的字段（如副标题、按钮文字等）,可以使用自定义表单。

适用场景： 需要用户投稿、内容字段复杂的轮播图。

操作步骤：

创建自定义表单
- 进入「[核心]」->「[自定义表单]」。
- 创建一个新表单，focus_slide。
- 添加字段：
  - title (文本, 标题)
  - pic (多媒体, 图片)
  - link (文本, 链接)
  - description (文本域, 描述)
- 生成表单，并记录表单的 ID。
在首页模板中调用
- 使用 dede:loop 标签来调用自定义表单的数据。
```
{dede:loop table='dede_focus_slide' sort='id' row='5' if='ischeck=1'}
    <a href="[field:link/]" title="[field:title/]">
        <img src="[field:pic/]" alt="[field:title/]">
        <div class="carousel-caption">
            <h3>[field:title/]</h3>
            <p>[field:description/]</p>
        </div>
    </a>
{/dede:loop}
```
代码解释：
- table='dede_focus_slide'：dede_ 是DedeCMS的前缀，focus_slide 是你创建的表单名称。
- sort='id'：按ID排序,最新的在前面。
- row='5'：调用5条数据。
- if='ischeck=1'：只调用已审核的数据（非常重要！）。
- [field:字段名/]：调用表单中对应字段的值。
添加CSS和JS

同样，需要引入轮播组件,并将上述代码放入轮播的HTML结构中。

总结与推荐

方法	优点	缺点	推荐度
图集模型	最简单，最符合DedeCMS逻辑，代码量少，官方支持好。	内容和轮播图混在一起，如果图集内容很多会有点冗余。	⭐⭐⭐⭐⭐ (强烈推荐)
广告位	灵活，可以链接外部网站，管理方便。	需要手动维护，不适合内容频繁更新的场景。	⭐⭐⭐⭐
自定义表单	极度灵活，字段可自定义，适合用户投稿。	设置相对复杂，需要了解自定义表单和`loop`	⭐⭐⭐

对于绝大多数网站，方法一（图集模型） 是最简单、最高效的解决方案,请优先尝试这个方法。

dede轮播调用简单，具体怎么实现？

使用系统自带的“图集”模型（最简单、最推荐）

使用自由列表/广告位（更灵活）

使用自定义表单+arclist（高级玩法）

总结与推荐

相关文章

织梦首页大图轮播代码如何实现？

目录[+]