element 走马灯实现图片轮播

<template>

    <div id="banner">

      <!--动态将图片轮播图的容器高度设置成与图片一致-->

      <el-carousel :height="bannerHeight + 'px'" >

        <!--遍历图片地址,动态生成轮播图-->

        <el-carousel-item v-for="item in imgList" :key="item">

          <img :src="item.url" alt="">

        </el-carousel-item>

      </el-carousel>

    </div>

</template>

<script>

    export default {

        name: "XXXX",

        data(){

          return{

            // 图片地址数组

            imgList:[{url:"/static/image/111.png",}

            ],

            // 图片父容器高度

            bannerHeight :1000,

            // 浏览器宽度

            screenWidth :0,

          }

        },

        methods:{

          setSize:function () {

            // 通过浏览器宽度(图片宽度)计算高度

            this.bannerHeight = 400 / 1920 * this.screenWidth;

          },

        },

      mounted() {

          // 首次加载时,需要调用一次

          this.screenWidth =  window.innerWidth;

          this.setSize();

          // 窗口大小发生改变时,调用一次

          window.onresize = () =>{

          this.screenWidth =  window.innerWidth;

          this.setSize();

        }

      }

    }

</script>

<style scoped>

  .el-carousel__item h3 {

    color: #475669;

    font-size: 14px;

    opacity: 0.75;

    line-height: 300px;

    margin: 0;

  }

  .el-carousel__item:nth-child(2n) {

     background-color: #99a9bf;

  }

  .el-carousel__item:nth-child(2n+1) {

     background-color: #d3dce6;

  }

  img{

    /*设置图片宽度和浏览器宽度一致*/

    width: 100%;

    height: inherit;

  }

</style>