vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）

实现效果

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 点击跳转