dede首页滚动图片如何实现？-DEDE建站-盈思创科技

下面我将为你提供最常用、最稳定的两种方法：调用单表图集 和 调用自定义文档模型。

（图片来源网络，侵删）

调用单表图集（最推荐，最简单）

这是最标准、最符合DedeCMS设计思想的方法，我们利用DedeCMS自带的“图集”模型来管理图片。

步骤 1：准备数据（添加图集）

登录你的DedeCMS后台。
点击左侧菜单的 管理] -> [添加图集]。
填写图集信息：
- 给这个图集起个名字,首页焦点图”。
- 所属栏目：选择一个合适的栏目（比如创建一个名为“首页图集”的隐藏栏目）。
- ：在这里填写图片的描述，可以留空。
- 上传图片：这是最关键的一步，点击 “上传新图片” 按钮，上传你想要展示的所有图片。
- 排序：上传完成后，你可以在图片列表里拖动图片来调整它们的显示顺序。
点击 “确定” 保存，记住这个图集的 ID。

步骤 2：在首页模板中调用数据

进入后台的 [模板] -> [模板管理]。
找到你当前使用的模板,点击 [默认首页] 或 [index.htm] 后面的 [修改]。
在首页模板代码中,你想显示滚动图的位置，插入以下代码：

<!-- 焦点图开始 -->
<div class="focusBox">
    <div class="pic">
        <ul>
            {dede:arclist typeid='你的图集栏目ID' row='5'}
            <li>
                <a href="[field:arcurl/]" target="_blank">
                    <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" />
                    <span class="title">[field:title/]</span>
                </a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="txt">
        <ul>
            {dede:arclist typeid='你的图集栏目ID' row='5'}
            <li><a href="[field:arcurl/]" target="_blank">[field:title/]</a></li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="num">
        <ul>
            {dede:arclist typeid='你的图集栏目ID' row='5'}
            <li><a href="[field:arcurl/]" target="_blank">[field:global.autoindex/]</a></li>
            {/dede:arclist}
        </ul>
    </div>
</div>
<!-- 焦点图结束 -->

代码说明：

typeid='你的图集栏目ID'：务必替换成你在步骤1中创建的“首页图集”栏目的ID，这样就能只调用这个栏目下的图集。
row='5'：表示调用5张图片，你可以根据需要修改。
[field:litpic/]：调用图片的缩略图。
[field:arcurl/]：调用图集的链接地址。
[field:title/]：调用图集的标题。
[field:global.autoindex/]：生成序号（1, 2, 3...），用于制作数字按钮。

步骤 3：添加JS和CSS样式

下载JS和CSS文件：你可以去网上找一个成熟的轮播图插件，jQuery 的 Slide 插件，通常包含一个 .js 文件和一个 .css 文件，以及一些背景图片。
- 推荐一个简单的轮播图插件：jQuery-Slider 或者直接搜索 "dedecms 焦点图模板" 下载现成的。
上传文件到网站：将下载的 css 和 js 文件上传到你模板的目录下，/templets/你的模板名/css/ 和 /templets/你的模板名/js/。
（图片来源网络，侵删）
在首页模板中引入文件：在首页模板的 <head> 标签内引入CSS文件，在 </body> 标签前引入JS文件。

<head>
    <!-- ... 其他head内容 ... -->
    <link rel="stylesheet" type="text/css" href="/templets/你的模板名/css/slide.css" />
</head>
<body>
    <!-- ... 你的网站内容 ... -->
    <!-- 引入jQuery库 (如果你的模板没有引入的话) -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入轮播图JS -->
    <script type="text/javascript" src="/templets/你的模板名/js/slide.js"></script>
    <!-- 在轮播图HTML后面，添加初始化JS -->
    <script type="text/javascript">
    $(function(){
        $(".focusBox").slide({
            titCell:".num ul", //自动播放的按钮和标题
            mainCell:".pic ul", //图片区域
            effect:"fold", //动画效果
            autoPlay:true, //自动播放
            autoPage:true, //自动分页
            trigger:"click" //点击切换
        });
    });
    </script>
</body>

检查CSS路径：打开你上传的 slide.css 文件，检查里面的 background-image 路径是否正确，如果路径不对，需要修改成你网站上的正确路径。

调用自定义文档模型（更灵活）

如果你觉得图集模型太局限,或者想在一篇文章里放多张图并调用，可以创建一个自定义模型。

步骤 1：创建自定义模型

后台 [频道管理] -> 模型管理] -> [增加一个内容模型]。
模型名称：焦点图文”。
模型表前缀：保持默认 dede_addonfocus。
点击“保存”。
进入 [字段管理]，为这个新模型添加一个字段：
- 字段名：focuspic (小写，不能用中文)
- 字段类型：多媒体图片
- 字段长度：默认255
- 保存。

步骤 2：添加内容

后台 ]，选择你刚才创建的“焦点图文”模型，编辑页，你会看到新添加的 focuspic 字段。
点击 focuspic 字段旁边的上传按钮，上传你想要展示的图片（一次可以多选上传）。
等信息,然后发布。

步骤 3：在首页模板中调用数据

调用自定义模型的数据需要使用 {dede:sql} 标签，因为它不属于默认的几个模型。

<!-- 焦点图开始 -->
<div class="focusBox">
    <div class="pic">
        <ul>
            {dede:sql sql="SELECT * FROM `dede_addonfocus` ORDER BY id DESC LIMIT 5"}
            <li>
                <a href="[field:arcurl/]" target="_blank">
                    <!-- 这里需要手动拼接图片地址，因为字段存的是路径 -->
                    <img src="[field:focuspic function='str_replace('/uploads','',@me)'/]" alt="焦点图" />
                    <span class="title">图片[field:global.autoindex/]</span>
                </a>
            </li>
            {/dede:sql}
        </ul>
    </div>
    <!-- ... txt 和 num 部分的代码和方法一类似，但同样需要用sql标签调用 ... -->
</div>
<!-- 焦点图结束 -->

代码说明：

（图片来源网络，侵删）

dede_addonfocus：这是你在步骤1中创建的模型表名，请务必确认。
ORDER BY id DESC LIMIT 5：按ID倒序排列，并只取最新的5条。
[field:focuspic/]：调用我们自定义的 focuspic 字段。
function='str_replace('/uploads','',@me)'：这是一个函数，用于将图片路径中的 /uploads 去掉，因为通常后台上传的图片路径是 /uploads/focus/xxx.jpg，而前台需要的是相对路径 uploads/focus/xxx.jpg，如果你的图片路径结构不同，请相应调整。

后续步骤：方法二的第3步（添加JS和CSS样式）和方法一完全相同。

总结与建议

特点	调用单表图集	调用自定义模型
优点	官方标准，稳定可靠，操作简单，符合DedeCMS逻辑。	非常灵活，可以和其他内容混合，适合复杂需求。
缺点	功能相对固定，一个图集只能有一组图片。	需要手动编写SQL，对新手不友好，且容易出错。
推荐度	⭐⭐⭐⭐⭐ （强烈推荐）	⭐⭐⭐

对于绝大多数用户,强烈建议使用方法一，它最简单、最稳定，且资料最多，只有在方法一无法满足你的特殊需求时，才考虑使用方法二。

希望这个详细的教程能帮助你成功实现首页滚动图片！如果在操作中遇到问题，可以检查一下 typeid、文件路径、JS初始化代码等是否正确。

dede首页滚动图片如何实现？