vue轮播图 - 掘金

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .indexes {
        display: flex;
        position: absolute;
        bottom: 20px;
    }

    .indexes li {
        width: 12px;
        height: 12px;
        margin: 0 10px;
        border-radius: 50%;
        background-color: #fff;
    }

    .container {
        width: 700px;
        position: relative;
        justify-content: center;
        display: flex;
    }

    .container img {
        width: 700px;
    }

    ul li.active {
        background-color: red;
    }
</style>
</head>

<body>
<div id="app">
    <div class="container">
        <img :src="img" v-show="i===activeIndex" v-for="(img,i) in list">
        <ul class="indexes">
            <li @mouseenter="hover(i)" :class="{active:i===activeIndex}" v-for="(img,i) in list"></li>
        </ul>
    </div>

</div>
<script src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/9/1729719b3c1702b3~tplv-t2oaga2asx-image.image"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: 0,
                timer: null,
                list: [
                    "https://p1.music.126.net/jmSZkitsHu6P2osBGwVEtg==/109951165049297767.jpg?imageView&quality=89",
                    "https://p1.music.126.net/qFByl2TS77pjEO8Z8fN_kg==/109951165049330063.jpg?imageView&quality=89",
                    "https://p1.music.126.net/JvG5vdr7omoTUAwtfmDlNg==/109951165049340661.jpg?imageView&quality=89",
                    "https://p1.music.126.net/9GlwjBanTApab4DmKp6Pig==/109951165049975107.jpg?imageView&quality=89"
                ]
            }
        },
        mounted() {
            //DOM初始化完成
            this.run()
        },
        methods: {
            run() {
                this.timer = setInterval(() => {
                    this.activeIndex++
                    if (this.activeIndex === this.list.length) {
                        this.activeIndex = 0
                    }
                }, 1000)
            },
            hover(i) {
                clearInterval(this.timer)
                this.activeIndex = i
                this.run()
            }
        },
    })
</script>
</body>

</html>