实现效果
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 点击跳转