效果圖:

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>

注意合理引用，全篇復制是不行的。

地凍三尺，非一日之寒。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue积累——另一种走马灯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。