当前位置：首页 > VUE

vue点击实现文字轮播

2026-02-21 02:27:54VUE

Vue 实现文字轮播

使用 CSS 动画实现

通过 CSS 的 animation 和 @keyframes 实现文字轮播效果，适用于简单的文字切换。

<template>
  <div class="text-carousel">
    <div class="text-content">
      {{ currentText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['文本1', '文本2', '文本3'],
      currentIndex: 0
    };
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex];
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length;
    }, 2000);
  }
};
</script>

<style>
.text-carousel {
  overflow: hidden;
  height: 30px;
}

.text-content {
  animation: slide 2s infinite;
}

@keyframes slide {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
</style>

使用 Vue Transition 组件

通过 Vue 的 <transition> 组件实现平滑的过渡效果。

<template>
  <div class="text-carousel">
    <transition name="fade" mode="out-in">
      <div :key="currentText" class="text-content">
        {{ currentText }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['文本1', '文本2', '文本3'],
      currentIndex: 0
    };
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex];
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length;
    }, 2000);
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库

使用 vue-carousel 等第三方库快速实现轮播效果。

安装依赖：

npm install vue-carousel

代码示例：

<template>
  <carousel :autoplay="true" :loop="true" :autoplayTimeout="2000">
    <slide v-for="(text, index) in texts" :key="index">
      {{ text }}
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';

export default {
  components: { Carousel, Slide },
  data() {
    return {
      texts: ['文本1', '文本2', '文本3']
    };
  }
};
</script>

点击切换文字

通过点击事件手动切换轮播文字。

vue点击实现文字轮播

<template>
  <div class="text-carousel" @click="nextText">
    <div class="text-content">
      {{ currentText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['文本1', '文本2', '文本3'],
      currentIndex: 0
    };
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex];
    }
  },
  methods: {
    nextText() {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length;
    }
  }
};
</script>

<style>
.text-carousel {
  cursor: pointer;
}
</style>