用vue写轮播图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    .outside {
        margin: 0 auto;
        border: 1px solid red;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .picture {
        display: flex;
        position: absolute;
        bottom: 10px;
        list-style: none;
    }

    .picture li {
        width: 12px;
        height: 12px;
        background-color: #81C99B;
        border-radius: 50%;
        margin: 0 10px;
    }
    .picture li.active {
            background-color: #04F640;
        }
</style>

<body>
    <div id="app">
        <div class="outside">
            <img :src="img" v-show="i===activeIndex" v-for="(img, i) in list">
            <ul class="picture">
                

                <li v-for="(item, i) in list" :class="{active:i===activeIndex}">

                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeIndex: 0,
                    list: [
                        'http://p1.music.126.net/aQfHxFI9b32v19zynGuGiQ==/109951165049233036.jpg?imageView&quality=89',
                        'http://p1.music.126.net/JvG5vdr7omoTUAwtfmDlNg==/109951165049340661.jpg?imageView&quality=89',
                        'http://p1.music.126.net/Jy-9MarzeJr-QAakayhXPg==/109951165049313364.jpg?imageView&quality=89',
                        'http://p1.music.126.net/9GlwjBanTApab4DmKp6Pig==/109951165049975107.jpg?imageView&quality=89',
                        'http://p1.music.126.net/jmSZkitsHu6P2osBGwVEtg==/109951165049297767.jpg?imageView&quality=89'
                    ]
                }
            },
            mounted() {
                setInterval(() => {
                    this.activeIndex++;
                    if (this.activeIndex === this.list.length) this.activeIndex = 0
                }, 1000);
            },
            methods: {

            },
        })
    </script>
</body>

</html>`

用vue写轮播图_第1张图片

用vue写轮播图_第2张图片

你可能感兴趣的:(在路上)