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

男娘i 2022-02-03 15:51 663阅读 0赞

### 我的qq 2038373094 ###

### *** 效果如下*** ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

### *** 除了实现走马灯的效果*** ###

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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220203/9f7bc40ae3c745798a6f6b8173ba9872.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220203/4d0ca7b6ab4c4b7a849aa9d6973f14d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220203/b8069d6bafe6437b961e5cda67954941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220203/1bbb4ee3f3164f9bbc84e3587415cc93.png