使用Vue实现全屏幻灯片左右切换特效

步骤概述

1. 创建Vue项目：使用Vue CLI快速搭建一个新的Vue项目。
2. 设计组件结构：创建一个FullscreenSlider组件，包含幻灯片容器和切换按钮。
3. 实现样式：设置全屏样式和幻灯片切换动画。
4. 实现逻辑：使用Vue的响应式数据和方法来处理幻灯片的切换。

详细代码

1. 创建Vue项目

安装Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

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

vue create fullscreen-slider-demo
cd fullscreen-slider-demo

2. 创建FullscreenSlider组件

在src/components目录下创建FullscreenSlider.vue文件，代码如下：

<template>
  <div class="fullscreen-slider">
    <!-- 幻灯片容器 -->
    <div class="slider-container">
      <!-- 循环渲染幻灯片 -->
      <div
        v-for="(slide, index) in slides"
        :key="index"
        :class="{ 'slide': true, 'active': currentIndex === index }"
        :style="{ backgroundImage: `url(${slide.image})` }"
      ></div>
    </div>
    <!-- 左切换按钮 -->
    <button class="prev-button" @click="prevSlide">
      <i class="arrow left"></i>
    </button>
    <!-- 右切换按钮 -->
    <button class="next-button" @click="nextSlide">
      <i class="arrow right"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'FullscreenSlider',
  data() {
    return {
      // 当前显示的幻灯片索引
      currentIndex: 0,
      // 幻灯片数据数组
      slides: [
        { image: 'https://via.placeholder.com/1920x1080?text=Slide+1' },
        { image: 'https://via.placeholder.com/1920x1080?text=Slide+2' },
        { image: 'https://via.placeholder.com/1920x1080?text=Slide+3' }
      ]
    };
  },
  methods: {
    // 切换到上一张幻灯片
    prevSlide() {
      this.currentIndex =
        this.currentIndex === 0
          ? this.slides.length - 1
          : this.currentIndex - 1;
    },
    // 切换到下一张幻灯片
    nextSlide() {
      this.currentIndex =
        this.currentIndex === this.slides.length - 1 ? 0 : this.currentIndex + 1;
    }
  }
};
</script>

<style scoped>
.fullscreen-slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slider-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-in-out;
  transform: translateX(100%);
  opacity: 0;
}

.slide.active {
  transform: translateX(0);
  opacity: 1;
}

.prev-button,
.next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
</style>

3. 在App.vue中使用FullscreenSlider组件

<template>
  <div id="app">
    <FullscreenSlider />
  </div>
</template>

<script>
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部分：

  • <div class="fullscreen-slider">：整个幻灯片组件的容器，设置为全屏显示。
  • <div class="slider-container">：幻灯片的容器，使用flex布局。
  • <div v-for="(slide, index) in slides" ...>：循环渲染幻灯片，根据currentIndex设置当前激活的幻灯片。
  • <button class="prev-button" @click="prevSlide">和<button class="next-button" @click="nextSlide">：左右切换按钮，点击时调用相应的方法。

• JavaScript部分：

  • data()：定义了currentIndex和slides两个响应式数据。
  • prevSlide()：切换到上一张幻灯片，如果当前是第一张，则切换到最后一张。
  • nextSlide()：切换到下一张幻灯片，如果当前是最后一张，则切换到第一张。

• CSS部分：

  • .slide：幻灯片的基本样式，设置初始位置和透明度。
  • .slide.active：激活的幻灯片样式，设置位置和透明度为显示状态。
  • .prev-button和.next-button：左右切换按钮的样式。

使用说明

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

npm run serve

2. 修改幻灯片数据：在FullscreenSlider.vue组件的data()方法中，可以修改slides数组，替换图片链接为你自己的图片地址。
3. 样式调整：根据需要修改CSS样式，例如按钮的样式、动画效果等。