Vue实现无缝滚动轮播图：带左右按钮控制

<template>
  <div class='carousel-container'>
    <div class='carousel-wrapper' :style="{transform: 'translateX(' + translateX + '%)'}">
      <div class='carousel-item' v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.src">
      </div>
    </div>
    <div class='carousel-controls'>
      <button class='carousel-btn' @click="prevCarousel">&lt;</button>
      <button class='carousel-btn' @click="nextCarousel">&gt;</button>
    </div>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      currentIndex: 0, // 当前展示的轮播项索引
      translateX: 0, // 轮播项容器的translateX值
      timer: null, // 定时器
      carouselItems: [
        {src: 'img1.jpg'},
        {src: 'img2.jpg'},
        {src: 'img3.jpg'},
        {src: 'img4.jpg'}
      ]
    }
  },
  mounted() {
    this.startCarousel()
  },
  methods: {
    // 开始轮播
    startCarousel() {
      this.timer = setInterval(() => {
        this.nextCarousel()
      }, 3000)
    },
    // 停止轮播
    stopCarousel() {
      clearInterval(this.timer)
      this.timer = null
    },
    // 下一张轮播图
    nextCarousel() {
      if (this.currentIndex === this.carouselItems.length - 1) {
        // 已经到达最后一张，切换到第一张
        this.currentIndex = 0
        this.translateX = 0
      } else {
        // 切换到下一张
        this.currentIndex++
        this.translateX = -100 * this.currentIndex
      }
    },
    // 上一张轮播图
    prevCarousel() {
      if (this.currentIndex === 0) {
        // 已经到达第一张，切换到最后一张
        this.currentIndex = this.carouselItems.length - 1
        this.translateX = -100 * this.currentIndex
      } else {
        // 切换到上一张
        this.currentIndex--
        this.translateX = -100 * this.currentIndex
      }
    }
  }
}
</script>
<style>
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-wrapper {
  display: flex;
  transition: transform .5s ease;
}

.carousel-item {
  flex: 0 0 100%;
}

.carousel-item img {
  width: 100%;
  height: auto;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.carousel-btn {
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 24px;
  border: none;
  outline: none;
  cursor: pointer;
}

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, .7);
}

.carousel-btn:first-child {
  border-radius: 25px 0 0 25px;
}

.carousel-btn:last-child {
  border-radius: 0 25px 25px 0;
}
</style>
<p>本示例展示了一个基于Vue的定时无缝滚动的轮播图组件，其中包含以下功能：</p>
<ul>
<li>使用<code>carouselItems</code>数组存储轮播图的图片信息。</li>
<li>使用<code>currentIndex</code>和<code>translateX</code>分别表示当前展示的轮播项索引和轮播项容器的translateX值，以实现滑动效果。</li>
<li>使用定时器实现轮播图自动播放功能。</li>
<li>通过<code>nextCarousel</code>和<code>prevCarousel</code>方法分别实现切换到下一张和上一张轮播图的功能。</li>
<li>使用左右切换按钮触发<code>nextCarousel</code>和<code>prevCarousel</code>方法，实现手动控制轮播。</li>
</ul>
<p>该示例还展示了如何在组件的<code>mounted</code>钩子中启动定时器，以及在组件销毁时停止定时器，以防止内存泄漏。</p>
<p>这个轮播图示例可以根据需要进行扩展，例如添加动画效果、支持鼠标滑动等。</p>