1.首先这里使用的是vue2+element实现的,找到对应的element官网
下面是我整合element实现点击对应的按钮跳转到对应的轮播图图片
<template>
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel :interval="5000" :height="400" ref="myCarousel" @change="handleCarouselChange" >
<el-carousel-item v-for="item in imgs" :key="item">
<img :src="item" />
</el-carousel-item>
</el-carousel>
<div v-for="(item, index) in imgs" :key="index">
<el-button type="primary" v-if="index==1" @click="handleBtnClick(index)">按钮2</el-button>
</div>
</div>
</template>
<script>
export default{
data(){
return{
imgs:[
require("../assets/logo.png"),
require("../assets/Brands.png"),
require("../assets/logo.png"),
],
ams:[],
}
},
methods: {
handleCarouselChange(index) {
this.currentIndex = index;
},
handleBtnClick(index) {
this.$refs.myCarousel.setActiveItem(index);
},
},
}
</script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
</style>
下面是对应的效果图,点击按钮会跳转到第二张图片