代码

（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实现轮播图完整版，锁定图片元素纵横比相关推荐

php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
vue实现轮播图代码
这是一段简单的 Vue 实现轮播图的代码: <template><div><div class="carousel"><transitio ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
ElementUI轮播图指示器设置为图片
效果图: <template><div><main><div class="product-intro"><div class ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
vue实现轮播图（跑马灯、无缝滚动、无限切换效果）
Vue简简单单实现无缝滚动轮播图效果,不依赖任何第三方插件或组件,复制粘贴开箱即用,简简单单,干净卫生主页里还有淡入淡出轮播图,地址如下: https://blog.csdn.net/m0_5922 ...
Vue.js轮播图走马灯 (详解)
直接上代码: 轮播图1: html <template><div><div class="back_add"><div class=&qu ...
Vue层叠轮播图tantan-stack
首先npm install vue-tantan-stack --save 安装 vue-tantan-stack地址将包下载到本地,然后把文件放到项目中在文件中引入组件 stack(:pages ...
vue实现轮播图（淡入淡出呼吸效果）
Vue简简单单实现淡入淡出轮播图效果,不依赖任何第三方插件或组件,开箱即用,欢迎C+V. 主页里还有无缝滚动.跑马灯轮播图,地址如下:https://blog.csdn.net/m0_59224033 ...

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

代码

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

最新文章

热门文章