还是利用之前的方法,设置左右两个按钮,点击它们,分别让图片列表的下表变化就可以
<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那么做图标不显示,如果右图标为 图片数组长度减一 ,那么右图标不显示
实现效果如下