效果

想要达到的效果如下图，顶部横幅有6张图片可以自动切换：

实现步骤

先去element-ui官网学习这个跑马灯的模板代码:

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

根据这个模板，创建我们自己的走马灯组件，新建pmd.Vue文件设计我们自己的走马灯组件：

<template>
  <el-carousel :interval="4000" type="card" height="100px">
    <el-carousel-item v-for="item in imagebox" :key="item.id">
      <img :src="item.idView" class="image">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default{
  name: 'pmd',
  data () {
    return {
      imagebox: [{id: 0, idView: require('../../assets/img/band1.png')},
      {id: 1, idView: require('../../assets/img/band2.png')},
      {id: 2, idView: require('../../assets/img/band3.png')},
      {id: 3, idView: require('../../assets/img/band4.png')},
      {id: 4, idView: require('../../assets/img/band5.png')},
      {id: 5, idView: require('../../assets/img/band6.png')}
        // imagebox是assets下一个放图片的文件夹
      ]
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 20px 1px 1px 1px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  margin: 5px 1px 1px 1px;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
  margin: 5px 1px 1px 1px;
}

.image{
/*设置图片宽度和浏览器宽度一致*/
  width:100%;
  height:inherit;
}
</style>		

原理很简单，组件中的数据存放图片集 imagebox，imagebox是assets下一个放图片的文件夹，遍历这个组件集显示即可。这里值得注意的是走马灯图片的大小宽高比例最好与组件中的比例一致。也就是说，你可以把要显示的图片裁剪一下，不需要与你要显示的宽高保持一致，只要宽高比一致即可，然后设置图片显示格式.image{
/设置图片宽度和浏览器宽度一致/
width:100%;
height:inherit;
}
这样显示的效果就比较好。我当时做的时候先用QQ的截图功能量了一下这个图片的大小（宽和高的像素值长度，qq截图时会显示的）：
然后裁剪图片的时候先剪出一样大小的一个框，然后斜角拉伸，等比例缩放。

组件设置好了后，就可以去调用了。
我想要把这个跑马灯组件用到我的登录界面login.Vue，因此在login. vue的JS中导入这个pmd.vue：

• import中添加组件位置
• export中返回组件
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713100520717.png
  然后就可以在login的视图层html中直接用这个组件：
  效果;