1. <template>
    2.   <div class="swiper-box">
    3.     <transition-group tag="ul" name="carousel">
    4.       <li v-for="(item, index) in pic" :key="item.pid" v-show="index === mark">
    5.         <!-- <a href="" class="bannera"> -->
    6.         <img :src="item.url" alt="" />
    7.         <!-- </a> -->
    8.       </li>
    9.     </transition-group>
    10.     <div class="bullet">
    11.       <span
    12.         v-for="(item, index) in pic.length"
    13.         :key="index"
    14.         :class="{ active: index === mark }"
    15.         @click="change(index)"
    16.       ></span>
    17.     </div>
    18.   </div>
    19. </template>
    20. <script>
    21. export default {
    22.   props: ["pic"],
    23.   data() {
    24.     return {
    25.       mybanner: [
    26.         { id: 0, banner: "/images/product_list/product/chuzhou01.jpg" },
    27.         { id: 1, banner: "/images/product_list/product/chuzhou02.jpg" },
    28.         { id: 2, banner: "/images/product_list/product/huoli01.jpg" }
    29.       ],
    30.       mark: 0,
    31.       len: 3
    32.     };
    33.   },
    34.   created() {
    35.     // this.autoPlay();
    36.     // setInterval(this.autoPlay, 200)
    37.     // this.play(); // 开启自动轮播
    38.   },
    39.   methods: {
    40.     change(i) {
    41.       this.mark = i;
    42.     },
    43.     autoPlay() {
    44.       this.mark++;
    45.       if (this.mark === this.len) {
    46.         //len在data中定义了，为banner的个数
    47.         this.mark = 0;
    48.         return;
    49.       }
    50.     },
    51.     play() {
    52.       setInterval(this.autoPlay, 3000);
    53.     }
    54.   }
    55. };
    56. </script>
    57. <style lang="scss" scoped>
    58. .swiper-box {
    59.   position: relative;
    60.   width: 381px;
    61.   height: 245px;
    62.   ul {
    63.     position: relative;
    64.     top: 0;
    65.     left: 0;
    66.     width: 100%;
    67.     height: 100%;
    68.     padding: 0px;
    69.     overflow: hidden;
    70.     li {
    71.       position: absolute;
    72.       width: 100%;
    73.       img {
    74.         width: 100%;
    75.         height: 100%;
    76.         vertical-align: middle;
    77.       }
    78.     }
    79.   }
    80.   .bullet {
    81.     // width: 100%;
    82.     height: 30px;
    83.     position: absolute;
    84.     left: 50%;
    85.     bottom: 0;
    86.     transform: translateX(-50%);
    87.     span {
    88.       display: inline-block;
    89.       margin: 10px;
    90.       width: 10px;
    91.       height: 10px;
    92.       background-color: #a4a4a4;
    93.       border-radius: 50%;
    94.       &.active {
    95.         background-color: #fff;
    96.       }
    97.     }
    98.   }
    99.   /* 注意顺序不能错乱，-active的类名要配置在-enter类名之前 */
    100.   // .carousel-enter-active {
    101.   //   // transform: translateX(0);
    102.   //   opacity: 1;
    103.   //   transition: all 1s ease-in-out;
    104.   // }
    105.   // .carousel-leave-active {
    106.   //   // transform: translateX(-100%);
    107.   //   opacity: 0;
    108.   //   transition: all 1s ease-in-out;
    109.   // }
    110.   // .carousel-enter {
    111.   //   // transform: translateX(100%);
    112.   //   opacity: 1;
    113.   // }
    114.   // .carousel-leave {
    115.   //   // transform: translateX(0);
    116.   //   opacity: 0;
    117.   // }
    118.  .carousel-enter-active {
    119.     // transform: translateX(0);
    120.     animation: bounce-in 1s;
    121.   }
    122.   .carousel-leave-active {
    123.     // transform: translateX(-100%);
    124.     animation: bounce-in 1s reverse;
    125.   }
    126.   @keyframes bounce-in {
    127.     0% {
    128.       // transform: scale(0);
    129.       opacity: 0;
    130.     }
    131.     50% {
    132.       // transform: scale(1.5);
    133.       opacity: 0.5;
    134.     }
    135.     100% {
    136.       // transform: scale(1);
    137.       opacity: 1;
    138.     }
    139.   }
    140.   // 另外，li要添加position:absolute这个属性，它相对于carousel绝对定位。
    141. }
    142. </style>