织梦首页大图轮播模板-织梦建站-盈思创科技

这个方案将使用最流行的 Swiper.js 轮播插件，因为它功能强大、性能好、兼容性强且易于定制。

（图片来源网络，侵删）

最终效果预览

我们将实现一个包含以下功能的轮播图：

自动播放
左右箭头切换
底部圆点指示器
鼠标悬停时暂停
响应式设计，在手机上也能完美展示

第一步：准备工作（获取 Swiper 资源）

我们需要从 Swiper 的官方网站下载其核心文件，或者直接使用 CDN 链接（推荐，方便快捷）。

我们将使用 CDN 链接，这样无需下载文件,直接在模板中引入即可。

Swiper CSS 文件:

<link rel="stylesheet" href="https://unpkg.com/swiper@10/swiper-bundle.min.css" />

Swiper JS 文件:

<script src="https://unpkg.com/swiper@10/swiper-bundle.min.js"></script>

第二步：创建后台内容模型和栏目

为了让轮播图内容可以在后台方便地管理,我们需要为它创建一个专用的内容模型。

（图片来源网络，侵删）

登录织梦后台 -> 系统 -> 系统基本参数 -> 核心设置
找到 附件目录 选项，将其修改为你想要的目录，uploads/swiper，然后保存,这样新上传的图片会自动存放在这个文件夹下。
模型:
- 核心 -> 内容模型管理 -> 增加一个内容模型
- 模型名称: 首页轮播图
- 模型表前缀: dede_addonswiper (系统会自动生成,保持默认即可)
- 字段列表: 点击 增加一个字段，添加以下两个字段：
  - 字段名: imgurl (这是存放图片路径的字段)
  - 字段类型: 多媒体(上传,支持多文件)
  - 字段说明: 轮播图片
  - 保存
  - 增加一个字段:
  - 字段名: linkurl
  - 字段类型: 单行文本
  - 字段说明: 跳转链接
  - 保存
创建栏目:
- 核心 -> 栏目管理 -> 增加一个顶级栏目
- 栏目名称: 首页轮播图
- 栏目类型: 外部栏目
- 链接到: 选择你刚创建的 首页轮播图 内容模型
- 栏目列表选项: 勾选 使用列表页，并设置好列表模板（可以先用默认的）
- 保存

第三步：添加轮播图内容

在后台首页找到你刚创建的 首页轮播图 栏目。
点击，编辑页面：
- 填写图片标题（可选，主要用于后台识别）。
- 轮播图片: 点击 本地上传 或 远程图片，选择你的轮播图，上传成功后，图片地址会自动填入 imgurl 字段。
- 跳转链接: 在 linkurl 字段中输入点击图片后要跳转的网址，https://www.example.com，如果不需要跳转,可以留空。
重复此步骤,添加所有你想要展示的轮播图。

第四步：修改首页模板文件 (`index.htm`)

这是最关键的一步，我们需要在首页模板中插入轮播图的 HTML 结构和调用代码。

在织梦后台，模板 -> 默认模板管理 -> 找到并点击 index.htm 进行编辑。
在你希望显示轮播图的位置（通常是 <head> 标签之后，<body> 内容区的顶部）,插入以下代码。

引入 Swiper 资源

在 <head> 标签内添加：

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@10/swiper-bundle.min.css" />
<!-- (可选) 自定义轮播图样式 -->
<style>
    .swiper {
        width: 100%;
        height: 400px; /* 你可以根据需要调整高度 */
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; /* 保证图片不变形，覆盖整个容器 */
    }
</style>

插入轮播图 HTML 结构

在 <body> 中你想要的位置添加：

<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <!-- 这里是织梦的循环调用代码 -->
        {dede:arclist typeid='你的栏目ID' row='5' addfields='imgurl,linkurl'}
        <div class="swiper-slide">
            <a href="[field:linkurl/]" target="_blank">
                <img src="[field:imgurl/]" alt="[field:title/]">
            </a>
        </div>
        {/dede:arclist}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

代码解释:

（图片来源网络，侵删）

{dede:arclist ...}: 这是织梦的循环标签，用来调用栏目文章。
- typeid='你的栏目ID': 这是必须修改的！ 请将 '你的栏目ID' 替换成你第三步创建的“首页轮播图”栏目的ID,你可以在后台栏目管理中看到每个栏目的ID。
- row='5': 表示调用5条数据，也就是5张轮播图,你可以根据需要修改。
- addfields='imgurl,linkurl': 非常重要！ 告诉织梦在调用文章时，除了默认的字段，还要额外获取我们自定义的 imgurl 和 linkurl 字段。
[field:linkurl/]: 输出我们在后台填写的跳转链接。
[field:imgurl/]: 输出我们在后台上传的图片路径。
class="swiper mySwiper": swiper 是 Swiper 必须的类名，mySwiper 是我们给这个轮播实例起的名字,初始化时会用到。

初始化 Swiper (在页面底部)

在 </body> 标签之前，添加以下 JavaScript 代码：

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@10/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
        loop: true, // 循环模式
        autoplay: {
            delay: 3000, // 自动切换的时间间隔，单位毫秒
            disableOnInteraction: false, // 用户操作后是否停止自动切换
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true, // 分页器可以点击
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>

第五步：更新首页并查看效果

在模板编辑页面，点击右上角的 “更新主页HTML” 按钮。
稍等片刻，更新完成后，访问你的网站首页,就能看到轮播图效果了。

常见问题与注意事项

轮播图不显示/图片路径错误:
- 检查 typeid: 确保你在 arclist 标签中填写的栏目ID是正确的。
- 检查 addfields: 确保字段名 imgurl,linkurl 和后台创建的字段名完全一致。
- 检查图片上传: 确保图片已经成功上传，imgurl 字段里有正确的路径，路径格式通常是 /uploads/swiper/20251027/xxx.jpg。
轮播图样式错乱:
- 检查CSS冲突: 检查你的网站其他CSS文件是否覆盖了 Swiper 的样式。
- 检查容器高度: 确保你设置的 .swiper 高度（400px）是固定的,或者其父容器有明确的高度。
如何修改轮播图样式？
- 所有样式都在 <style> 标签里，你可以直接修改 .swiper, .swiper-slide, .swiper-pagination 等类的 CSS 属性来改变外观，比如圆点颜色、箭头样式、过渡效果等，可以参考 Swiper 官方文档获取更多样式定制方法。

如何实现更复杂的效果？

如果需要在轮播图上叠加文字（标题、按钮等），可以修改 HTML 结构：

<div class="swiper-slide">
    <img src="[field:imgurl/]" alt="[field:title/]">
    <div class="swiper-slide-content">
        <h2>[field:title/]</h2>
        <p>这里是副标题</p>
        <a href="[field:linkurl/]" class="btn">了解更多</a>
    </div>
</div>

然后在 CSS 中为 .swiper-slide-content 添加定位和样式,使其覆盖在图片之上。

通过以上步骤，你就可以成功地为你的织梦网站搭建一个功能完善、后台管理方便的首页大图轮播了。

织梦首页大图轮播模板

最终效果预览

第一步：准备工作（获取 Swiper 资源）

第二步：创建后台内容模型和栏目

第三步：添加轮播图内容

第四步：修改首页模板文件 (`index.htm`)

引入 Swiper 资源

插入轮播图 HTML 结构

初始化 Swiper (在页面底部)

第五步：更新首页并查看效果

常见问题与注意事项

相关文章

目录[+]

最终效果预览

第一步：准备工作（获取 Swiper 资源）

第二步：创建后台内容模型和栏目

第三步：添加轮播图内容

第四步：修改首页模板文件 (index.htm)

引入 Swiper 资源

插入轮播图 HTML 结构

初始化 Swiper (在页面底部)

第五步：更新首页并查看效果

常见问题与注意事项

相关文章

目录[+]

第四步：修改首页模板文件 (`index.htm`)