一、项目搭建

首先，我们需要创建一个Vue3项目。您可以使用Vue CLI或Vite来快速搭建：

# 使用Vue CLI
vue create vue-image-switcher

# 使用Vite
npm init vite@latest vue-image-switcher -- --template vue

二、组件设计

<template>
  <div class="image-switcher">
    <div
      v-for="(image, index) in images"
      :key="index"
      :class="{ active: currentIndex === index }"
      @click="switchImage(index)"
    >
      <img :src="image" alt="Image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg',
      ],
      currentIndex: 0,
    };
  },
  methods: {
    switchImage(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.image-switcher {
  display: flex;
  overflow: hidden;
}
.image-switcher > div {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid #ccc;
}
.image-switcher > div img {
  width: 100%;
  height: 100%;
}
.image-switcher > div.active {
  border: 2px solid blue;
}
</style>

三、图片切换逻辑

四、使用组件

在父组件中，您可以将ImageSwitcher组件引入并使用：

<template>
  <div>
    <ImageSwitcher />
  </div>
</template>

<script>
import ImageSwitcher from './components/ImageSwitcher.vue';

export default {
  components: {
    ImageSwitcher,
  },
};
</script>

五、优化与扩展

  1. 无限滚动：您可以为图片切换组件添加无限滚动功能，实现无限循环切换图片。
  2. 懒加载：为了提高页面性能，您可以尝试使用Vue的懒加载功能，按需加载图片。
  3. 动画效果：为图片切换添加动画效果，提升用户体验。