无序点位的轮播

<template>
    <div class="box">
        <div class="swipers">
            <template  v-for="(item, index) in lists" >
                <div class="item" v-if="index==active" :key="'0'+index" @mouseenter="stopPlay()" @mouseleave="autoPlay()" :style="{left:item.left+'px', top:item.top+'px'}">
                    <img :src="item.img" alt="">
                    <div class="title">
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </template>
            <div class="item_s"  v-for="(item, index) in statics" :key="'1'+index" :style="{left:item.left+'px', top:item.top+'px'}">
                <div class="title">
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
    </div>
</template> 
<script>
    export default {
        components: {
        },
        data() {
            return {
                timer: '',
                active: 0,
                statics: [
                    {
                        left:200,
                        top: 170,
                        name: '海盐地方'
                    },
                    {
                        left:320,
                        top: 400,
                        name: '嫩呢桑措'
                    },
                    {
                        left:20,
                        top: 320,
                        name: '稻城亚丁'
                    },
                ],
                lists:[
                    {
                        left: '200',
                        top: '70',
                        name: 'img1',
                        img: require('../assets/imgs/img1.jpg')
                    },
                    {
                        left: '320',
                        top: '300',
                        name: 'img2',
                        img: require('../assets/imgs/img2.jpg')
                    },
                    {
                        left: '20',
                        top: '220',
                        name: 'img3',
                        img: require('../assets/imgs/img3.jpg')
                    },
                ]
            }
        },
        methods: { 
            autoPlay(){
                let that = this
                this.timer=setInterval(function(){
                    that.active+=1;
                    if(that.active ==3){
                        that.active=0;
                    }
                    console.log(that.active);
                }, 2000)
            },
            stopPlay(){
                var that = this
                clearInterval(that.timer)
            },
        },
        mounted(){
            this.autoPlay()
        }
    }
</script>
<style scoped>
    .box{
         100%;
        height: 100%;
        position: relative;
    }
    .swipers, .static{
        position: absolute;
        left: 0;
        top: 0;
         500px;
        height: 500px;
    }
    .item, .item_s{
         200px;
        height: 90px;
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px;
        box-sizing: border-box;
        display: flex;
    }
    img{
         100px;
        height: 80px;
    }
    .title{
        flex: 1;
        text-align: left;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .item_s{
         110px;
        height: 30px;
        background-color: #f0f0f0;
        border: #f0f0f0;
        cursor: pointer;
    }
</style>