vue实现堆叠图片轮播

Vue 实现堆叠图片轮播

堆叠图片轮播是一种常见的视觉效果，图片以堆叠的方式排列，通过动画切换展示。以下是实现方法：

使用 CSS 和 Vue 过渡效果

通过 Vue 的过渡组件结合 CSS 实现堆叠和轮播效果。

<template>
  <div class="carousel-container">
    <transition-group name="stack" tag="div" class="carousel">
      <div v-for="(item, index) in items" :key="item.id" class="carousel-item" :style="{ zIndex: activeIndex === index ? items.length : index }">
        <img :src="item.src" alt="Carousel image">
      </div>
    </transition-group>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        { id: 3, src: 'image3.jpg' }
      ],
      activeIndex: 0
    }
  },
  methods: {
    next() {
      this.activeIndex = (this.activeIndex + 1) % this.items.length;
    },
    prev() {
      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
    }
  }
}
</script>

<style>
.carousel-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stack-enter-active, .stack-leave-active {
  transition: all 0.5s ease;
}

.stack-enter {
  transform: translateX(100%) scale(0.8);
  opacity: 0;
}

.stack-leave-to {
  transform: translateX(-100%) scale(0.8);
  opacity: 0;
}
</style>

使用第三方库

如果需要更复杂的效果，可以使用第三方库如 vue-agile 或 swiper。

安装 swiper：

npm install swiper vue-awesome-swiper

示例代码：

<template>
  <swiper :options="swiperOption" class="stacked-carousel">
    <swiper-slide v-for="item in items" :key="item.id">
      <img :src="item.src" alt="Carousel image">
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      items: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        { id: 3, src: 'image3.jpg' }
      ],
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true
        }
      }
    }
  }
}
</script>

<style>
.stacked-carousel {
  width: 100%;
  height: 300px;
}

.stacked-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

自动轮播

在自定义实现中，可以添加自动轮播功能。

export default {
  // ...
  mounted() {
    this.startAutoPlay();
  },
  methods: {
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.next();
      }, 3000);
    },
    stopAutoPlay() {
      clearInterval(this.interval);
    }
  },
  beforeDestroy() {
    this.stopAutoPlay();
  }
}

通过以上方法，可以灵活实现堆叠图片轮播效果，根据需求选择自定义实现或第三方库。