在准备答辩演示效果之前，如果还没确定选题方向，可以先看看这份 2027年计算机毕业设计选题总表，里面有不少偏"展示型"的选题，比较适合看重界面效果的同学。
一、效果拆解
层叠轮播的核心是三个状态类：center（居中放大）、left/right（两侧缩小＋半透明）、hide（其余隐藏）。CSS 部分：
.stage{position:relative;height:420px;perspective:1600px}
.slide{position:absolute;top:0;left:50%;width:920px;height:420px;margin-left:-460px;
border-radius:18px;overflow:hidden;cursor:pointer;
transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s,filter .55s}
.slide.center{transform:translateX(0) scale(1);z-index:5;opacity:1}
.slide.left{transform:translateX(-378px) scale(.8);z-index:3;opacity:.5;filter:saturate(.7)}
.slide.right{transform:translateX(378px) scale(.8);z-index:3;opacity:.5;filter:saturate(.7)}
.slide.hide{transform:scale(.7);opacity:0;z-index:1;pointer-events:none}
所有的动画效果全部靠 transition 完成，不需要 JS 计算过渡帧，性能开销很小，这也是毕业设计里比较容易讲清楚原理的一个前端动效点。
二、Vue 里的状态计算
JS 部分只需要维护一个"当前居中项索引"，其余状态用相对位置算出来：
const cur = ref(0)
function slideClass(i) {
const n = banners.value.length
const d = (i – cur.value + n) % n
if (d === 0) return 'center'
if (d === 1) return 'right'
if (d === n – 1) return 'left'
return 'hide'
}
function onSlideClick(i) {
if (i === cur.value) {
// 点击中间图跳转详情
} else {
cur.value = i // 点击两侧图直接切到中间
}
}
配合 setInterval 做 5 秒自动轮播，再加一排跟随状态变化的指示条，一个完整的层叠轮播就做好了：
onMounted(() => {
timer = setInterval(() => { cur.value = (cur.value + 1) % banners.value.length }, 5000)
})
onBeforeUnmount(() => clearInterval(timer))
这里有个很多同学容易忽略的细节：组件卸载时一定要清除定时器，否则页面切换几次之后，多个定时器同时在后台跑，会导致奇怪的状态错乱，这种 Bug 在答辩演示时"随机复现"是很尴尬的。
如果对前端动效实现还没什么把握，也可以参考这份 2027年计算机毕业设计选题总表 里附带的原型示例，照着原型的 CSS 抠细节会比自己从零设计效率高很多。
如果对前端视觉效果没什么头绪，也可以先看看现成的原型积累一些灵感：2027年计算机毕业设计选题总表。
三、和 Element Plus 现成轮播组件的取舍
Element Plus 自带 el-carousel，为什么不直接用？因为现成组件很难做出"三张图叠加、两侧缩小"这种非标准布局效果，硬套的话反而要写更多的样式覆盖代码。这也是一个可以在毕业设计答辩里主动提及的技术判断——“这里没有用组件库现成方案，是因为效果诉求超出了组件的默认能力范围，手写实现更可控”。
四、总结
一个视觉效果好的首页轮播，能在答辩开场就给老师留下不错的第一印象。本文介绍的层叠轮播方案完全基于原生 CSS transition 和一个简单的状态计算函数，没有额外依赖，代码量也不大，性价比很高，非常适合放进毕业设计的首页展示模块里。
还没想好选题的同学，依然推荐看看这份资料：2027年计算机毕业设计选题总表。下一篇会讲这个项目里最复杂的一块——捐赠下单支付全流程和 Spring 事务处理，敬请关注。
