一、官网弹出层和轮播图代码
layui官网：http://www.uimaker.com/layui/doc/modules/carousel.html
官网代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>carousel模块快速使用</title> <link rel="stylesheet" href="/static/build/layui.css" media="all"> </head> <body> <div class="layui-carousel" id="test1"> <div carousel-item> <div>条目1</div> <div>条目2</div> <div>条目3</div> <div>条目4</div> <div>条目5</div> </div> </div> <!-- 条目中可以是任意内容，如：<img src=""> --> <script src="/static/build/layui.js"></script> <script> layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' , '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); </script> </body> </html>
上述代码是直接在页面展示轮播图，而我的需求是先在页面点击“查看图片”按钮，在弹出框中展示轮播图。
先来看看弹出框的官方代码：
/!* 如果是页面层 */ layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String });
二、使用步骤
效果如下：
1、引入
引入layui.all.js：
<script type="text/javascript" src="${ctx}/static/js/plugins/layui/layui.all.js"></script>
引入layui.css
<link href="${ctx }/static/js/plugins/layui/css/layui.css" rel="stylesheet">
2、html代码
<label class="col-sm-2 control-label">***图片：</label> <div class="col-sm-2" style="margin-top: 6px;"> <span id="zsmtp1"></span> </div>
3、js代码
当从后台获取到数据之后，给id为zsmtp1的标签通过html方法设置内容；
var codePics = []
var list = mes.data.bYpProduce.codePicList;
for (var j=0;j<list.length;j++){
if(list[j].cimage){
codePics.push(list[j].cimage)
}
}
if (mes.data.bYpProduce.codePicList.length > 0) { $("#zsmtp1").html("<a href='javascript:;' style='margin:2px;color:dodgerblue;' onclick=\"showCarousel('" + codePics + "')\" title='查看追溯码图片'><span>查看图片</span></a>") } else { $("#zsmtp1").html(''); }
注意：codePics是数组，但是拼接的标签字符串后就成了字符串，所以不需要特意在codePics后面使用toString()方法转成字符串，然后拼接到标签字符串中。
点击查看图片，执行showCarousel方法：
function showCarousel(codePicList) { var urls = codePicList.split(","); var x = document.documentElement.clientWidth/8; var y = 10; var htmlIm = ""; for (const imageUrl of urls) { htmlIm += "<img src='" + ctx + "/ypimg" + imageUrl + "' />"; } var carousel1 = "<div id='rotationChart' class='layui-carousel'>" + "<div carousel-item>" + htmlIm + "</div>" + "</div>" layer.open({ type: 1, // title:"轮播图", title: false, maxmin: true, // shade: false, shadeClose: true, offset:[y+"px",x+"px"], closeBtn: 2, skin: 'layui-layer-rim', // skin: 'layui-layer-molv', // area: ['1000px', '100%'], area: ['1000px', '98%'], // maxWidth: '1000px', anim: 0, isOutAnim: true, fixed: false, resize: true, content: carousel1, success:function(){ //先拼接 后加载layui 轮播 layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#rotationChart', '100%', //设置容器宽度 height: '99%', //设置容器高度 arrow: 'always', //始终显示箭头 interval: 2000, autoplay:true, full:false //,anim: 'updown' //切换动画方式 }); }); }, }); }
最终效果如下：
二、弹出层属性说明
1、type:类型为number，默认为0，其中0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
2、title:类型为String/Array/Boolean，默认为'信息'，如果你不想显示标题栏，你可以title: false，若你传入的是普通的字符串，如title :'轮播图'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
3、content:类型为String/DOM/Array，默认为''，content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM（如$('#id')），更可以随着type的不同而不同。
4、skin:类型为String，默认为''。skin允许你传入layer内置的样式class名，如layui-layer-rim，效果如下：
注意：可以调整右下角，来调整图片到合适的宽高比。
5、area:在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['1000px', '98%']。如果
6、offset:默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行设置。
7、closeBtn:类型为String/Boolean，默认为1。layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0。
8、shade:遮罩，类型为String/Array/Boolean，默认为0.3。即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0。
9、shadeClose:是否点击遮罩关闭。类型为Boolean，默认为false。如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
10、time:自动关闭所需毫秒。默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）。
11、anim:弹出动画。类型为Number，默认为0，平滑放大。
12、isOutAnim：默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可
13、maxmin:最大最小化。类型为Boolean，默认为alse。该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
14、fixed:固定，类型为Boolean，默认为true。即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可。
15、resize:是否允许拉伸，类型为Boolean，默认为true。默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。
三、轮播图属性说明
在HTML结构中，只需要简单地注意这两项：
1) 外层元素的 class="layui-carousel" 用来标识为一个轮播容器
2) 内层元素的属性 carousel-item 用来标识条目
| 可选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 指向容器选择器，如：elem: '#id'。也可以是DOM对象 | string/object | 无 |
| width | 设定轮播容器宽度，支持像素和百分比 | string | '600px' |
| height | 设定轮播容器高度，支持像素和百分比 | string | '280px' |
| full | 是否全屏轮播 | boolean | false |
| anim | 轮播切换动画方式，可选值为：
|
string | 'default' |
| autoplay | 是否自动切换 | boolean | true |
| interval | 自动切换的时间间隔，单位：ms（毫秒），不能低于800 | number | 3000 |
| index | 初始开始的条目索引 | number | 0 |
| arrow | 切换箭头默认显示状态，可选值为：
|
string | 'hover' |
| indicator | 指示器位置，可选值为：
注意：如果设定了 anim:'updown'，该参数将无效 |
string | 'inside' |
| trigger | 指示器的触发事件 | string | 'click' |