vue实现轮播图完整版，锁定图片元素纵横比

2024-05-31 21:35| 来源: 网络整理| 查看: 265

代码

（1）代码使用 Element官网Carousel 走马灯完成，自己加了一个自动根据页面锁定图片纵横比的功能。

（2）imageUrl中的src改成自己的图片路径。

欢迎来到系统主页 export default { name: "index", data() { return { imagesUrl: [ { name: "1", src: require('@/assets/backImg/1.jpg'), title: "点击查看大图", }, { name: "2", src: require('@/assets/backImg/2.jpg'), title: "点击查看大图", }, { name: "3", src: require('@/assets/backImg/4.jpg'), title: "点击查看大图", }, { name: "4", src: require('@/assets/backImg/5.jpg'), title: "点击查看大图", }, ], height_carousel: "500px", } }, mounted: function () { }, methods: { //动态获取元素的宽度，锁定元素纵横比 setCarouselHeight() { this.$nextTick(() => { const car_width = this.$refs.carousel1.$el.clientWidth; console.log(car_width); this.height_carousel = (car_width * 9 / 16 / 2).toFixed(0) + "px"; console.log(this.height_carousel); return this.height_carousel; }); } }, // created() { window.addEventListener('resize', this.setCarouselHeight) this.setCarouselHeight() }, destroyed() { window.removeEventListener('resize', this.setCarouselHeight) }, computed: {}, } .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }

【本文地址】

公司简介

联系我们