vue积累——另一种走马灯

效果图:

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>

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

地冻三尺，非一日之寒。