?

代碼

（1）代碼使用 Element官網Carousel 走馬燈完成，自己加了一個自動根據頁面鎖定圖片縱橫比的功能。

（2）imageUrl中的src改成自己的圖片路徑。

?

<template><div><el-carousel trigger="click" type="card" ref="carousel1" :height="height_carousel" :interval="6000" arrow="always"style="width:auto;margin-left: 2%;margin-right: 2%"><el-carousel-item v-for="item in imagesUrl" :key="item.name"><img :src="item.src" style="height:100%;width:100%;" alt="圖片替代文本" :title="item.title"/></el-carousel-item></el-carousel><h1 style="text-align: center;font-size: 48px;">歡迎來到系統主頁</h1></div> </template><script> 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: {}, } </script><style scoped>.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; } </style>

?

?

?

總結

以上是生活随笔為你收集整理的vue实现轮播图完整版，锁定图片元素纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。