vue轮播图_vue 轮播特效网易云pc-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47243637/article/details/128635664

该代码示例展示了如何使用Vue.js创建一个图片轮播组件，包括左右箭头导航和底部点状指示器。当鼠标悬停时，轮播会停止自动播放，离开时恢复。点击指示器也可以直接切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 1000px;
            height: 600px;
            margin: 70px auto;
            position: relative;
        }

        .list {
            width: 100%;
            height: 100%;
            display: none;
        }

        .active {
            display: block;
        }

        .list img {
            width: 100%;
            height: 100%;
        }

        .left {
            width: 35px;
            height: 50px;
            border: 1px solid #000;
            position: absolute;
            top: calc(50% - 17px);
            left: 20px;
        }

        .right {
            width: 35px;
            height: 50px;
            border: 1px solid #000;
            position: absolute;
            top: calc(50% - 17px);
            right: 20px;
        }

        .usli {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 40px);
            display: flex;
        }

        .lis {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 5px;
            background-color: rgba(127, 255, 212, 0.305);
        }

        .chan {
            background-color: rgba(0, 255, 255, 0.438);
        }
    </style>
</head>

<body>
    <div id='myApp'>
        <ul class="box" @mouseenter="f4" @mouseleave="f5">
            <li class="list" v-for="(item,index) in arr" :key="item.id" :class="[i == index ? 'active' : '']">
                <img :src="item.url" alt="">
            </li>
            <li class="left" @click="f1"></li>
            <li class="right" @click="f2"></li>
            <ul class="usli">
                <li class="lis" v-for="(item,index) in arr" :key="item.url" :class="[i == index ? 'chan' : '']" @click="f6(index)"></li>
            </ul>
        </ul>
    </div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
    new Vue({
        el: '#myApp',
        data: {
            iim: '',
            i: 0,
            arr: [
                { id: 1, url: 'https://uploadfile.bizhizu.cn/up/ef/df/dd/efdfddb79435265b24aad6714d952724.jpg' },
                { id: 2, url: 'https://www.succedu.com/d/file/2020/07/25/a1c0ca9e51.jpg' },
                { id: 3, url: 'https://img.zmtc.com/2019/0806/20190806060940425.jpg' },
                { id: 4, url: 'https://www.mlito.com/wp-content/uploads/2018/03/bf478dbc95.jpg' }
            ]
        },
        created() {
            this.iim = setInterval(() => {
                this.f3()
            }, 1500)
        },
        methods: {
            f1() {
                if (this.i == 0) { // i的值 == 0
                    this.i = this.arr.length // 那么arr数组的长度就赋值给i
                }
                this.i-- // 让i每一次递减
            },
            f2() {
                this.i++ // 让i递增
                if (this.i == this.arr.length) { // i的值 == arr的长度
                    this.i = 0 // i赋值0
                }
            },
            f3() {
                this.i++ // 让i递增
                if (this.i == this.arr.length) {  // i的值 == arr的长度
                    this.i = 0 // i赋值0
                }
            },
            f4() {
                clearInterval(this.iim) //清除定时器
            },
            f5() {
                this.iim = setInterval(() => {
                    this.f3() 
                }, 1500)
            },
            f6(index){ // 索引值传递过来
                this.i = index // 赋值给i
            }
        }
    })
</script>

</html>