vue3实现多张图片走马灯，当多张图片没有超过盒子的宽度时不走，当多张图片超过盒子的宽度时走。

在Vue 3中实现图片走马灯效果，主要可以通过CSS来控制图片的显示和隐藏，以及通过JavaScript来控制动画的触发条件。以下是一个基本的实现思路：

1. 使用一个`<div>`容器来包裹所有图片，并给这个容器设置一个合适的宽度，使其能够容纳所有图片。
2. 利用CSS的`overflow: hidden`属性来隐藏超出容器宽度的部分图片。
3. 通过改变图片容器的`margin-left`属性来实现图片的横向滚动效果。
4. 使用Vue 3的`watch`或者计算属性来检测图片宽度与容器宽度的关系。当图片总宽度超过容器宽度时，开始自动播放滚动效果；否则停止滚动。
5. 可以通过设置`<img>`标签的`transition`属性来为图片滚动添加平滑过渡效果。

下面是一个简单的代码示例：

<template>
  <div class="carousel" ref="carousel">
    <img v-for="(image, index) in images" :key="index" :src="image" alt="图片" class="carousel-item">
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const images = ref(['image1.jpg', 'image2.jpg', 'image3.jpg', ...]); // 图片列表
const carousel = ref(null); // 图片容器的DOM引用

watch(images, () => {
  if (carousel.value) {
    const totalWidth = carousel.value.scrollWidth;
    const containerWidth = carousel.value.clientWidth;
    const isExceed = totalWidth > containerWidth;
    if (isExceed) {
      // 开始走马灯效果
      startMarquee();
    } else {
      // 停止走马灯效果
      stopMarquee();
    }
  }
});

function startMarquee() {
  // 控制走马灯滚动的函数
  // ...
}

function stopMarquee() {
  // 控制走马灯停止的函数
  // ...
}
</script>

<style>
.carousel {
  overflow: hidden;
  white-space: nowrap;
}

.carousel-item {
  display: inline-block;
  transition: margin-left 0.5s ease;
}
</style>