轮播图组件页面（这控制的就是是否拥有fade这个类名，有这个类名的图片就显示。通过控制索引和一个值相等，这个值，在定时器中控制，每隔几秒让这个值+1，那对应的索引的图片就会拥有fade这个类名，索引对应的图片就会显示，达到轮播的效果）

    1. <template>
    2.   <div class='xtx-carousel' @mouseleave="leave" @mouseenter="enter">
    3.     <ul class="carousel-body">
    4.       <li class="carousel-item" v-for="(item,i) in list" :key="item.id" :class="{fade:index===i}" >
    5.         <RouterLink to="/" >
    6.           <img :src="item.imgUrl" alt="">
    7.         </RouterLink>
    8.       </li>
    9.     </ul>
    10.     <a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left" @click="toggle(-1)"></i></a>
    11.     <a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right" @click="toggle(1)"></i></a>
    12.     <div class="carousel-indicator">
    13.       <span v-for="(i,idx) in 5" :key="i" :class="{active:index===idx}" @click="qh(idx)"></span>
    14.     </div>
    15.   </div>
    16. </template>
    17. <script>
    18. import { ref, watch } from 'vue'
    19. export default {
    20.   props: {
    21.     list: {
    22.       type: Array,
    23.       default: () => []
    24.     },
    25.     autoPlay: {
    26.       type: Boolean,
    27.       default: false
    28.     },
    29.     duration: {
    30.       type: Number,
    31.       default: 1500
    32.     }
    33.   },
    34.   name: 'XtxCarousel',
    35.   setup (props) {
    36.     const index = ref(0)
    37.     let time = null
    38.     const autoPlayFn = () => {
    39.       time = setInterval(() => {
    40.         index.value++
    41.         if (index.value > props.list.length - 1) {
    42.           index.value = 0
    43.         }
    44.       }, props.duration)
    45.     }
    46.     const toggle = (step) => {
    47.       index.value += step
    48.       if (index.value >= props.list.length) {
    49.         index.value = 0
    50.       }
    51.       if (index.value < 0) {
    52.         index.value = props.list.length - 1
    53.       }
    54.     }
    55.     watch(() => props.list, (newVal, oldVal) => {
    56.       if (newVal.length > 0) {
    57.         return autoPlayFn()
    58.       }
    59.     }, { immediate: true })
    60.     // onUnmounted(() => { clearInterval(time) })
    61.     const leave = () => {
    62.       if (props.autoPlay) { autoPlayFn() }
    63.     }
    64.     const enter = () => {
    65.       if (props.autoPlay) { clearInterval(time) }
    66.     }
    67.     const qh = (idx) => {
    68.       index.value = idx
    69.     }
    70.     return { index, leave, enter, toggle, qh }
    71.   }
    72. }
    73. </script>
    74. <style scoped lang="less">
    75. .xtx-carousel{
    76.   width: 100%;
    77.   height: 100%;
    78.   min-width: 300px;
    79.   min-height: 150px;
    80.   position: relative;
    81.   .carousel{
    82.     &-body {
    83.       width: 100%;
    84.       height: 100%;
    85.     }
    86.     &-item {
    87.       width: 100%;
    88.       height: 100%;
    89.       position: absolute;
    90.       left: 0;
    91.       top: 0;
    92.       opacity: 0;
    93.       transition: opacity 0.5s linear;
    94.       &.fade {
    95.         opacity: 1;
    96.         z-index: 1;
    97.       }
    98.       img {
    99.         width: 100%;
    100.         height: 100%;
    101.       }
    102.     }
    103.     &-indicator {
    104.       position: absolute;
    105.       left: 0;
    106.       bottom: 20px;
    107.       z-index: 2;
    108.       width: 100%;
    109.       text-align: center;
    110.       span {
    111.         display: inline-block;
    112.         width: 12px;
    113.         height: 12px;
    114.         background: rgba(0,0,0,0.2);
    115.         border-radius: 50%;
    116.         cursor: pointer;
    117.         ~ span {
    118.           margin-left: 12px;
    119.         }
    120.         &.active {
    121.           background:  #fff;
    122.         }
    123.       }
    124.     }
    125.     &-btn {
    126.       width: 44px;
    127.       height: 44px;
    128.       background: rgba(0,0,0,.2);
    129.       color: #fff;
    130.       border-radius: 50%;
    131.       position: absolute;
    132.       top: 228px;
    133.       z-index: 2;
    134.       text-align: center;
    135.       line-height: 44px;
    136.       opacity: 0;
    137.       transition: all 0.5s;
    138.       &.prev{
    139.         left: 20px;
    140.       }
    141.       &.next{
    142.         right: 20px;
    143.       }
    144.     }
    145.   }
    146.   &:hover {
    147.     .carousel-btn {
    148.       opacity: 1;
    149.     }
    150.   }
    151. }
    152. </style>

    任意组件导入使用如下图 （组件都是有缺口的，比如如下图，往组件中传入autoplay用来控制轮播图是否可以自动轮播。duration用来控制隔多长时间轮播一张图片，这个时间传到轮播图组件，用来控制定时器的时间，定时器的事件，就是这个变量用来控制）

    1. <template>
    2.   <div class="home-banner">
    3.     <XtxCarousel :autoPlay="true" :duration="2000" :list='list'/>
    4.   </div>
    5. </template>
    6. <script>
    7. import { findBanner } from '@/api/home.js'
    8. import { ref } from 'vue'
    9. export default {
    10.   name: 'HomeBanner',
    11.   setup () {
    12.     const list = ref([])
    13.     findBanner().then(data => {
    14.       console.log(data, '52555555')
    15.       list.value = data.result
    16.     })
    17.     return { list }
    18.   }
    19. }
    20. </script>
    21. <style scoped lang="less">
    22. .home-banner {
    23.   width: 1240px;
    24.   height: 500px;
    25.   position: absolute;
    26.   left: 0;
    27.   top: 0;
    28.   z-index: 98;
    29.   // 默认情况下，轮播图组件的指示条在底部的正中间，而由于整体左侧被挡住了一块，所以需要向右边移动一点。
    30.   .xtx-carousel {
    31.     ::v-deep .carousel-btn.prev {
    32.       left: 270px;
    33.     }
    34.     ::v-deep .carousel-indicator {
    35.       padding-left: 250px;
    36.     }
    37.   }
    38. }
    39. </style>

    image.png