vue实现走马灯效果

最近vue项目中写了走马灯，虽然实现简单但还是在这记一下

1.轮播图组件代码

在导航栏里写轮播图代码，使用v-for遍历imgList数组的所有属性，遍历的顺序基于对该对象调用 keys 的返回值来决定，即面板的name

<!--走马灯效果-->
<el-carousel type="card" height="200px" :interval="2000" arrow="always">
  <el-carousel-item v-for="item in imgList" :key="item.name">
      <img :src="item.src" style="height:100%;width:100%;":title="item.title" />
  </el-carousel-item>
</el-carousel>

2.imgList代码

在data中return一个imgList属性的对象，imgList是一个数组，上面定义item（走马灯的每一块面板）的属性，写几个item数组里就有几个

export default {
  data: function () {
    return {
      imgList: [
        {
          name: 'a',
          src: require('@/assets/images/c3.jpg'),
          title: '这是a.png'
        },
        {
          name: 'b',
          src: require('@/assets/images/c1.jpg'),
          title: '这是b.png'
        },
        {
          name: 'c',
          src: require('@/assets/images/c2.png'),
          title: '这是c.png'
        },
        {
          name: 'd',
          src: require('@/assets/images/c4.jpg'),
          title: '这是d.png'
        }
      ]
   }
  }
}

3.style样式

在style里写走马灯的样式

<style scoped>
    .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>

实现效果：

这里图片路径是写死的