1、页面部分采用elementUI的官方走马灯控件
<div id="app">
<template v-for="(item,index) in carouseData">
<span @mouseover="handChange(index)" :class="carouseId == item.id ? 'span1' : 'span'">{{item.title}}</span>
</template>
<template>
<el-carousel @change="handChange" :interval="4000" type="card" ref="carousel">
<el-carousel-item v-for="item in carouseData" :key="item.id">
<h3>{{ item.id }}</h3>
<img alt="" :src="item.url" @click="">
</el-carousel-item>
</el-carousel>
</template>
</div>
2、js部分添加添加数据以及对应下标参数
var vm = new Vue({
el:"#app",
data(){
return:{
carouseId:0,
carouseData:[
{url:'/static/img/img_bg.d820fbbb.png',title:'标题1',id:0},
{url:'/static/img/img_bg.d820fbbb.png',title:'标题2',id:1},
{url:'/static/img/img_bg.d820fbbb.png',title:'标题3',id:2}
}
},
methods:function(){
//走马灯自动改变触发事件
handChange(index){
this.$refs.carousel.setActiveItem(index);
this.carouseId=index
},
}
});
3、css部分添加切换标签的样式
.span1{
color: #2f87f1;
}
.span2{
color: #0070c0ad !important;
}
3、最终效果,页面比较粗糙,凑活看吧,但是功能是好的