使用 Vue 实现全屏焦点图片带图标导航按钮控制图片滑动切换
步骤
- 创建 Vue 项目：可以使用 Vue CLI 快速创建一个新的 Vue 项目。
- 设计组件结构：创建一个包含图片展示区域和导航按钮的组件。
- 实现图片滑动切换逻辑：通过点击导航按钮切换图片。
- 样式设计：设置全屏布局和样式。
代码实现
1. 创建 Vue 项目
首先，确保已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：
npm install -g @vue/cli
然后创建一个新的 Vue 项目：
vue create fullscreen-slider
cd fullscreen-slider
2. 编写组件代码
在 src/components 目录下创建一个 FullscreenSlider.vue 文件，代码如下：
<template>
<div class="fullscreen-slider">
<!-- 图片展示区域 -->
<div class="slider-container">
<!-- 遍历图片列表，显示当前图片 -->
<img
:src="images[currentIndex]"
alt="Slider Image"
class="slider-image"
:key="currentIndex"
/>
</div>
<!-- 导航按钮区域 -->
<div class="navigation-buttons">
<!-- 上一张按钮 -->
<button @click="prevImage" class="nav-button">
<i class="fas fa-chevron-left"></i>
</button>
<!-- 下一张按钮 -->
<button @click="nextImage" class="nav-button">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</template>
<script>
export default {
name: 'FullscreenSlider',
data() {
return {
// 图片列表，可根据需要添加更多图片链接
images: [
'https://via.placeholder.com/1920x1080?text=Image+1',
'https://via.placeholder.com/1920x1080?text=Image+2',
'https://via.placeholder.com/1920x1080?text=Image+3'
],
// 当前显示的图片索引
currentIndex: 0
};
},
methods: {
// 切换到上一张图片
prevImage() {
// 如果当前索引大于 0，则将索引减 1
if (this.currentIndex > 0) {
this.currentIndex--;
} else {
// 如果当前索引为 0，则切换到最后一张图片
this.currentIndex = this.images.length - 1;
}
},
// 切换到下一张图片
nextImage() {
// 如果当前索引小于图片列表长度减 1，则将索引加 1
if (this.currentIndex < this.images.length - 1) {
this.currentIndex++;
} else {
// 如果当前索引为最后一张图片的索引，则切换到第一张图片
this.currentIndex = 0;
}
}
}
};
</script>
<style scoped>
/* 全屏滑块容器 */
.fullscreen-slider {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* 图片容器 */
.slider-container {
width: 100%;
height: 100%;
}
/* 图片样式 */
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 导航按钮容器 */
.navigation-buttons {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 20px;
}
/* 导航按钮样式 */
.nav-button {
background: rgba(0, 0, 0, 0.5);
border: none;
color: white;
font-size: 24px;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
/* 导航按钮悬停效果 */
.nav-button:hover {
background: rgba(0, 0, 0, 0.8);
}
</style>
3. 在 App.vue 中使用组件
打开 src/App.vue 文件，将代码替换为以下内容：
<template>
<div id="app">
<!-- 使用 FullscreenSlider 组件 -->
<FullscreenSlider />
</div>
</template>
<script>
// 引入 FullscreenSlider 组件
import FullscreenSlider from './components/FullscreenSlider.vue';
export default {
name: 'App',
components: {
FullscreenSlider
}
};
</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>
代码注释说明
-
HTML 部分：
<img>标签用于显示当前图片，通过:src绑定图片链接。<button>标签用于创建导航按钮，通过@click绑定点击事件。
-
JavaScript 部分：
data函数返回一个对象，包含图片列表和当前图片索引。prevImage方法用于切换到上一张图片。nextImage方法用于切换到下一张图片。
-
CSS 部分：
.fullscreen-slider设置全屏布局和溢出隐藏。.slider-image设置图片填充整个容器。.navigation-buttons设置导航按钮的位置和样式。
使用说明
- 运行项目：在项目根目录下运行以下命令启动开发服务器：
npm run serve
- 修改图片：在
FullscreenSlider.vue文件的data函数中，修改images数组，添加或替换图片链接。 - 样式调整：根据需要修改
FullscreenSlider.vue文件中的 CSS 样式，调整布局和外观。
注意事项
- 确保已经安装了 Font Awesome 图标库，用于显示导航按钮的图标。可以在
public/index.html文件中添加以下代码引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
