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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 */
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js是一款流行的JavaScript框架,它可以帮助你快速构建交互式的Web应用程序。如果你想在Vue.js中实现轮播图,可以考虑使用Vue.js的插件或者组件库。 以下是使用Vue.js实现轮播图的一些步骤: 1. 安装Vue.js轮播图组件库 你可以使用npm或yarn等包管理工具来安装Vue.js轮播图组件库,例如: ``` npm install vue npm install vue-awesome-swiper --save ``` 其中,vue-awesome-swiper是一个基于Swiper封装的Vue.js组件库,可以方便地实现轮播图效果。 2. 引入轮播图组件 在Vue.js应用程序中,你可以通过import语句引入轮播图组件,并注册为全局或局部组件。例如: ```javascript import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) ``` 3. 使用轮播图组件 在Vue.js模板中,你可以使用轮播图组件,并设置一些参数和样式。例如: ```html <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-pagination"></div> </div> </template> <script> export default { data() { return { swiperOptions: { pagination: { el: '.swiper-pagination' }, autoplay: true } } }, mounted() { this.$nextTick(() => { new Swiper('.swiper-container', this.swiperOptions) }) } } </script> <style> .swiper-container { width: 100%; height: 300px; } .swiper-slide { text-align: center; font-size: 18px; background: #eee; } </style> ``` 在上述代码中,我们使用了swiper-container、swiper-wrapper、swiper-slide和swiper-pagination等样式来实现轮播图效果。同时,我们还在mounted钩子函数中使用了Swiper构造函数来初始化轮播图。 希望以上内容对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值