原生vue实现简单的轮播图

小灰灰 2022-08-28 07:44 216阅读 0赞

实质：通过左右按钮实现图片的上下切换，先将图片地址存储在数组中，然后利用索引实现的图片的切换，和之前用JavaScript实现轮播图的原理一样，  
https://blog.csdn.net/qq\_45030966/article/details/120145990  
具体代码如下：

<!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>轮播图</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
        <style>
            a {
                text-decoration: none;
                color: black;
            }
            
            #app {
                border: 1px solid red;
                margin: 0 auto;
                position: relative;
            }
            
            .img {
                width: 880px;
                height: 390px;
                margin: 0 auto;
            }
            
            .left,
            .right {
                width: 20px;
                height: 20px;
                background-color: aliceblue;
                position: absolute;
            }
            
            .left {
                top: 190px;
                left: 190px;
            }
            
            .right {
                top: 190px;
                right: 190px;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <div class="img">
                <img :src="arr[index]" alt="">
            </div>
            <div class="left" v-show="index!=0">
                <a href="#" @click.prevent="left">
                    < </a>
            </div>
            <div class="right" v-show="index<arr.length-1">
                <a href="#" @click.prevent="right">
                    >
                </a>
            </div>
    
        </div>
    
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    arr: [
                        "./img/1.jpg",
                        "./img/2.jpg",
                        "./img/3.jpg",
                        "./img/4.jpg"
                    ],
                    index: 0
    
    
                },
                methods: {
                    left() {
                        this.index--;
                    },
                    right() {
                        this.index++;
                    }
    
                },
            })
        </script>
    
    
    </body>
    
    </html>