层叠式轮播图

<template>
    <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()">
        <img src="https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
            :class="v1" />
        <img src="https://img2.baidu.com/it/u=2537370952,3446004972&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694192400&t=c2ca919c44b1872acf92166fc0360843"
            :class="v2" />
        <img src="https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202" :class="v3" />
        <img src="https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            :class="v4" />
        <!-- 控制器 -->
        <div class="dot-view">
            <div :class="dot1" @click="showImage(1)">
            </div>
            <div :class="dot2" @click="showImage(2)">
            </div>
            <div :class="dot3" @click="showImage(3)">
            </div>
            <div :class="dot4" @click="showImage(4)">
            </div>
        </div>
        <div class="arrow-view" v-show="isActive">
            <!-- <img src="../assets/arrow.png" class="arrow-left" @click="toLeft()" />
          <img src="../assets/arrow.png" class="arrow-right" @click="toRight()" /> -->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            timer: '',
            isActive: false,
            value: 1,
            v1: 'banner wz1',
            v2: 'banner wz2',
            v3: 'banner wz3',
            v4: 'banner wz4',
            dot1: 'dot-1 dot-color-actived',
            dot2: 'dot-2 dot-color-normal',
            dot3: 'dot-3 dot-color-normal',
            dot4: 'dot-4 dot-color-normal'
        }
    },
    created() { },
    methods: {
        // 根据 index 更新对应的显示器位置
        showImage(index) {
            this.dot1 = index === 1 ? 'dot-1 dot-color-actived' : 'dot-1 dot-color-normal';
            this.dot2 = index === 2 ? 'dot-2 dot-color-actived' : 'dot-2 dot-color-normal';
            this.dot3 = index === 3 ? 'dot-3 dot-color-actived' : 'dot-3 dot-color-normal';
            this.dot4 = index === 4 ? 'dot-4 dot-color-actived' : 'dot-4 dot-color-normal';
            // 根据 index 更新对应的图片显示逻辑
            if (index === 1) {
                this.v1 = 'banner wz1';
                this.v2 = 'banner wz2';
                this.v3 = 'banner wz3';
                this.v4 = 'banner wz4';
            }
            else if (index === 2) {
                this.v1 = 'banner wz2';
                this.v2 = 'banner wz3';
                this.v3 = 'banner wz4';
                this.v4 = 'banner wz1';
            }
            else if (index === 3) {
                this.v1 = 'banner wz3';
                this.v2 = 'banner wz4';
                this.v3 = 'banner wz1';
                this.v4 = 'banner wz2';
            } else if (index === 4) {
                this.v1 = 'banner wz4';
                this.v2 = 'banner wz1';
                this.v3 = 'banner wz2';
                this.v4 = 'banner wz3';
            }

        },
        toLeft() {
            this.value--
            if (this.value == 0) {
                this.value = 4
            }
            this.changeClasss()
        },
        toRight() {
            this.value++
            if (this.value > 4) {
                this.value = 1
            }
            this.changeClasss()
        },
        mouseOver() {
            this.isActive = true
            clearInterval(this.timer);
        },
        mouseLeave() {
            this.isActive = false
            this.timer = setInterval(this.get, 2000);
        },
        changeClasss() {
            if (this.value == 1) {
                this.v1 = 'banner wz1'
                this.v2 = 'banner wz2'
                this.v3 = 'banner wz3'
                this.v4 = 'banner wz4'
                this.dot1 = 'dot-1 dot-color-actived'
                this.dot2 = 'dot-2 dot-color-normal'
                this.dot3 = 'dot-3 dot-color-normal'
                this.dot4 = 'dot-4 dot-color-normal'
            }
            if (this.value == 2) {
                this.v1 = 'banner wz2'
                this.v2 = 'banner wz3'
                this.v3 = 'banner wz4'
                this.v4 = 'banner wz1'
                this.dot1 = 'dot-1 dot-color-normal'
                this.dot2 = 'dot-2 dot-color-actived'
                this.dot3 = 'dot-3 dot-color-normal'
                this.dot4 = 'dot-4 dot-color-normal'
            }
            if (this.value == 3) {
                this.v1 = 'banner wz3'
                this.v2 = 'banner wz4'
                this.v3 = 'banner wz1'
                this.v4 = 'banner wz2'
                this.dot1 = 'dot-1 dot-color-normal'
                this.dot2 = 'dot-2 dot-color-normal'
                this.dot3 = 'dot-3 dot-color-actived'
                this.dot4 = 'dot-4 dot-color-normal'
            }
            if (this.value == 4) {
                this.v1 = 'banner wz4'
                this.v2 = 'banner wz1'
                this.v3 = 'banner wz2'
                this.v4 = 'banner wz3'
                this.dot1 = 'dot-1 dot-color-normal'
                this.dot2 = 'dot-2 dot-color-normal'
                this.dot3 = 'dot-3 dot-color-normal'
                this.dot4 = 'dot-4 dot-color-actived'
            }
        },
        get() {
            this.value++;
            if (this.value > 4) {
                this.value = 1
            }
            this.changeClasss()
        }
    },
    mounted() {
        this.timer = setInterval(this.get, 2000);
        this.get
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
}
</script>
<style lang="scss" scoped>
.arrow-left {
    position: absolute;
    left: 20px;
    top: 250px;
    cursor: pointer;
    transform: rotate(180deg);
}

.arrow-right {
    position: absolute;
    left: 280px;
    top: 250px;
    cursor: pointer;
}

.article-main {
    width: 540px;
    height: 360px;
    position: relative;
    margin-top: 50px;

}

.banner {
    border-radius: 30px;
    position: absolute;
    transition: all 0.6s;
}

.wz1 {
    width: 500px;
    height: 260px;
    left: 80px;
    z-index: 666;
    top: 50px;
}

.wz2 {
    width: 500px;
    height: 280px;
    left: 120px;
    top: 50px;
    z-index: 777;
}

.wz3 {
    width: 520px;
    height: 300px;
    left: 120px;
    top: 50px;
    z-index: 888;
}

.wz4 {
    width: 540px;
    height: 360px;
    left: 40px;
    top: 20px;
    z-index: 999;
}

.dot-view {
    position: absolute;
    left: 230px;
    top: 400px;
    display: flex;
    flex-direction: row;
}

.dot-color-actived {
    background-color: #67DF76;
    width: 60px !important;
    height: 10px !important;
    border-radius: 15px !important;
}

.dot-color-normal {
    background-color: #B7B7B7;
}

.dot-1 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-2 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 20px;
}

.dot-3 {
    margin-left: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-4 {
    margin-left: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
</style>

更多轮播图样式可以参考www.swiper.com.cn/demo/index.…