Layui在弹出层实现轮播图效果，基于laiyui 原生工具的数据表格实现

最近用layui做毕业设计微信小程序后台部分，遇到想用layui的操作toolbar点击弹出层展示轮播图，发觉网上大多不靠谱，然后写下这篇文章来给大家避下雷。如果有其他问题可以私我。

先上效果图为敬

Html部分代码

<%--点击查看跳出轮播图部分--%>
<div class="layui-carousel" id="test2" style="display: none; text-align: center ">
    <div carousel-item="" id="lunbo">
    </div>
</div>

Js主要实现部分

 layui.use(['table','carousel','laytpl', 'form'], function() {
        var table = layui.table;
        var carousel = layui.carousel, form = layui.form;
        
       var data = obj.data;
      layer.open({
                    type: 1,
                    title:"路线轮播图",
                    skin: 'layui-layer-rim',
                    area: ['682px', '381px'],
                    content: $("#test2"),
                    success:function(){
                        
                        var urls = data.routePic.split(",");
                        var html='';
                        for (var i=0;i<urls.length;i++){
                            
                            html+='
+urls[i]+'" style="width: auto;height: auto; "   >
';
                            $("#lunbo").html(html);

                        }
                        //先拼接 后加载layui 轮播
                        layui.use('carousel', function(){
                            var carousel = layui.carousel;
                            //建造实例
                            carousel.render({
                                elem: '#test2'
                                ,width: '100%' //设置容器宽度
                                ,arrow: 'always' //始终显示箭头
                                //,anim: 'updown' //切换动画方式
                            });
                        });


                    },
                });
}

注意我这里data是layui数据表格从后台获取的数据，大家使用的时候可以自己获取拼接。