vue实现轮播图

最新推荐文章于 2024-04-23 10:09:29 发布

初学者0721

最新推荐文章于 2024-04-23 10:09:29 发布

阅读量248

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44428734/article/details/119862762

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>
        .box {
            width: 200px;
            height: 400px;
            position: relative;
            margin: 30px auto;
        }
        
        .item {
            width: 100%;
            position: absolute;
            opacity: 0;
            transition: all .5s;
        }
        
        .ac {
            opacity: 1;
            transform: rotateX(360deg) scale(1.5);
        }
    </style>
</head>

<body>
    <div class="app">

        <div class="box">
            <img v-for="(v,k) in arr" :src="v" alt="" :class="['item',{ac:k==i}]">
        </div>

    </div>
</body>
<script src="./vue2/vue.min.js"></script>
<script>
    new Vue({
        el: ".app",
        data: {
            msg: "你好",
            arr: ["./img/tupian 1.jpg", "./img/tupian 2.jpg", "./img/tupian 3.jpg", "./img/tupian 4.jpg", "./img/tupian 5.jpg", "./img/tupian 6.jpg", "./img/tupian 7.jpg", "./img/tupian 8.jpg", "./img/tupian 9.jpg", "./img/tupian 10.jpg"],
            i: 0
        },
        mounted() {
            setInterval(() => {
                this.i++
                    this.i = this.i > this.arr.length - 1 ? 0 : this.i
            }, 2000)
        },
    })
</script>

</html>

初学者0721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue实现轮播图

<!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&gt...
复制链接

扫一扫