<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>