50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel（图片轮播组件）

📅 我们继续 50 个小项目挑战！—— ImageCarousel组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 的 <script setup> 语法以及 Tailwind CSS 来构建一个简洁且功能齐全的图片轮播组件（Carousel）。该组件不仅支持手动切换上一张和下一张图片，还具备自动播放功能。

---

🎯 应用目标

• 使用 Vue 3 Composition API 管理状态
• 利用 Tailwind CSS 快速构建响应式布局
• 实现自动播放和手动切换功能
• 组件结构清晰、易于扩展

---

⚙️ 技术实现点

技术点	描述
Vue 3 <script setup>	使用 ref 和生命周期钩子控制状态与行为
Tailwind CSS	利用预定义的实用程序类快速构建 UI 布局
currentIndex	当前显示图片的索引
translateX	利用 CSS transform 属性实现平滑过渡效果
自动播放	使用 setInterval 定时器实现

---

🧱 组件实现

模板结构 <template>

<template><divclass="absolute top-1/2 left-1/2 h-[400px] w-[800px] -translate-x-1/2 -translate-y-1/2 overflow-hidden"><!-- 图片轨道 --><divclass="flex h-full transition-transform duration-500 ease-in-out":style="{ transform: `translateX(-${currentIndex * 100}%)` }"><imgv-for="(image, index) in images":key="index":src="image"class="h-[400px] w-[800px] object-cover" /></div><!-- 控制按钮 --><div class="absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-5"><button@click="prevImage"class="cursor-pointer rounded border-none bg-[rgba(0,0,0,0.5)] px-4 py-2 text-white hover:bg-[rgba(0,0,0,0.8)]">上一张</button><button@click="nextImage"class="cursor-pointer rounded border-none bg-[rgba(0,0,0,0.5)] px-4 py-2 text-white hover:bg-[rgba(0,0,0,0.8)]">下一张</button></div></div>
</template>

模板部分展示了如何创建一个居中的轮播容器，并包含了一个用于滚动图片的轨道和两个控制按钮（“上一张”和“下一张”）。

脚本逻辑 <script setup>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'// 模拟图片数组，可根据实际需求替换
const images = ref(['https://picsum.photos/id/10/800/400','https://picsum.photos/id/11/800/400','https://picsum.photos/id/12/800/400','https://picsum.photos/id/13/800/400',
])const currentIndex = ref(0)
let autoPlayTimer = null// 切换到上一张图片
const prevImage = () => {currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length
}// 切换到下一张图片
const nextImage = () => {currentIndex.value = (currentIndex.value + 1) % images.value.length
}// 自动轮播函数
const startAutoPlay = () => {autoPlayTimer = setInterval(() => {nextImage()}, 3000)
}// 组件挂载时开始自动轮播
onMounted(() => {startAutoPlay()
})// 组件卸载时清除定时器
onUnmounted(() => {clearInterval(autoPlayTimer)
})
</script>

脚本部分定义了图片列表、当前展示图片的索引、自动播放逻辑以及生命周期钩子。通过这些设置，实现了组件的初始化、自动播放及清理工作。

---

🎨 Tailwind CSS 样式重点

以下是本文中使用的 Tailwind CSS 类及其作用的详细说明：

类名	作用
absolute	将元素定位为绝对定位
top-1/2 left-1/2	设置元素相对于最近的定位祖先顶部和左侧对齐
-translate-x-1/2 -translate-y-1/2	将元素沿 X 轴和 Y 轴移动自身宽度和高度的一半，实现居中对齐
h-[400px] w-[800px]	固定元素的高度和宽度
overflow-hidden	隐藏超出容器的内容
transition-transform duration-500 ease-in-out	添加变换属性的过渡动画，持续时间为 500ms，缓动效果为 ease-in-out
object-cover	保持图片比例并填充整个容器
hover:bg-[rgba(0,0,0,0.8)]	设置鼠标悬停时的背景颜色为更深的半透明黑色

---

🔍 关键功能解析

✅ 手动切换

通过点击“上一张”和“下一张”按钮，用户可以手动切换到前后图片。这里巧妙地使用模运算确保索引值在数组范围内循环。

✅ 自动播放

组件挂载后会自动开始播放，每隔三秒切换到下一张图片。组件卸载时会清除定时器，避免内存泄漏。

✅ 动画过渡

利用 Tailwind CSS 提供的 transition-transform 类，实现了图片切换时的平滑过渡效果，提升了用户体验。

---

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{id: 35,title: 'Image Carousel',image: 'https://50projects50days.com/img/projects-img/35-image-carousel.png',link: 'ImageCarousel',},

router/index.js 中添加路由选项：

{path: '/ImageCarousel',name: 'ImageCarousel',component: () => import('@/projects/ImageCarousel.vue'),},

---

🏁 总结

使用 Vue 3 的 Composition API 结合 Tailwind CSS 创建一个功能完善的图片轮播组件。

你可以扩展这个基础的图片轮播组件：

• ✅ 添加指示器（Indicators）：显示当前是第几张图片，支持点击切换。
• ✅ 触控滑动（Touch Support）：支持在移动端通过滑动手势切换图片。
• ✅ 暂停自动播放：当鼠标悬停在轮播图上时暂停自动播放。
• ✅ 动态加载图片：从后端接口获取图片数据。
• ✅ 响应式设计：根据屏幕尺寸自适应轮播图宽度和高度。

---

👉 下一篇，我们将完成VerifyAccountUi组件，实现一个验证码验证组件UI。🚀

感谢阅读，欢迎点赞、收藏和分享 😊