首先需在phpcms后台通过推荐位功能添加焦点图数据，进入“内容→推荐位”创建图片类型推荐位，并将含缩略图的文章推荐至此位置；接着在模板文件中使用pc标签调用该推荐位内容，如{pc:content action="position" posid="2" num="5"}{loop $data $r}输出图片链接与地址；然后引入Swiper等前端轮播库，调整HTML结构为swiper-container格式并初始化自动播放、分页等功能；最后通过CSS设置图片尺寸、响应式及视觉效果，确保各端显示正常。关键在于推荐位数据准确调用与前端组件协同。
phpcms中的焦点图通常用于网站首页或内容页的轮播展示，比如新闻头条、推荐位图片等。它通过调用特定位置的内容数据，结合前端JS实现图片轮播效果。使用和设置焦点图主要涉及后台内容管理、模板调用以及前端样式调整。
一、添加焦点图数据（后台操作）
- 进入后台：登录phpcms管理后台，进入“内容” → “推荐位”管理。
- 创建或选择推荐位：如已有“焦点图推荐位”可直接使用，否则点击“添加推荐位”，填写名称如“首页焦点图”，类型选“图片”，保存。
- 添加内容到推荐位：编辑或发布文章时，在“高级选项”中找到“推荐到”栏目，勾选你创建的推荐位，并上传对应图片（建议统一尺寸，如720x300）。
二、模板中调用焦点图数据
在需要显示焦点图的页面模板（如index.html）中，使用pc标签调用推荐位内容：
<!--{pc:content action="position" posid="2" order="listorder DESC" num="5"}--><div class="focus-slider">
<ul>
{loop $data $r}
<li>
<a href="{$r[url]}"><img src="{$r[thumb]}" alt="{$r[title]}"></a>
</li>
{/loop}
</ul>
</div>
<!--{/pc}-->
说明：posid为推荐位ID，需替换为你实际的ID；num控制显示数量；$r[thumb]为缩略图地址，$r[url]为链接地址。
立即学习“PHP免费学习笔记（深入）”；
三、设置焦点图轮播效果（前端JS）
phpcms本身不带轮播脚本，需自行引入如jQuery + Slick、Swiper或原生JS轮播插件：
- 在页面引入jQuery和轮播库，例如Swiper：
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script> - 修改HTML结构适配Swiper：
<div class="swiper-wrapper">
{loop $data $r}
<div class="swiper-slide">
<a href="{$r[url]}"><img src="{$r[thumb]}"></a>
</div>
{/loop}
</div>
<div class="swiper-pagination"></div>
</div>
再初始化Swiper：
<script>var swiper = new Swiper('.swiper-container', {
autoplay: 3000,
pagination: '.swiper-pagination',
loop: true
});
</script>
四、调整样式与响应式
通过CSS控制焦点图外观：
- 设置图片容器尺寸：
.focus-slider img { width: 100%; height: 300px; object-fit: cover; } - 添加过渡动画、圆角、阴影提升视觉效果。
- 适配移动端：使用media query调整高度或隐藏部分元素。
基本上就这些。关键是把推荐位数据正确调出，再配合前端轮播组件实现动态效果。不复杂但容易忽略细节，比如图片尺寸统一和路径正确性。
