vue 轮播图【转载】

<template>
  <!-- 贴进来会有空格的编码问题 要选中一个 然后替换为正常空格 -->
  <div id="banner">

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

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

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

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

        <img :src="item" alt />

      </el-carousel-item>

    </el-carousel>

  </div>

</template>



<script>
export default {
  name: "Banner",

  data() {
    var img = require("../../assets/background.jpg");
    // 这个可以
    return {
      // 图片地址数组
      // banner1"G:\project\vue\HuNanGovernmentTransportationPlatform\src\assets\background.jpg"
      // img_list: ["./banner1", "./banner1", "./banner1", "./banner1"],
      // img_list: ["@/assets/background.jpg", "@/assets/background.jpg",
      // "@/assets/background.jpg", "@/assets/background.jpg"],
      // 没用

      // 没用
      //      img_list: ["../../assets/background.jpg", "../../assets/background.jpg",
      // "../../assets/background.jpg", "../../assets/background.jpg"],

      // 这个可以
      img_list: [img, img, img, img],

      // 图片父容器高度

      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>

/* 作者：中国移动俺不动_e7ea
链接：https://www.jianshu.com/p/27a5e070ed07
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 */