Vue实现简单图片切换效果
<div class="left_Top">
<div class="title">乡贤人才</div>
<div class="content">
<!-- 要轮询的图片 -->
<div class="app">
<img :src="imgarr[index]" />
<!-- 上箭头 -->
<a class="qiehuan1" @click="prev" v-show="index != 0">
<img src="../../assets/images/tupian/up.png" />
</a>
<!-- 下箭头 -->
<a class="qiehuan2" @click="next" v-show="index < imgarr.length - 1">
<img src="../../assets/images/tupian/down.png" />
</a>
</div>
<div class="rightIntroduce">
<div class="jieshao">{{ introduce[index] }}</div>
</div>
</div>
</div>
export default {
data(){
return{
imgarr: [
// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
// 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
// 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
],
introduce: [
// '闻着海棠花开气息,寻着风和日丽云迹,杏花雨轻拂衣,东边晴西边雨落,满目江楼不胜枚举',
// '泛舟一叶静谧,看日落下昏黄,牵一抹,雁归向南方',
// '到桥上,你看云落下春光,夏夜吹荷风到梦乡,桃花缀满枝绕远山',
// '闻着海棠花开气息,寻着风和日丽云迹,杏花雨轻拂衣'
],
index: 0,
}
mehods:{
prev: function () {
this.index--;
},
next: function () {
this.index++;
},
// 乡县人才
getTalent () {
axiosGet("/basicdata/special/list?pageNum=1&pageSize=10&specialType=1").then((res) => {
console.log(res.rows, "测试1111111111111111");
if (res.code == 200) {
res.rows.forEach((item) => {
console.log('item是啥', item.imgUrl);
this.imgarr.push(item.imgUrl)
this.introduce.push(item.remark)
})
}
});
},
// 乡村文旅
getTravel () {
axiosGet("/interest/notice/tirmNoticeList").then((res) => {
console.log(res.data, "乡村文旅1111111111111111");
this.travelList = res.data
});
},
}
}
}