vue 实现轮播转动效果

<template>
<div class="container">
    <ul class="label_ul">
        <li
            class="label_li"
            :class="`label${indexList[index]}`"
            :data-order="indexList[index]"
            ref="labelLi"
            @click="handleLabelChange($event, index)"
            v-for="(item, index) in labelList"
            :key="index"
        >
            <div><span>{{ item.name }}</span></div>
        </li>
    </ul>

</div>
</template>

<script>
    export default {
        name: "brain",
        data(){
            return {
                labelList:[
                    {name:"打击"},
                    {name:"治理"},
                    {name:"服务"},
                    {name:"保障"},
                    {name:"处突"},
                ],
                currentIndex:0,
                order:0,
                indexList:[0, 1, 2, 3, 4]
            }
        },
        methods:{
            handleLabelChange(e, index) {
                this.order = e.currentTarget.dataset.order;//获取当前标签位置
                console.log(this.order);
                this.currentIndex = index;//获取点击当前标签的index
            },
        },
        watch:{
            currentIndex(n){
                if (this.order === 2) {
                    let num = this.indexList.pop();
                    this.indexList.unshift(num);
                } else if (this.order === 4) {
                    let num = this.indexList.shift();
                    this.indexList.push(num);
                }
                if (n === 0){
                    this.indexList = [0, 1, 2, 3, 4];
                }else if (n === 1) {
                    this.indexList = [4, 0, 1, 2, 3];
                }else if (n===2){
                    this.indexList = [3, 4, 0, 1, 2];
                }else if (n===3){
                    this.indexList = [2, 3, 4, 0, 1];
                }else if (n === 4){
                    this.indexList = [1, 2, 3, 4, 0];
                }
            }
        },
        mounted() {
            setInterval(()=>{
                if (this.currentIndex<4){
                    this.currentIndex ++
                }else {
                    this.currentIndex = 0;
                }
            },5000)
        }
    }
</script>

<style scoped lang="less">
    .label_ul {
        .label_li {
            position: absolute;
            transition: all 1000ms ease-in-out 0s;
            >div {
                width: 183px;
                height: 183px;
                background: url("../../img/bg.png") no-repeat center;
                text-align: center;
                line-height: 183px;
                border-radius: 50%;
                font-size: 48px;
                color: #ffffff;
                font-weight: bolder;
            }

        }
        .label0 {
            width: 108px;
            height: 56px;
            top: 594px;
            left: 869px;
            z-index: 5;
            font-size: 18px;
            >div {
                >span {
                    color: #ffffff;
                    text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                    background: linear-gradient(#ffffff, #aee4ff,#5dc8ff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

        }
        .label1 {
            width: 108px;
            height: 56px;
            top: 440px;
            left: 1360px;
            z-index: 5;
            font-size: 18px;
            transform: scale(0.85);
            >div {
                >span {
                    color: #ffffff;
                    text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                    background: linear-gradient(#ffffff, #94b0f6,#2960ed);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

        }
        .label2 {
            width: 108px;
            height: 56px;
            top: 297px;
            left: 1222px;
            z-index: 5;
            font-size: 18px;
            transform: scale(0.6);
            filter: blur(2px);
            >div {
                >span {
                    color: #ffffff;
                    text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                    background: linear-gradient(#ffffff, #aee4ff,#5dc8ff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

        }
        .label3 {
            width: 108px;
            height: 56px;
            top: 297px;
            left: 563px;
            z-index: 5;
            font-size: 18px;
            transform: scale(0.6);
            filter: blur(2px);
            >div {
                >span {
                    color: #ffffff;
                    text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                    background: linear-gradient(#ffffff, #aee4ff,#5dc8ff);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

        }
        .label4 {
            width: 108px;
            height: 56px;
            top: 448px;
            left: 410px;
            z-index: 5;
            font-size: 18px;
            transform: scale(0.85);
            >div {
                >span {
                    color: #ffffff;
                    text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
                    background: linear-gradient(#ffffff, #94b0f6,#2960ed);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

        }
    }
</style>