还是利用之前的方法,设置左右两个按钮,点击它们,分别让图片列表的下表变化就可以
<body> <div id="app"> <img src="./zuo.jpg" alt="" height="100px" width="100px" v-show="index > 0" @click="left"> <img :src="imgSrc[index]" alt="" height="300px" width="500px"> <img src="./you.jpg" alt="" height="100px" width="100px" v-show="index < imgSrc.length-1" @click="right"> <!-- 这里我们分别设置了左右图标和中间的主图片,其中左右图标设置是否展示以及点击它们,index变大变小的函数 主图片的位置则是利用图片数组来遍历图片 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { isShow1: false, isShow2: true, index: 0, imgSrc: [ "./ironman1.png", "./ironman2.png", "./ironman3.png", "./ironman4.png" ] }, methods: { left: function() { this.index -= 1 }, right: function() { this.index += 1 } } }) </script> </body>
可以看到我们定义了imgSrc图片列表,里边是一个个的图片,然后利用:src="imgSrc[index]"来遍历每一个图片
然后设置左右切换的图标,绑定左右函数,然后判断是否展示
如果index 为0那么做图标不显示,如果右图标为 图片数组长度减一 ,那么右图标不显示
实现效果如下
