Vue.js组件开发-实现全屏焦点图片带图标导航按钮控制图片滑动切换

使用 Vue 实现全屏焦点图片带图标导航按钮控制图片滑动切换

步骤

1. 创建 Vue 项目：可以使用 Vue CLI 快速创建一个新的 Vue 项目。
2. 设计组件结构：创建一个包含图片展示区域和导航按钮的组件。
3. 实现图片滑动切换逻辑：通过点击导航按钮切换图片。
4. 样式设计：设置全屏布局和样式。

代码实现

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 设置导航按钮的位置和样式。

使用说明

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

npm run serve

2. 修改图片：在 FullscreenSlider.vue 文件的 data 函数中，修改 images 数组，添加或替换图片链接。
3. 样式调整：根据需要修改 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">