50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | BackgroundSlider（背景滑块）

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

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

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

使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个全屏、背景模糊变暗、中间高亮显示的图片轮播组件。用户可以通过左右按钮切换图片，并带有缩放动画效果。

🎯 组件目标

• 展示一组全屏背景图
• 每张图中央有“高亮”展示区域
• 支持左右按钮切换图片
• 添加缩放动画提升视觉体验
• 使用 TailwindCSS 快速构建现代 UI 界面

⚙️ 技术实现点

🧱 组件实现

模板结构 <template>

<template>
    <div class="relative h-screen overflow-hidden text-white">
        <!-- 背景图片变暗效果 -->
        <div
            class="absolute inset-0 origin-center bg-cover bg-center brightness-50 transition-transform duration-500 ease-in-out"
            :class="imageList[currentIndex].className"
            :style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"
            @transitionend="isAnimating = false"></div>

        <!-- 中间亮框 -->
        <div class="absolute inset-0 flex items-center justify-center">
            <div
                class="relative h-3/4 w-3/4 bg-cover bg-center brightness-100"
                :class="imageList[currentIndex].className"></div>
        </div>

        <!-- 切换按钮 -->
        <button
            @click="prevImage"
            class="absolute top-1/2 left-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50">
            &lt;
        </button>
        <button
            @click="nextImage"
            class="absolute top-1/2 right-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50">
            &gt;
        </button>
    </div>
</template>

脚本逻辑 <script setup>

<script setup>
import { ref } from 'vue'

const currentIndex = ref(0)
const isAnimating = ref(false)

const imageList = ref([
    {
        id: 1,
        className:
            'bg-[url(https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',
    },
    {
        id: 2,
        className:
            'bg-[url(https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80)]',
    },
    {
        id: 3,
        className:
            'bg-[url(https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',
    },
])

const nextImage = () => {
    isAnimating.value = true
    currentIndex.value = (currentIndex.value + 1) % imageList.value.length
}

const prevImage = () => {
    isAnimating.value = true
    currentIndex.value =
        (currentIndex.value - 1 + imageList.value.length) % imageList.value.length
}
</script>

🔍 重点效果实现

✅ 图片切换逻辑

通过 currentIndex 来决定当前显示哪一张图片：

const nextImage = () => {
    isAnimating.value = true
    currentIndex.value = (currentIndex.value + 1) % imageList.value.length
}

使用模运算 % 来循环数组。

💡 缩放动画实现

我们为背景图添加了动态 transform 样式和 transition：

:style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"

并在点击按钮时设置 isAnimating = true，动画结束后自动恢复。

同时监听 @transitionend 来关闭动画标志：

@transitionend="isAnimating = false"

🖼️ 图片背景设置

每张图片都使用 Tailwind 的 bg-[url(...)] 类来设置背景图路径：

className: 'bg-[url(https://...)]'

这种方式非常灵活，且无需额外引入图片资源。

🎨 TailwindCSS 样式重点讲解

这些 Tailwind 工具类帮助我们快速构建了一个极具视觉冲击力的全屏轮播组件。

📁 常量定义 + 组件路由

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

{
        id: 18,
        title: 'Background Slider',
        image: 'https://50projects50days.com/img/projects-img/18-background-slider.png',
        link: 'BackgroundSlider',
    },

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

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

🏁 总结

涵盖了 Vue 3 的响应式系统、动画控制、按钮交互以及 TailwindCSS 的强大样式能力。它非常适合用于网站主页、作品集展示、产品介绍等需要突出视觉表现的场景。

你可以进一步扩展的功能包括：

• 自动播放功能（定时切换）
• 添加底部导航圆点指示器
• 支持键盘左右键切换
• 支持移动端滑动手势切换
• 支持主题切换（暗色/亮色）

👉 下一篇，我们将完成ThemeClock组件，非常简约的始终组件可以切换主题以及显示时间。🚀