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 + "}"
            );
        },


}