生活随笔
收集整理的這篇文章主要介紹了
vue——走马灯-类轮播图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前端重積累，話不多說，先上一波效果圖:
特意總結的裸著就能使用的輪播圖，拿走不謝
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>
積少成多，你的努力正以你看得見和看不見的方式走來。
總結
以上是生活随笔為你收集整理的vue——走马灯-类轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
