dede如何添加滚动图片？-DEDE建站-盈思创科技

使用DedeCMS自带的“焦点图”模块（最推荐、最简单）

这是DedeCMS内置的功能,无需编写代码，直接在后台配置即可，非常适合新手。

（图片来源网络，侵删）

操作步骤：

准备图片和文章
- 上传图片：进入“后台” -> “媒体管理” -> “图片管理”，上传你想要展示的所有滚动图片。
- 创建文章：进入“后台” -> “核心” -> “内容发布” -> “添加文档”。
  - 填写图片的标题（图片1）。
  - 缩略图：在编辑器下方，点击“选择图片”或“远程图片”，选择你刚刚上传的对应图片。
  - 可以填写图片的详细描述,也可以留空。
  - 发布栏目：非常重要！ 你需要为这些文章创建一个专门的栏目（首页焦点图），并将文章发布到这个栏目下。
- 重复此步骤,为所有滚动图片创建对应的文章。
获取栏目ID
- 进入“后台” -> “核心” -> “栏目管理”，找到你刚刚创建的那个“首页焦点图”栏目。
- 记录下这个栏目的 ID 数字。

在首页模板中调用

进入“后台” -> “模板” -> “默认模板管理”。
找到并编辑你的首页模板文件,通常是 index.htm。
在你希望显示滚动图片的位置,插入以下代码：

<!-- 默认风格焦点图调用代码 -->
<div class="picFocus">
    <div class="pic">
        <ul>
            {dede:arclist typeid='你的栏目ID' row='5' titlelen='30' orderby='pubdate'}
            <li>
                <a href="[field:arcurl/]" title="[field:title/]">
                    <img src="[field:picname/]" alt="[field:title/]" width="宽度" height="高度">
                </a>
                <p>[field:title/]</p>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="txt">
        <ul>
            {dede:arclist typeid='你的栏目ID' row='5' titlelen='30' orderby='pubdate'}
            <li><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="num">
        <ul>
            {dede:arclist typeid='你的栏目ID' row='5' titlelen='30' orderby='pubdate'}
            <li><a href="[field:arcurl/]" title="[field:title/]">[field:global.autoindex/]</a></li>
            {/dede:arclist}
        </ul>
    </div>
</div>

代码说明：

（图片来源网络，侵删）

typeid='你的栏目ID'：将 '你的栏目ID' 替换为你之前记录下的栏目ID。row='5' 表示调用5篇文章（即5张图片）。
这段代码会生成三个部分：图片区、标题文字区、页码数字区，它们通过CSS关联起来，实现联动效果。

引入CSS和JS文件
- 滚动效果需要CSS样式和JavaScript脚本的支持,DedeCMS默认会提供一些样式，但为了效果更好，你可以使用更流行的库，如 Slick 或 Swiper。
- 以Slick为例：
  1. 下载Slick的CSS和JS文件,并将其上传到你的模板目录（/templets/default/ 目录下的 css 和 js 文件夹）。
  2. 在你的首页模板 <head> 标签内引入Slick的CSS文件：
```
<link rel="stylesheet" type="text/css" href="/templets/default/css/slick.css" />
```
  3. 在页面底部 </body> 标签前引入Slick的JS文件和初始化脚本：
```
<script type="text/javascript" src="/templets/default/js/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.picFocus .pic ul').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            dots: true,
            arrows: true,
            infinite: true
        });
    });
</script>
```
    注意：如果你的模板没有加载jQuery库，还需要在Slick.js之前引入jQuery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

优化模板标签

为了代码更简洁,你可以将上面的 arclist 标签进行优化，避免重复调用，修改后的代码如下：

<!-- 引入CSS文件 -->
<link rel="stylesheet" type="text/css" href="/templets/default/css/slick.css" />
<div class="picFocus">
    <div class="pic">
        {dede:arclist typeid='你的栏目ID' row='5' titlelen='30' orderby='pubdate'}
        <li>
            <a href="[field:arcurl/]" title="[field:title/]">
                <img src="[field:picname/]" alt="[field:title/]" width="宽度" height="高度">
            </a>
            <p>[field:title/]</p>
        </li>
        {/dede:arclist}
    </div>
</div>
<!-- 引入JS文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/templets/default/js/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.picFocus .pic').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            dots: true,
            arrows: true,
            infinite: true
        });
    });
</script>

这种方式更简单,直接让整个图片列表成为一个轮播图。

（图片来源网络，侵删）

使用第三方“幻灯片”插件（功能更强大）

如果你觉得自带的焦点图功能不够用,或者想要更丰富的效果，可以安装第三方插件。

寻找插件：在DedeCMS的官方论坛、资源站或第三方开发者社区搜索“幻灯片插件”、“焦点图插件”等关键词，常见的有 Dede幻灯片、MaxSlider 等。
安装插件：下载插件后，按照其说明文档进行安装，通常包括上传文件、执行数据库脚本、在后台启用等步骤。
配置插件：进入后台的插件管理界面，对幻灯片进行配置，如设置调用栏目、图片数量、切换效果、时间等。
调用标签：插件通常会提供专属的调用标签，你只需要在首页模板的相应位置粘贴这些标签即可。

优点：功能强大，效果多样，通常带有后台管理界面，配置方便。缺点：需要额外安装，可能存在兼容性问题。

手动编写代码（最灵活，适合有基础的开发者）

如果你对HTML、CSS和JavaScript比较熟悉，可以完全手动实现。

准备图片：将图片上传到网站服务器，并记录好图片路径。

编写HTML结构：在首页模板中写出轮播图的HTML骨架。

<div id="mySlider">
    <div class="slides">
        <div class="slide">
            <a href="链接1"><img src="图片1路径" alt="描述1"></a>
        </div>
        <div class="slide">
            <a href="链接2"><img src="图片2路径" alt="描述2"></a>
        </div>
        <!-- 更多图片... -->
    </div>
    <div class="dots"></div> <!-- 用于放置页码点 -->
</div>

编写CSS样式：美化轮播图，并实现切换动画。

#mySlider { width: 800px; height: 400px; overflow: hidden; position: relative; }
.slides { display: flex; transition: transform 0.5s ease; }
.slide { width: 800px; height: 400px; flex-shrink: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.dots span { display: inline-block; width: 10px; height: 10px; background: #ccc; margin: 0 5px; border-radius: 50%; cursor: pointer; }
.dots span.active { background: #333; }

编写JavaScript逻辑：实现自动播放、点击切换、页码高亮等功能。

document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelector('.slides');
    const dots = document.querySelector('.dots');
    const slideItems = document.querySelectorAll('.slide');
    let currentIndex = 0;
    // 创建页码点
    slideItems.forEach((_, index) => {
        const dot = document.createElement('span');
        if (index === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(index));
        dots.appendChild(dot);
    });
    const dotsList = dots.querySelectorAll('span');
    function goToSlide(index) {
        currentIndex = index;
        slides.style.transform = `translateX(-${currentIndex * 800}px)`;
        dotsList.forEach(dot => dot.classList.remove('active'));
        dotsList[currentIndex].classList.add('active');
    }
    // 自动播放
    setInterval(() => {
        currentIndex = (currentIndex + 1) % slideItems.length;
        goToSlide(currentIndex);
    }, 3000);
});

优点：完全自定义，不受限于系统，性能最好。缺点：开发成本高，需要较强的技术能力。

总结与建议

方法	优点	缺点	适合人群
自带模块	简单、快速、无需代码，官方支持，稳定	效果可能较简单，自定义性差	所有用户，特别是新手
第三方插件	功能强大，效果丰富，通常有后台管理	需要安装，可能不兼容，有安全风险	需要更复杂效果，但不想写代码的用户
手动编写	完全自定义，性能最好，最灵活	技术门槛高，开发耗时	有前端开发经验的用户

对于绝大多数用户来说,强烈推荐使用方法一，它完美平衡了易用性和功能性，是DedeCMS最标准、最可靠的实现方式，如果方法一满足不了你的需求，再考虑方法二或方法三。

dede如何添加滚动图片？

使用DedeCMS自带的“焦点图”模块（最推荐、最简单）

操作步骤：

使用第三方“幻灯片”插件（功能更强大）

手动编写代码（最灵活，适合有基础的开发者）

总结与建议

相关文章

目录[+]