vue 动态背景图轮播

1、纯CSS 的实现，那样你的图片是固定的，那如果要后台管理系统来配，那如何实现呢？

@-webkit-keyframes perimeter {0%{background-image: url("../assets/image/zgf03.jpg");background-size: 100% 100%;background-repeat: no-repeat;}25%{background-image: url("../assets/image/zgf01.jpg");background-size: 100% 100%;background-repeat: no-repeat;}75%{background-image: url("../assets/image/zgf02.jpg");background-size: 100% 100%;background-repeat: no-repeat;}100%{background-image: url("../assets/image/zgf03.jpg");background-size: 100% 100%;background-repeat: no-repeat;}}

2、 改成用JS实现：

用js 实现：autoBackgroud(){let backgrounds=' 0%{background-image: url("/jdeps/images/dj01.jpeg");background-size: 100% 100%;background-repeat: no-repeat;} ';backgrounds+=' 25%{background-image: url("/jdeps/images/dj02.jpeg");background-size: 100% 100%;background-repeat: no-repeat; }';backgrounds+='75%{background-image: url("/jdeps/images/dj01.jpeg");background-size: 100% 100%;background-repeat: no-repeat; } ';backgrounds+='100%{background-image: url("/jdeps/images/dj03.jpeg");background-size: 100% 100%;background-repeat: no-repeat; } ';let style = document.styleSheets[0];style.insertRule(" @-webkit-keyframes perimeter { " + backgrounds + "}");}

3、从后台获取动态配置背景图片

1）从接口获取图片列表

2）加入

<script>methods: {autoccs() {let backgrounds = "";this.backgroundImg.forEach((item) => {backgrounds +=item.percent +'{background-image: url("' +item.url +'");background-size: 100% 100%;background-repeat: no-repeat;} ';});let style = document.styleSheets[0];//style.deleteRule(6);//清除之前写入的动画样式,6代表动画所在的数组位置style.insertRule(" @-webkit-keyframes perimeter { " + backgrounds + "}");},}

如果觉得《vue 动态背景图轮播》对你有帮助，请点赞、收藏，并留下你的观点哦！