11.练习图片切换 

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #mask {
            position: relative;
            width: 300px;
            height: 626px;
            background-color: #ccc;
            margin: 30px auto;
        }
        
        img {
            width: 300px;
        }
        
        a {
            position: absolute;
            top: 50%;
            display: block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(0, 0, 0, .3);
        }
        
        .left {
            float: left;
        }
        
        .right {
            right: 0;
            float: right;
        }
        
        a>span {
            font-size: 20px;
            color: #fff;
        }
    </style>
<body>
    <div id="mask">
        <img :src="imgArr[index]" alt="">
        <a href="javascript:;" class="left" @click="prev" v-show="index!=0">
            <span class="glyphicon glyphicon-menu-left"></span>
        </a>
        <a href="javascript:;" class="right" @click="next" v-show="index<imgArr.length-1">
            <span class="glyphicon glyphicon-menu-right"></span>
        </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var mask = new Vue({
            el: "#mask",
            data: {
                imgArr: ["image/yy.jpg", "image/yy2.jpg", "image/yy3.jpg", "image/yy4.jpg",
                    "image/yy5.jpg", "image/yy6.jpg", "image/yy7.jpg", "image/yy8.jpg"
                ],
                index: 0,
            },
            methods: {
                prev: function() {
                    this.index--;

                },
                next: function() {
                    this.index++;
                }

            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:57  闭上耳朵  阅读(56)  评论(0)    收藏  举报