实现效果

element ui 简单实现轮播图

本文，中间叙述的是过程，完整代码在最后面。
最近在写公司官网，用的是element ui 走马灯组件写的轮播图，ui想要自动缩放的效果，如上视频。在这里详细叙述一下我实现的此功能的逻辑吧。
程序员的通病，就是不喜欢麻烦，我更不喜欢麻烦，我个人喜欢大道至简，用最精简的代码完美的实现需求，是我对自己的要求，也是我个人编程的目标。
跟很多人一样，我没接触前也不会，我在想这玩意咋搞，咋办？百度呗！然后我去网上逛了一波，我靠！实现这玩意，代码咋写这么老长，有js实现的有jQuery实现的，代码长的实在没心思看下去，我就先暂缓了这个功能的实现，今天早上在地铁上面突然想到了一个思路，获取轮播图的下标，当下标发生变化的时候，通过更换css 实现这个功能。欸~ 走一波。

轮播图代码

//这块就是简单引入了 element ui 基础用法走马灯第一个

<el-carousel :interval="4000" @change="changeImg" style="width: 100%;margin-top: 1px;" trigger="click"
                   height="43.5rem">
        <el-carousel-item v-for="(item,index)  in bannerList" :key="index">
          <el-image
            :class="className"
            style="width: 100%; height: 100%"
            :src="item.contentCover"
            fit="cover"></el-image>
        </el-carousel-item>
 </el-carousel>

**

第一步如何获取，下标？判断当前轮播图是否改变

**
最初我思路一直被卡在这一块我该如何获取当前的index值，来进行判断是否轮播图发生改变了？这块废了我十几分钟，然后我就去看element 官方文档了，发现了一个好东西，@change

嘿嘿，这玩意能直接判断当前下标是否发生改变，并且拿到当前下标的值。这下好了，第一步判断完成了。遇题不解，怎么办 - - 扒文档。
我最初的思路是拿到下标，进行存取判断是否发生变化，在我犯迷糊的时候，我突然发现这个change他本身就时在下标发生改变后触发的，这我还判断个锤锤，直接用他就完了。差点放过它，罪过、罪过。

通过@cheng 判断下标发生变化js

  //轮播图切换
    changeImg(e) {
      console.log(e, "当前下标"); //可以打印当前轮播图下标
      this.className = "lun-img";
      setTimeout(() => {
        this.className = "lun-img-two";
      }, 300);

    },

如上代码，我@change 绑定的方法是 changeImg （方法名称可以随便写啊），判断完成后，我们下一步就是如何实现更改css。
刚开始我感觉，这不很简单嘛，都能判断了，动态改个css名字不是洒洒水啦。实时告诉我确实很简单，但是刚开始有点东西没考虑到，还是废了点头皮屑。
实现，首先我先写了两个样式，一个让图片放大的，一个让图片缩小的。这里用到的是 transform: scale(); 这句css。scale()，里面的数字，大于1 是放大图片，小于1是缩小图片，但是别太小了，小到负数，就是两极反转了。需要在轮播图的最外面加入 **overflow: hidden;**不然变大的时候会超出盒子的。
css代码如下

 .lun-img {
      transform: scale(1.5);//将图片放大
    }

    .lun-img-two {
      transition: all 3s;//恢复正常过渡的时间
      transform: scale(1);//将图片恢复正常
    }

在data中声明一个字段用来存 class名字

  data() {
    return {
      bannerList: [],//轮播图地址
      className: ""//轮播图名字
    };
  },

这样我们就实现了，两个css 让图片变大缩小了。接下来就是让切换的时候自动切换css了，这块代码在上面js的时候就提及到了。不过最开始我是没有加延时器的，我直接就将class名字赋值了两次：如下

 //轮播图切换
    changeImg(e) {
      // console.log(e, "当前下标");
      this.className = "lun-img";
      this.className = "lun-img-two";
    },

我以为.lun-img-two 有过渡时间，不会影响呈现效果的，现实总是那么打脸，他喵的不管用。然后我加上了个延时器，嘿嘿，可以了。
那么现在问题又来了，自动切换的时候可以了，但是首次进入的时候，首屏轮播图不变怎么办？我就简单的试一下 在mounted() 函数中走一遍class 名字赋值看看行不行

 mounted() {
    this.className = "lun-img";
    setTimeout(() => {
      this.className = "lun-img-two";
    }, 300);
  },

嘿嘿嘿 可以了。
接下来就是让ui小姐姐验收了，本来感觉很可以了，但是又打脸了，ui说这快两张图片切换的时候太快，一瞬间过去了，想让我加过渡。唉，不会。。。我又去扒文档了，发现官方只有，轮播图播放间隔时间，没有过渡时间。那咋办，百度！ 然后，然后 我就找到了。

.el-carousel__item.is-animating {
      transition: all 0.6s;
    }

完美解决！

下面是完整实现的代码

<template>
    <!--      轮播图-->
    <div class="carousel-map">
      <el-carousel :interval="4000" @change="changeImg" style="width: 100%;margin-top: 1px;" trigger="click"
                   height="43.5rem">
        <el-carousel-item v-for="(item,index)  in bannerList" :key="index">
          <el-image
            :class="className"
            style="width: 100%; height: 100%"
            :src="item.contentCover"
            fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      bannerList: [],//轮播图地址 这块写你们的轮播图数组即可
      className: ""//轮播图名字
    };
  },
  mounted() {
    this.className = "lun-img";
    setTimeout(() => {
      this.className = "lun-img-two";
    }, 300);
  },
  methods:{
    //轮播图切换
    changeImg(e) {
      // console.log(e, "当前下标");
      this.className = "lun-img";
      setTimeout(() => {
        this.className = "lun-img-two";
      }, 300);
    },
  }
}
</script>
<style lang="scss" scoped>
 //轮播图
 //我这里做了自适应，高度是rem 为单位的，你们可以直接换成你们的px 宽高即可，如果你们也用了rem，我的单位换算可以和你们的不一样，你们改成你们的数值即可。
  .carousel-map {
    width: 100%;
    height: 43.5rem;
    overflow: hidden;
    .lun-img {
      transform: scale(1.5);
    }
    .lun-img-two {
      transition: all 3s;
      transform: scale(1);
    }
    .el-carousel__item.is-animating {
      transition: all 0.6s;
    }
  }
</style>

最后推一下我写的翻译网站吧 哈哈 ！适合咱们程序员起变量名字使用。
www.louhc.com 点击跳转