搜索
织梦建站

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

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 3 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 30 分钟
位置： 首页 › 织梦建站 › 正文
  1. 使用织梦自带的功能（推荐，最简单）

    这种方法利用织梦的“首页调用”功能，无需修改任何核心文件，适合新手。

    织梦首页大图轮播代码
    （图片来源网络，侵删）
  2. 使用第三方JS插件（更灵活，效果更丰富）

    这种方法可以让你使用更现代、效果更多的轮播插件，但需要手动修改模板文件。

使用织梦自带的功能（推荐）

模型中有一个“幻灯片”模型，专门用来制作轮播图，我们只需要在后台配置好数据，然后在首页模板中调用即可。

第一步：在后台添加轮播图内容

  1. 登录织梦后台，进入“核心” -> “内容模型管理”。
  2. 点击“添加新模型”。
    • 模型名称：填写 幻灯片 或 轮播图。
    • 模型表前缀：使用默认的 dede_ 即可。
    • 字段列表：点击“添加新字段”。
      • 字段名：imgurl (这是图片地址)
      • 字段类型：选择“多媒体(上传、视频、音频)”
      • 保存。
    • 继续添加其他字段（可选）：
      • 字段名：title (标题)
      • 字段类型：选择“单行文本”
      • 保存。
      • 字段名：linkurl (跳转链接)
      • 字段类型：选择“单行文本”
      • 保存。
  3. 模型创建完成后,进入“常用模块” -> “内容发布” -> “发布幻灯片内容”。
  4. 在这里添加你的轮播图信息：
    • 图片的标题（可选，一般显示在图片上）。
    • 图片：点击上传按钮，选择你的大图。
    • 跳转链接：点击图片后要跳转到的网址（可选）。
    • 排序：数字小的排在前面。
    • ，重复此步骤，添加所有轮播图。

第二步：在首页模板中调用轮播图

  1. 打开首页模板文件，通常路径是 /templets/default/index.htm。
  2. 找到你想要放置轮播图的位置（<head> 标签之后，或者某个 <div> 容器内）。
  3. 将以下代码粘贴到相应位置：
<!-- 轮播图开始 -->
<div class="slider">
    <ul class="slider-main">
        {dede:sql sql="SELECT imgurl,title,linkurl FROM dede_addonsoft WHERE arcType=1 ORDER BY id ASC limit 0,5"}
        <li>
            <a href="[field:linkurl/]" target="_blank">
                <img src="[field:imgurl/]" alt="[field:title/]" />
            </a>
        </li>
        {/dede:sql}
    </ul>
    <!-- 如果需要指示器，可以加上下面的代码 -->
    <div class="slider-extra">
        <div class="slider-page">
            <a class="slider-prev" href="javascript:;"></a>
            <a class="slider-next" href="javascript:;"></a>
        </div>
        <div class="slider-ind">
            <ul>
                {dede:sql sql="SELECT id FROM dede_addonsoft WHERE arcType=1 ORDER BY id ASC limit 0,5"}
                <li><a href="#" class="[field:global name=autoindex runphp='yes']@me=(@me==1)?'active':'';[/field:global]">[field:global name=autoindex/]</a></li>
                {/dede:sql}
            </ul>
        </div>
    </div>
</div>
<!-- 轮播图结束 -->

代码解释：

  • {dede:sql ...}：这是一个自定义SQL标签，直接从数据库表中查询数据。
    • dede_addonsoft：这是我们在第一步创建模型时，系统自动生成的数据表名，如果你的模型名称不是“幻灯片”，表名可能是 dede_addon其它名称。
    • imgurl, title, linkurl：对应我们创建的字段名。
    • arcType=1分类ID，1通常是“首页轮播”的分类，你可以在“频道模型” -> “内容分类管理”中查看或创建分类。
    • ORDER BY id ASC limit 0,5：按ID升序排列，并只取前5条数据，你可以根据需要修改。
  • [field:linkurl/]：输出跳转链接。
  • [field:imgurl/]：输出图片地址。
  • [field:title/]：输出图片标题。
  • [field:global name=autoindex runphp='yes']...[/field:global]：用于生成序号，并给第一个 <li> 或 <a> 添加 active 类，方便CSS和JS控制。

第三步：添加CSS样式

在模板的 <head> 标签内，或者引入一个外部CSS文件（/style/global.css），添加以下样式来美化轮播图：

织梦首页大图轮播代码
（图片来源网络，侵删）
/* 轮播图基础样式 */
.slider {
    width: 100%; /* 设置轮播图宽度，通常是100%或固定像素 */
    height: 400px; /* 设置轮播图高度，非常重要 */
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */
}
.slider-main {
    width: 100%;
    height: 100%;
    position: relative;
}
.slider-main li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* 默认隐藏所有图片 */
}
.slider-main li img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使图片填充容器，不变形 */
}
.slider-main li.active {
    display: block; /* 只显示active的图片 */
}
/* 指示器样式 (可选) */
.slider-ind {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}
.slider-ind ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.slider-ind ul li {
    float: left;
    margin-left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.slider-ind ul li.active {
    background-color: #fff;
}

第四步：添加JavaScript代码（实现自动轮播）

在模板的底部,</body> 标签之前，添加以下简单的JS代码来实现自动轮播效果：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sliderMain = document.querySelector('.slider-main');
    const items = sliderMain.querySelectorAll('li');
    const indicators = document.querySelectorAll('.slider-ind li');
    let currentIndex = 0;
    // 显示指定索引的图片
    function showSlide(index) {
        items.forEach(item => item.classList.remove('active'));
        indicators.forEach(ind => ind.classList.remove('active'));
        items[index].classList.add('active');
        indicators[index].classList.add('active');
    }
    // 自动轮播
    function nextSlide() {
        currentIndex = (currentIndex + 1) % items.length;
        showSlide(currentIndex);
    }
    // 设置定时器
    setInterval(nextSlide, 3000); // 每3秒切换一次
    // 为指示器添加点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            currentIndex = index;
            showSlide(currentIndex);
        });
    });
    // 默认显示第一张
    showSlide(0);
});
</script>

使用第三方JS插件（如 Swiper）

这种方法效果更专业,功能更强大（如触摸滑动、3D效果等）。

第一步：下载并引入Swiper

  1. 访问 Swiper官网，下载最新版本。
  2. 将下载下来的文件解压,找到 swiper-bundle.min.css 和 swiper-bundle.min.js。
  3. 将这两个文件上传到你的网站目录,/static/js/ 和 /static/css/。
  4. 在首页模板 index.htm 的 <head> 标签内引入CSS，在 </body> 标签前引入JS：
<!-- 在 <head> 中 -->
<link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
<!-- 在 </body> 前 -->
<script src="/static/js/swiper-bundle.min.js"></script>

第二步：修改HTML结构

在首页模板中,用Swiper推荐的HTML结构替换掉原来的轮播图代码。

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 通过织梦的arclist或sql标签循环输出图片 -->
        {dede:sql sql="SELECT imgurl,title,linkurl FROM dede_addonsoft WHERE arcType=1 ORDER BY id ASC limit 0,5"}
        <div class="swiper-slide">
            <a href="[field:linkurl/]" target="_blank">
                <img src="[field:imgurl/]" alt="[field:title/]">
            </a>
        </div>
        {/dede:sql}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

第三步：添加CSS样式

可以在 <head> 标签内或外部CSS文件中添加：

织梦首页大图轮播代码
（图片来源网络，侵删）
.swiper-container {
    width: 100%;
    height: 400px; /* 设置一个固定高度 */
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

第四步：初始化Swiper

在 </body> 标签前，Swiper JS的后面，添加初始化代码：

<script>
    var swiper = new Swiper('.swiper-container', {
        // 常用配置
        loop: true, // 循环模式
        autoplay: {
            delay: 3000, // 自动切换的时间间隔，单位ms
            disableOnInteraction: false, // 用户操作后是否停止自动播放
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true, // 分页器是否可点击
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

总结与建议

  • 对于新手，强烈推荐方法一，它完全在织梦后台操作，安全、简单，能满足大部分基本需求。
  • 对于追求更好用户体验和效果的网站，推荐方法二，Swiper是目前最流行、最强大的轮播插件之一，社区支持好，文档丰富，效果炫酷。

无论选择哪种方法,请确保图片尺寸统一，并且对图片进行适当压缩，以保证网站加载速度。

-- 展开阅读全文 --
头像
dede登录界面模板在哪个文件里？
« 上一篇 昨天
dede汽车网站模板怎么用？
下一篇 » 昨天

相关文章

取消
微信二维码
支付宝二维码

目录[+]