vue实现轮播图

实现功能

• 自动轮播（用了生命周期的mounted函数）
• 点击轮播点到相应图片
• 左右点击跳转
• 鼠标移入轮播停止，移除轮播继续
  css样式

* {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .con {
            width: 800px;
            height: 300px;
            margin: auto;
            background: darkcyan;
            position: relative;
        }

        .left {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.839);
            position: absolute;
            left: 0;
            top: 135px;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            cursor: pointer;
        }

        .right {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.839);
            position: absolute;
            right: 0;
            top: 135px;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
            cursor: pointer;
        }

        ul {
            align-self: flex-end;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }

        li {
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            float: left;
            margin: 0 5px;
        }

        .active {
            background: rgb(132, 132, 132);
        }

        .lunimg {
            width: 800px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.8s;
        }

HTML

<div class="con">
        <div @mouseenter="stoptime" @mouseleave="starttime">
            <img class="lunimg" v-for="item in images" :src="item.url" v-show="item.id==show">
        </div>
        <ul>
            <li v-for="item in images" :class="{active:item.id==show}" @click="show=item.id"></li>
        </ul>
        <div class="left" @click="showdes">👈</div>
        <div class="right" @click="showadd">👉</div>
    </div>

<script src="./vue.js"></script>
    <script>
        var time
        let vm = new Vue({
            el: '.con',
            data: {
                images: [
                    { id: 1, url: './lb1.webp' },
                    { id: 2, url: './lb2.webp' },
                    { id: 3, url: './lb3.webp' },
                    { id: 4, url: './lb4.webp' },
                    { id: 5, url: './lb5.jpg' },
                ],
                show: 1
            },
            methods: {
                showadd() {
                    this.show++
                    if (this.show > this.images.length) {
                        this.show = 1
                    }
                },
                showdes() {
                    this.show--
                    if (this.show <= 0) {
                        this.show = this.images.length
                    }
                },
                stoptime() {
                    clearInterval(window.time)
                },
                starttime() {
                    window.time = setInterval(function () {
                        vm.show++
                        if (vm.show > vm.images.length) {
                            vm.show = 1
                        }
                    }, 2000)
                }
            },
            mounted() {
                window.time = setInterval(function () {
                    vm.show++
                    if (vm.show > vm.images.length) {
                        vm.show = 1
                    }
                }, 2000)
            }
        })
    </script>