办法很简略
display:flex 他们就能横着一行
而后 data 放两样货色,一个是你放图片的地址来 6 个,
一个是 index(等会从第几个开始)
左侧按钮上一个
当按到 0 的时候就停在 0 那里
右侧按下一个
当图片的最初一个 等于 图片的最大值的时候就进行
next 外面的那个 i,起因是图片的第一个是 0 开始,而图片数量却是 1 开始所以才用 Number 减了 1
<template>
<div id="app">
<button @click="prev">《</button>
<img :src="img[index]" style="width: 400px; height: 400px;" alt="">
<button @click="next">》</button>
</div>
</template>
<script>
export default {data() {
return {
img: [require('./assets/01.jpg'),
require('./assets/02.jpg'),
require('./assets/03.jpg'),
require('./assets/04.jpg'),
require('./assets/05.jpg'),
require('./assets/06.jpg')
],
index: 0
}
},
methods: {prev() {this.index == 0 ? this.index = 0 : this.index--},
next() {var i = Number(this.img.length - 1)
this.index == i ? this.index = i : this.index++
}
}
}
</script>
<style lang="less">
*,
a {transition: all .8s;}
button {
padding: 5px 10px;
border: none;
border: 1px solid #6b6b6b;
background: #6b6b6b;
color: #fff;
}
input {
text-align: center;
max-width: 40px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px 10px;
}
#app {display: flex;}
</style>