Vue项目实现vue element组件走马灯效果

最新推荐文章于 2024-08-22 02:07:07 发布

qq_37591637

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量6k

点赞数 1

分类专栏： vue前端专栏

本文链接：https://blog.csdn.net/qq_37591637/article/details/90046391

版权

vue前端专栏专栏收录该内容

55 篇文章 7 订阅

订阅专栏

我的qq 2038373094

效果如下

（由于不支持动态图，我就截图了）

除了实现走马灯的效果

1、自适应插入图片的高度

2、距离左侧20%;

.vue文件如下


<template> 
<el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight+'px'"> 
  <el-carousel-item v-for="item in imgList" :key="item.id">
     <el-row> 
       <el-col :span="24">
         <img ref="imgHeight" :src="item.idView" class="banner_img" @load="imgLoad"/>
         </el-col>
          </el-row> 
          </el-carousel-item> 
          </el-carousel> 
          </template>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .banner_img{
    margin-left: 20%;
  }
  .el-carousel__item:nth-child(2n) {
       background-color: #d3dce6;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script>
export default {
  data() { 
    return{ 
     imgHeight:"", 
   imgList: [ {id: 0, idView: require('../../img/lb0.png')}, {id: 1, name: '详情', idView: require('../../img/lb1.png')}, {id: 2, name: '推荐', idView: require('../../img/lb2.png')},{id: 3, idView: require('../../img/lb3.png')}, ]
    }
    that.imgHeight = '620px';
     window.onresize = function temp() { // 通过点语法获取img的height属性值 
     that.imgHeight = `${that.$refs.imgHeight['0'].height}px` }

},
methods:{
  imgLoad(){
    this.$nextTick(()=>{
      this.imgHeight=this.$refs.imgHeight[0].height

    })
  }
},
mounted(){
  this.imgLoad();
  window.addEventListener('resize',()=>{
    this.imgHeight=this.$refs.imgHeight[0].height
   this.imgLoad(); 
  },false);
},

}
</script>