vue3做图片自动左右轮播

A：

可以借助Vue3的transition组件和transform属性来实现图片自动左右轮播。具体实现步骤如下：

1. 在模板中使用transition包裹图片列表，并设置transition的name属性。

2. 使用v-for指令遍历图片列表，并使用transform属性将图片按照水平方向平移。

3. 定义一个计算属性来获取当前应该显示的图片索引。

4. 定义一个定时器，每隔一段时间更新计算属性中的索引值，从而实现图片的自动左右轮播。

5. 在transition组件中添加动画效果，使图片轮播时能呈现渐变动画效果。

具体代码实现示例如下：

<template>
  <div class="carousel">
    <transition name="slide">
      <ul>
        <li v-for="(item, index) in images" :key="index" :style="`transform: translateX(-${currentIndex * 100}%)`">
          <img :src="item.src" alt="">
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {src: 'http://example.com/image1.jpg'},
        {src: 'http://example.com/image2.jpg'},
        {src: 'http://example.com/image3.jpg'}
      ],
      currentIndex: 0,
      timer: null
    }
  },
  computed: {
    // 获取当前应该显示的图片索引
    currentImageIndex() {
      return this.currentIndex % this.images.length
    }
  },
  mounted() {
    // 启动定时器，每隔3秒更新图片索引
    this.timer = setInterval(() => {
      this.currentIndex++
    }, 3000)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style>
.carousel {
  width: 600px;
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.5s;
}

img {
  width: 600px;
  height: 300px;
  object-fit: cover;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease-in-out;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>