dede首页轮播图代码

1. 使用系统自带的“幻灯片”模块（推荐）：这是最标准、最简单的方法，数据通过后台管理,非常方便。
2. 手动编写代码：适用于有特殊定制需求,或者不希望使用系统模块的情况。

下面我将详细介绍这两种方法,并提供完整的代码示例。

使用系统自带的“幻灯片”模块（推荐）

这是织梦官方提供的功能，实现起来最稳定,也最方便后期维护。

第1步：后台添加幻灯片数据

1. 登录您的织梦后台。

2. 在左侧菜单栏找到 【核心】 -> 【批量维护】 -> 【幻灯片管理】。

3. 点击 【增加一个新的幻灯片】。

   
   （图片来源网络，侵删）

4. 在弹出的页面中填写信息：

   • 给这个幻灯片组起个名字，"首页主轮播"。
   • 位置：这个是关键，用于在前台调用，您可以填写一个英文名或数字，home_focus,请记住这个名称。
   • 保存。

5. 现在您会看到刚才创建的 "首页主轮播" 组，点击它右侧的 列表】。

6. 点击 【增加一个新的幻灯片】,开始添加具体的图片。

   • 这张图片的标题（可选）。
   • 图片：点击上传按钮，选择您要轮播的图片，图片建议尺寸为 1920x500 像素（具体根据您的模板调整）。
   • 链接：点击图片后要跳转到的网址，如果不需要跳转,可以留空。
   • 排序：数字越小,图片越靠前。
   • 保存。

7. 重复上一步,添加您想要展示的所有轮播图片。

   
   （图片来源网络，侵删）

第2步：在前台模板中调用幻灯片代码

数据已经准备好了,我们需要在首页模板文件中调用它。

1. 使用FTP或主机管理面板，打开您的首页模板文件，通常是 /templets/default/index.htm。
2. 找到您想要放置轮播图的位置（<header> 标签内或内容区域的顶部）。
3. 将以下代码粘贴到相应位置。

完整调用代码示例

这段代码包含了HTML结构、CSS样式和JS调用,可以直接使用。

{dede:include filename="head.htm"/}  <!-- 通常包含网站头部和必要的CSS/JS -->
<!-- 轮播图开始 -->
<div class="focusBox">
  <div class="pic">
    <!-- 调用幻灯片数据 -->
    {dede:loop table='dede_sys_placard' sort='rank' if='!='}
      <a href="[field:url/]" target="_blank">
        <img src="[field:img/]" alt="[field:title/]" width="1920" height="500">
      </a>
    {/dede:loop}
  </div>
  <div class="txt">
    <ul>
      <!-- 调用幻灯片数据，用于生成下方的小圆点指示器 -->
      {dede:loop table='dede_sys_placard' sort='rank' if='!='}
        <li><a href="[field:url/]" target="_blank">[field:title/]</a></li>
      {/dede:loop}
    </ul>
  </div>
  <div class="thumb">
    <ul>
      <!-- 调用幻灯片数据，用于生成缩略图/数字指示器 -->
      {dede:loop table='dede_sys_placard' sort='rank' if='!='}
        <li><a href="[field:url/]" target="_blank"><img src="[field:img/]" alt="[field:title/]"></a></li>
      {/dede:loop}
    </ul>
  </div>
</div>
<!-- 引入jQuery库（如果您的模板还没有引入） -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 引入幻灯片插件JS（这里以流行的Superslides为例） -->
<script src="/js/jquery.superslides.min.js"></script> <!-- 请将此JS文件放到您的网站js目录下 -->
<script>
$(document).ready(function() {
  $('.focusBox').superslides({
    animation: 'fade', // 动画效果: 'fade', 'slide'
    play: 3000,       // 自动播放时间间隔，单位毫秒
    pagination: true, // 是否显示分页器（小圆点）
    inherit_height_from: '.focusBox', // 从父元素继承高度
    inherit_width_from: '.focusBox'   // 从父元素继承宽度
  });
});
</script>
<!-- 轮播图样式 -->
<style>
  .focusBox {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
  }
  .focusBox .pic {
    position: relative;
    z-index: 2;
  }
  .focusBox .pic a {
    display: none;
  }
  .focusBox .pic a:first-child {
    display: block;
  }
  .focusBox .pic img {
    width: 100%;
    height: auto;
    display: block;
  }
  .focusBox .txt {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    z-index: 3;
    text-align: center;
  }
  .focusBox .txt ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .focusBox .txt ul li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
  }
  .focusBox .txt ul li.current {
    background: #fff;
  }
  /* 其他样式根据您的需求调整 */
</style>
{dede:include filename="footer.htm"/}  <!-- 通常包含网站底部 -->

代码说明：

• {dede:loop table='dede_sys_placard' sort='rank' if='!='}：这是调用幻灯片数据的核心标签。
  • table='dede_sys_placard'：指定数据表为幻灯片表。
  • sort='rank'：按“排序”字段排序。
  • if='!='：表示不为空,即只调用有数据的项。
• [field:url/]：调用图片链接地址。
• [field:img/]：调用图片地址。
• [field:title/]：调用图片标题。
• JS和CSS：您需要下载一个轮播图插件（如Superslides, Swiper, Slick Slider等），并将它们的JS和CSS文件放到您的网站目录中，然后在模板中正确引入，上面的代码以Superslides为例,您可以根据自己的喜好选择其他插件。

手动编写代码（不推荐新手）

如果您不希望使用系统模块，或者想实现一个完全自定义的轮播图,可以手动编写。

第1步：在后台添加自定义文档

1. 在后台找到 【核心】 -> 发布】 -> 【添加普通文档】。
2. 选择一个合适的栏目（首页轮播图”），这个栏目建议设置为“不生成栏目页”。
3. 发布文章，文章内容就是一张图片，上传图片后，切换到 “高级选项”。
4. 在 “缩略图” 字段,上传您的轮播图。
5. 在 “文章来源” 或自定义字段中，填写要跳转的链接地址（如果需要）。
6. 重复此步骤,为所有轮播图创建一篇文章。

第2步：在首页模板中调用文章数据

<!-- 轮播图开始 -->
<div class="focusBox">
  <div class="pic">
    <!-- 调用指定栏目下的文章 -->
    {dede:arclist typeid='您的栏目ID' row='5' orderby='pubdate'}
      <a href="[field:arcurl/]" target="_blank">
        <!-- 使用[field:litpic/]来调用缩略图 -->
        <img src="[field:litpic/]" alt="[field:title/]" width="1920" height="500">
      </a>
    {/dede:arclist}
  </div>
  <!-- 小圆点指示器等部分省略，与方法一类似 -->
</div>

代码说明：

• {dede:arclist}：调用文章列表标签。
• typeid='您的栏目ID'：最重要的一步，将 您的栏目ID 替换为您在第1步中创建的“首页轮播图”栏目的实际ID。
• row='5'：调用5篇文章,即5张轮播图。
• orderby='pubdate'：按发布时间排序。
• [field:litpic/]：调用文章的缩略图,也就是我们上传的轮播图。
• [field:arcurl/]：调用文章的URL，如果不需要链接，可以替换为 [field:自定义字段名/] 或留空。

总结与建议

对于绝大多数用户来说，强烈推荐使用方法一，因为它更符合织梦的设计理念,也更便于网站的长期维护。