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("http://cdn.runfudeng.com/jdeps/images/dj01.jpeg");background-size: 100% 100%;background-repeat: no-repeat;} ';backgrounds+=' 25%{background-image: url("http://cdn.runfudeng.com/jdeps/images/dj02.jpeg");background-size: 100% 100%;background-repeat: no-repeat; }';backgrounds+='75%{background-image: url("http://cdn.runfudeng.com/jdeps/images/dj01.jpeg");background-size: 100% 100%;background-repeat: no-repeat; } ';backgrounds+='100%{background-image: url("http://cdn.runfudeng.com/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 动态背景图轮播相关推荐

Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
CSS3动画实现背景图轮播
CSS3动画实现背景图轮播利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
html中如何设置背景图轮播,css3 – 如何更改自定义轮播指示器背景颜色？
在没有Javascript的情况下,最简单的方法是修改标记以使用标准类.然后,您可以使用自动附加到带有.carousel-indicators类的元素的直接子元素的活动类. 在演示中,我覆盖了标准的B ...
背景图轮播响应式插件 vegas的使用和下载
1. 引入 <link rel="stylesheet" href="/static/css/vegas.css"><script src=& ...
CSS实现背景图轮播
1.效果省略--- 2.代码 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
html 轮播_Axure教程：使用动态面板实现轮播图
笔者在本文中介绍了如何用Axure动态面板实现轮播图效果的操作步骤,与大家分享. 所需元件一个转换为动态面板的矩形并命名为轮播图: 这里要记得把"自动调整为内容尺寸"勾选取消掉, ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
Axure动态面板实现轮播图
Axure中不乏许多的高级功能,其中轮播图是我们在页面中常见的一个高级功能,轮播图的做法有很多种,但是就我个人而言认为使用动态面板做轮播简单点.今天就让我们来学习一下Axure中动态面板实现轮播图吧. ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...

vue 动态背景图轮播

vue 动态背景图轮播相关推荐

最新文章

热门文章