vue实现图片循环

使用 v-for 指令循环图片列表

在 Vue 中可以通过 v-for 指令循环渲染图片列表。假设有一个包含图片 URL 的数组，可以这样实现：

<template>
  <div>
    <img 
      v-for="(image, index) in images" 
      :key="index" 
      :src="image.url" 
      :alt="image.alt"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'path/to/image1.jpg', alt: 'Description 1' },
        { url: 'path/to/image2.jpg', alt: 'Description 2' },
        { url: 'path/to/image3.jpg', alt: 'Description 3' }
      ]
    }
  }
}
</script>

动态加载本地图片

当需要循环本地图片时，建议使用 require 或 import 方式动态加载：

<template>
  <div>
    <img 
      v-for="(img, index) in localImages" 
      :key="index" 
      :src="img.src" 
      :alt="img.alt"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      localImages: [
        { src: require('@/assets/image1.jpg'), alt: 'Local Image 1' },
        { src: require('@/assets/image2.jpg'), alt: 'Local Image 2' }
      ]
    }
  }
}
</script>

实现图片轮播效果

结合 CSS 可以实现简单的图片轮播效果：

<template>
  <div class="carousel">
    <div 
      v-for="(image, index) in images" 
      :key="index" 
      class="slide"
      :class="{ active: currentIndex === index }"
    >
      <img :src="image.url" :alt="image.alt">
    </div>
    <button @click="prev">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [...]
    }
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
    }
  }
}
</script>

<style>
.slide {
  display: none;
}
.slide.active {
  display: block;
}
</style>

使用第三方轮播组件

对于更复杂的图片循环展示，可以使用专门的轮播组件如 vue-awesome-swiper：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image.url" :alt="image.alt">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      },
      images: [...]
    }
  }
}
</script>