vue轮播图小例子，简单易懂，易上手。

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

        .container {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .container img {
            width: 100%;
        }

        .menu {
            width: 100px;
            position: absolute;
            bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .menu li {
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
        }

        .menu li.active {
            background: rebeccapurple;
        }

<div id="app" style="margin: 0 auto;width: 1080px;">
    <div class="container">
        <img :src="item" v-for='(item,i) in list' v-show='i===activeIndex'>
        <ul class="menu">
            <li @mouseenter='hover(i)' :class="{active:i===activeIndex}" v-for='(item,i) in list'></li>
        </ul>
    </div>
</div>

	


	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    timer: null,
                    activeIndex: 0,
                    list: [
                        'http://p1.music.126.net/jmSZkitsHu6P2osBGwVEtg==/109951165049297767.jpg?imageView&quality=89',
                        'http://p1.music.126.net/nhXeKMPCgZZbn1cyowYL_Q==/109951165049323147.jpg?imageView&quality=89',
                        'http://p1.music.126.net/M6O8M7AYnQSVK05xAb9J9A==/109951165049273694.jpg?imageView&quality=89',
                        'http://p1.music.126.net/qFByl2TS77pjEO8Z8fN_kg==/109951165049330063.jpg?imageView&quality=89',
                        'http://p1.music.126.net/aQfHxFI9b32v19zynGuGiQ==/109951165049233036.jpg?imageView&quality=89'
                    ]
                }
            },
            mounted() {//dom初始化完成
                this.run();
            },
            methods: {
                run() {
                    this.timer = setInterval(() => {
                        this.activeIndex++;
                        if (this.activeIndex === this.list.length) this.activeIndex = 0;
                    }, 2000)
                },
                hover(i) {
                    clearInterval(this.timer);
                    this.activeIndex = i;
                    this.run();
                }
            }
        })