使用Vue實現(xiàn)全屏平滑移動、自適應圖片全屏滑動切換的功能。使用Vue 3和Vue Router，并結(jié)合一些CSS樣式來完成這個效果。

步驟

1. 創(chuàng)建Vue項目：使用Vue CLI創(chuàng)建一個新的Vue項目。
2. 準備圖片：將需要展示的圖片放在項目的public目錄下。
3. 創(chuàng)建組件：創(chuàng)建一個FullscreenImageSlider組件來實現(xiàn)圖片滑動切換功能。
4. 路由配置：在router/index.js中配置路由，將FullscreenImageSlider組件添加到路由中。
5. 樣式設計：使用CSS樣式實現(xiàn)全屏顯示和圖片自適應。
6. 實現(xiàn)滑動切換邏輯：使用JavaScript實現(xiàn)圖片的平滑滑動切換。

詳細代碼及注釋

1. 創(chuàng)建Vue項目

首先，確保已經(jīng)安裝了Vue CLI。如果沒有安裝，可以使用以下命令進行安裝：

npm install -g @vue/cli

然后創(chuàng)建一個新的Vue項目：

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

2. 準備圖片

將需要展示的圖片放在public目錄下，例如public/images目錄。

3. 創(chuàng)建組件

在src/components目錄下創(chuàng)建一個FullscreenImageSlider.vue組件，代碼如下：

<template><div class="fullscreen-slider"><!-- 圖片容器 --><div class="slider-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }"><!-- 遍歷圖片數(shù)組，渲染每個圖片 --><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';// 定義圖片數(shù)組，這里假設圖片名稱為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 = () => {// 如果當前索引小于圖片數(shù)組的長度減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%; /* 根據(jù)圖片數(shù)量調(diào)整寬度 */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>

使用說明

1. 運行項目：在項目根目錄下運行以下命令啟動開發(fā)服務器：

npm run dev

2. 添加圖片：將需要展示的圖片放在public/images目錄下，并在FullscreenImageSlider.vue組件的images數(shù)組中添加圖片名稱。
3. 瀏覽效果：打開瀏覽器，訪問http://localhost:5173，即可看到全屏圖片滑動切換的效果。點擊左右箭頭按鈕可以切換圖片。

注意事項

• 確保圖片名稱和路徑正確，否則圖片將無法顯示。
• 可以根據(jù)需要調(diào)整圖片數(shù)組的內(nèi)容和樣式，以滿足不同的需求。