组件封装之轮播图

实现轮播图的基本步骤

1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理

3.图片播放时,下面小圆圈模块跟随一起变化

4.鼠标放到小圆圈上,可以播放相应图片

5.鼠标不经过轮播图,轮播图自动播放图片

6.鼠标经过,轮播图模块自动停止播放

首先搭建轮播图框架

    <div class="xtx-carousel" >
        <ul class="carousel-body">
            <li class="carousel-item ">
                <RouterLink to="/">
                    <img src="http://xxx" alt="" />
                </RouterLink>
            </li>
        </ul>
        <a  href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
        <a  href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
        <div class="carousel-indicator">
            <span></span>
        </div>
    </div>
</template>

框架less

.xtx-carousel {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 150px;
    position: relative;

    .carousel {
        &-body {
            width: 100%;
            height: 100%;
        }

        &-item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 0.5s linear;

            &.fade {
                opacity: 1;
                z-index: 1;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        &-indicator {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                cursor: pointer;

                ~span {
                    margin-left: 12px;
                }

                &.active {
                    background: #fff;
                }
            }
        }

        &-btn {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, 0.2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all 0.5s;

            &.prev {
                left: 20px;
            }

            &.next {
                right: 20px;
            }
        }
    }

    &:hover {
        .carousel-btn {
            opacity: 1;
        }
    }
}
</style>

一个基本的轮播图框架已完成

完整html

<template>
    <div class="xtx-carousel" @mouseenter="stop" @mouseleave="play">
        <ul class="carousel-body">
            <li class="carousel-item " :class="{ fade: active === index }" v-for="(item, index) in slides">
                <RouterLink to="/">
                    <img :src="item.imgUrl" alt="" />
                </RouterLink>
            </li>
        </ul>
        <a @click="hPrev" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
        <a @click="hNext" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
        <div class="carousel-indicator">
            <span @mouseover="active = idx" v-for="(it, idx) in slides" :class="{ active: active === idx }"></span>
        </div>
    </div>
</template>

完整js

import { homeBanner } from '@/types/data'
import { onBeforeUnmount, onMounted, PropType, ref } from 'vue';
const { slides, duration, autoplay } = defineProps({
    slides: {
        type: Array as PropType<homeBanner[]>,
        required: true
    },
    duration: {
        type: Number,
        default: 3000
    },
    autoplay: {
        type: Boolean,
        default: false
    }
})
let active = ref(1)
const hPrev = () => {
    active.value--
    if (active.value < 0) {
        active.value = slides.length - 1
    }
}
const hNext = () => {
    active.value++
    if (active.value > slides.length - 1) {
        active.value = 0
    }
}
let timer = -1
const play = () => {
    timer = window.setInterval(() => {
        hNext()
        console.log(111)
    }, duration)
}
const stop = () => {
    clearInterval(timer)
}
onMounted(()=>{
    play()
})
onBeforeUnmount(()=>{
    stop()
})
</script>

如何引用?

先把封装好的组件注册到当前文件夹下的index.ts中.再把index.ts注册全局组件

<Carousel :slides="home.bannerList" :autoplay="false" :duration="1000" />

把所需要的值传进去就行了