使用DedeCMS自带的【焦点图】模块(最推荐,最简单)
这是最官方、最稳定的方法,适合大多数新手,它利用DedeCMS内置的{dede:arclist}标签和CSS/JS来实现。

(图片来源网络,侵删)
第1步:准备图片和数据
- 上传图片:将你想要展示的幻灯片图片上传到网站服务器的指定目录,
/images/slide/。 - 创建栏目:在后台创建一个专门用于存放幻灯片内容的“栏目”,这个栏目不需要生成静态页,也不需要在前台显示。
- 进入“核心” -> “栏目管理” -> “添加栏目”。
- 栏目名称:首页幻灯片”。
- 上级目录:选择“主站”。
- 关键:在“栏目列表选项”中,不要勾选“生成栏目HTML”。
- 在“栏目内容”中,不要勾选“栏目主页”。
- 设置好其他选项后,点击“确定”。
- 发布文章:进入你刚创建的“首页幻灯片”栏目,发布文章。
- 每一篇文章对应一张幻灯片图片。
- 在文章编辑器中,只需要上传图片,不需要填写任何文字内容。
- 会作为图片的
alt属性,建议填写图片的关键词。 - 发布完成后,记录下这个栏目的 ID(ID是
5)。
第2步:获取幻灯片代码模板
DedeCMS系统自带了几个焦点图的JS模板,你可以直接复制使用,也可以在此基础上修改。
- 登录DedeCMS后台。
- 进入“模板” -> “默认模板管理”。
- 在左侧列表中找到并打开
default目录下的index_body.htm文件(这是首页模板)。 - 在文件中找到类似
<!-- /幻灯片 -->的注释块,里面通常有预置的代码,如果没有,或者你想用新的,可以复制下面这个常用模板。
常用幻灯片代码模板:
<!-- 幻灯片开始 -->
<div class="focusBox">
<div class="bd">
<ul>
{dede:arclist typeid='5' row='5' titlelen='20'}
<li>
<!--
[field:picname/] 是文章中的图片地址。
如果图片是手动上传到文章编辑器里的,它会自动获取第一张图。
如果你想用固定的图,可以手动写死路径,如 <img src="/images/slide/1.jpg" />
[field:title/] 是文章标题,作为图片alt属性
-->
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:picname/]" alt="[field:title/]"/>
</a>
</li>
{/dede:arclist}
</ul>
</div>
<div class="hd">
<ul></ul>
</div>
<!-- 如果需要左右箭头,可以取消下面注释 -->
<!-- <a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a> -->
</div>
<!-- 引入jQuery库 (如果你的模板还没有引入) -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入幻灯片插件JS (这里以成熟的Superslide为例) -->
<script type="text/javascript" src="/static/js/jquery.SuperSlide.js"></script>
<!-- 初始化幻灯片 -->
<script type="text/javascript">
jQuery(".focusBox").slide({
titCell:".hd ul", //开启自动播放
mainCell:".bd ul",
effect:"fold", //效果:fade(渐显), fold(折叠), top(滚动), left(左滚动), slide(滑动)
autoPlay:true, //自动播放
autoPage:true, //自动分页
trigger:"click" //切换方式:click(点击), mouseover(鼠标移过)
});
</script>
第3步:修改并使用代码
- 修改
typeid:将代码中的typeid='5'修改为你刚才创建的“首页幻灯片”栏目的ID。 - 修改JS路径:确保
/static/js/jquery.SuperSlide.js这个路径是正确的,你可以从网上下载jquery.SuperSlide.js文件,并上传到你网站的/static/js/目录下,如果你不想用这个插件,也可以用其他轮播图插件,只需修改相应的JS和CSS即可。 - 放入首页模板:将修改好的代码块,粘贴到你首页模板(
index.htm)的合适位置,比如网站头部的下方。 - CSS样式:上面的代码需要一些CSS来控制样式,在你的CSS文件(通常是
/style/base.css或/style/dedecms.css)中添加以下样式:
/* 幻灯片基础样式 */
.focusBox{ width: 100%; height: 200px; margin: 0 auto; overflow: hidden; position: relative; }
.focusBox .bd{ position: relative; height: 100%; z-index: 0; }
.focusBox .bd li{ width: 100%; height: 100%; float: left; }
.focusBox .bd li img{ width: 100%; height: 100%; display: block; }
.focusBox .hd{ position: absolute; z-index: 1; bottom: 10px; right: 10px; }
.focusBox .hd ul{ text-align: center; }
.focusBox .hd ul li{
display: inline-block;
width: 8px;
height: 8px;
background: rgba(255,255,255,0.5);
margin: 0 4px;
cursor: pointer;
border-radius: 50%;
}
.focusBox .hd ul li.on{
background: #fff;
}
注意:.focusBox 的 height 高度需要根据你的图片尺寸进行修改,height: 300px;。
手动编写代码(更灵活,适合自定义)
如果你对HTML、CSS、JS比较熟悉,可以完全手动控制幻灯片,不受DedeCMS默认模块的限制。

(图片来源网络,侵删)
第1步:编写HTML结构
在首页模板 index.htm 中,添加以下HTML结构:
<div class="my-slide">
<div class="slide-container">
<div class="slide-item">
<a href="链接1">
<img src="图片1.jpg" alt="描述1">
</a>
</div>
<div class="slide-item">
<a href="链接2">
<img src="图片2.jpg" alt="描述2">
</a>
</div>
<div class="slide-item">
<a href="链接3">
<img src="图片3.jpg" alt="描述3">
</a>
</div>
</div>
<div class="slide-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
第2步:编写CSS样式
在CSS文件中添加样式,让幻灯片看起来像样:
.my-slide {
width: 100%;
height: 300px; /* 根据图片高度设定 */
position: relative;
overflow: hidden;
}
.slide-container {
display: flex;
width: 100%; /* 3 * 100% = 300% */
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide-item {
width: 100%;
height: 100%;
flex-shrink: 0;
}
.slide-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片不变形 */
}
.slide-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.dot.active {
background-color: #fff;
}
第3步:编写JavaScript逻辑
在页面底部添加JS代码,实现自动轮播和点击切换功能。
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.slide-container');
const dots = document.querySelectorAll('.dot');
let currentIndex = 0;
const totalSlides = dots.length;
function goToSlide(index) {
container.style.transform = `translateX(-${index * 100}%)`;
dots.forEach(dot => dot.classList.remove('active'));
dots[index].classList.add('active');
currentIndex = index;
}
// 自动播放
setInterval(() => {
currentIndex = (currentIndex + 1) % totalSlides;
goToSlide(currentIndex);
}, 3000); // 每3秒切换一次
// 点击小圆点切换
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
goToSlide(index);
});
});
});
</script>
如何适配手机(响应式设计)
无论是哪种方法,适配手机的关键在于CSS。
-
使用相对单位:
- 将幻灯片的宽度设置为
width: 100%;。 - 将幻灯片的高度设置为
height: 0;,然后通过padding-bottom来控制宽高比,这是目前最推荐的方法,可以保证图片在任何尺寸下都不会变形。
修改后的CSS(推荐):
.focusBox, .my-slide { width: 100%; position: relative; overflow: hidden; /* 假设你想要一个 16:9 的比例 */ padding-bottom: 56.25%; height: 0; } .focusBox .bd li, .slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .focusBox .bd li img, .slide-item img { width: 100%; height: 100%; object-fit: cover; /* 关键属性,让图片填充区域且不变形 */ } /* 其他小圆点、箭头等元素也需要用绝对定位来调整位置 */ .focusBox .hd { position: absolute; bottom: 10px; /* ... 其他样式 ... */ } - 将幻灯片的宽度设置为
-
添加viewport标签: 确保你的首页模板
<head>标签内有以下meta标签,这能让浏览器正确地缩放页面以适应设备屏幕。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
| 方法 | 优点 | 缺点 | 适用人群 |
|---|---|---|---|
| 自带模块 | 官方支持,稳定,通过后台管理内容,方便快捷。 | 灵活性差,样式和JS受限于系统自带模板。 | 新手、大多数网站 |
| 手动编写 | 灵活性极高,可以完全自定义样式和交互逻辑。 | 需要一定的前端开发能力,维护成本稍高。 | 有前端基础,追求个性化开发的用户 |
对于绝大多数用户,强烈推荐使用方法一,它简单、高效,且足够稳定,只有当你对幻灯片有非常特殊的需求时,才考虑方法二。
