效果图:
vue源码:
<template>
<el-carousel :interval="1500" type="card" height="400px" >
<el-carousel-item v-for="item in imgList" :key="item.id">
<img :src="item.idView" class="image">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: "MoveAndActor",
data() {
return {
imgList: [
{id:0,idView:require("@/assets/damingxing.png")},
{id:1,idView:require("@/assets/chenglong.webp")},
{id:2,idView:require("@/assets/liang.webp")},
{id:3,idView:require("@/assets/liyifeng.webp")},
{id:4,idView:require("@/assets/dont.webp")},
{id:5,idView:require("@/assets/han.webp")}
]
};
}
}
</script>
<style scoped>
/*走马灯*/
.el-carousel__item h3 {
color: #000000;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
width: 330px;
margin-left: 80px;
}
.el-carousel__item:nth-child(2n+1) {
width: 350px;
margin-left: 80px;
}
.image{
width:345px;
}
</style>
注意合理引用,全篇复制是不行的。
地冻三尺,非一日之寒。