当前位置：首页 > news >正文

Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换

news 2025/7/29 4:03:29

使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router，并结合一些CSS样式来完成这个效果。

步骤

创建Vue项目：使用Vue CLI创建一个新的Vue项目。
准备图片：将需要展示的图片放在项目的public目录下。
创建组件：创建一个FullscreenImageSlider组件来实现图片滑动切换功能。
路由配置：在router/index.js中配置路由，将FullscreenImageSlider组件添加到路由中。
样式设计：使用CSS样式实现全屏显示和图片自适应。
实现滑动切换逻辑：使用JavaScript实现图片的平滑滑动切换。

详细代码及注释

1. 创建Vue项目

首先，确保已经安装了Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

然后创建一个新的Vue项目：

vue create fullscreen-image-slider
cd fullscreen-image-slider

2. 准备图片

将需要展示的图片放在public目录下，例如public/images目录。

3. 创建组件

在src/components目录下创建一个FullscreenImageSlider.vue组件，代码如下：

<template><div class="fullscreen-slider"><!-- 图片容器 --><div class="slider-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }"><!-- 遍历图片数组，渲染每个图片 --><imgv-for="(image, index) in images":key="index":src="`/images/${image}`"alt="Fullscreen Image"class="slider-image"/></div><!-- 上一张按钮 --><button class="slider-button prev" @click="prevImage"><i class="fas fa-chevron-left"></i></button><!-- 下一张按钮 --><button class="slider-button next" @click="nextImage"><i class="fas fa-chevron-right"></i></button></div>
</template><script setup>
import { ref } from 'vue';// 定义图片数组，这里假设图片名称为image1.jpg, image2.jpg, image3.jpg
const images = ref(['image1.jpg', 'image2.jpg', 'image3.jpg']);
// 当前显示的图片索引
const currentIndex = ref(0);// 上一张图片的方法
const prevImage = () => {// 如果当前索引大于0，则将索引减1if (currentIndex.value > 0) {currentIndex.value--;} else {// 否则将索引设置为最后一张图片的索引currentIndex.value = images.value.length - 1;}
};// 下一张图片的方法
const nextImage = () => {// 如果当前索引小于图片数组的长度减1，则将索引加1if (currentIndex.value < images.value.length - 1) {currentIndex.value++;} else {// 否则将索引设置为0currentIndex.value = 0;}
};
</script><style scoped>
.fullscreen-slider {position: relative;width: 100vw;height: 100vh;overflow: hidden;
}.slider-container {display: flex;width: 300%; /* 根据图片数量调整宽度 */height: 100%;transition: transform 0.5s ease; /* 平滑过渡效果 */
}.slider-image {width: 100vw;height: 100vh;object-fit: cover; /* 图片自适应 */
}.slider-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;z-index: 10;
}.prev {left: 10px;
}.next {right: 10px;
}
</style>

4. 路由配置

在src/router/index.js中配置路由，将FullscreenImageSlider组件添加到路由中：

import { createRouter, createWebHistory } from 'vue-router';
import FullscreenImageSlider from '../components/FullscreenImageSlider.vue';const routes = [{path: '/',name: 'FullscreenImageSlider',component: FullscreenImageSlider,},
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,
});export default router;

5. 修改`App.vue`

在src/App.vue中引入路由：

<template><div id="app"><router-view></router-view></div>
</template><script setup>
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

使用说明

运行项目：在项目根目录下运行以下命令启动开发服务器：

npm run dev

添加图片：将需要展示的图片放在public/images目录下，并在FullscreenImageSlider.vue组件的images数组中添加图片名称。
浏览效果：打开浏览器，访问http://localhost:5173，即可看到全屏图片滑动切换的效果。点击左右箭头按钮可以切换图片。