index.vue

<template>
    <view class="container">
      <swiper 
        class="swiper" 
        indicator-dots="false" 
        autoplay="true" 
        interval="3000" 
        duration="1000" 
        circular="true"
        bindchange="swiperChange">
        <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
          <image :src="item" class="slide-image" />
        </swiper-item>
      </swiper>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imgList: [
            '../../../static/photo/makeWord.png',
            '../../../static/photo/fightingAll.png',
            '../../../static/photo/forwardHouse.png' 
          // 更多图片路径
        ],
      };
    },
    methods: {
        swiperChange(e) {
            const currentIndex = e.detail.current; // 获取当前swiper的索引
            // 根据currentIndex动态调整当前、前一张、后一张图片的样式以实现3D效果
            // 由于直接操作样式较为复杂，建议根据currentIndex修改数据驱动样式的变化
        }
    }
  };
  </script>

<style scoped>
.container {
  width: 100%;
  overflow: hidden;
}
.swiper {
  height: 200px;
  width: 100%;
}
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.slide-image {
  width: 80%;
  height: 100%;
  transition: transform 1s;
  transform: scale(0.8); /* 默认状态为稍微缩小，聚焦时放大 */
}
</style>