前端重积累,话不多说,先上一波效果图:
特意总结的裸着就能使用的轮播图,拿走不谢
vue文件,可以用webstorm进行运行
webstorm前置配置可见如下链接:
nodejs配置
<template><div><el-carousel :interval="2000" type="card" height="220px" ><el-carousel-item v-for="item in imgList" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel></div>
</template><script>
export default {name: "MovieShow",data() {return {imgList: [{id:0,idView:require("@/assets/onedog.webp")},{id:1,idView:require("@/assets/jiangnan.webp")},{id:2,idView:require("@/assets/duye2.webp")},{id:3,idView:require("@/assets/xunlongjue.webp")},{id:4,idView:require("@/assets/baoyuzhe.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: 650px;color: #000000;
}.el-carousel__item:nth-child(2n+1) {width: 650px;color: #000000;
}
.el-form-item{margin-left: calc(50% - 400px);
}.content .el-form-item__label {color: rgb(130,130,130);}
.col {color: rgb(130,130,130);
}
.image{width: 100%;
}</style>
积少成多,你的努力正以你看得见和看不见的方式走来。