一、官網彈出層和輪播圖代碼
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' ,width: '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', width: '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' |