一、引言
1.1 介绍
在官网首页，可以很方便的下载LayUI
LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。
使得前端页面的制作变得更加简单。
二、环境搭建
2.1 下载
在官网即可完成下载
| 下载LayUI |
|---|
|
2.2 导入依赖
下载的LayUI解压后，将其中的layui目录导入项目中
|
|---|
|
|---|
三、页面元素
3.1.栅格布局.html
响应式栅格布局，每行分 12 等分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>栅格系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<!-- layui-container居中显示有固定尺寸；layui-fluid占满行宽 -->
<div class="layui-container">
<!--<div class="layui-fluid">-->
<div class="layui-row">
<div class="layui-col-md9 layui-col-lg6 layui-bg-orange">
你的内容 9/12
</div>
<div class="layui-col-md3 layui-col-lg6 layui-bg-gray">
你的内容 3/12
</div>
</div>
<!--移动设备、平板、桌面端的不同表现：-->
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
移动：6/12 | 平板：6/12 | 桌面：4/12;
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
移动：6/12 | 平板：6/12 | 桌面：4/12;
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-col-lg3">
移动：4/12 | 平板：12/12 | 桌面：4/12;
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8 layui-col-lg3">
移动：4/12 | 平板：7/12 | 桌面：8/12;
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4 layui-col-lg3">
移动：4/12 | 平板：5/12 | 桌面：4/12;
</div>
</div>
</div>
</body>
</html>
3.2.图标.html
class=”layui-icon 具体的图标样式”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<!-- 引入js -->
<script type="application/javascript" src="layui/layui.js"></script>
<body>
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
<i class="layui-icon layui-icon-wifi" style="font-size: 30px; color: #1E9FFF;"></i>
</body>
</html>
3.3.动画.html
LayUI提供了动画支持
| 样式类 | 描述 |
|---|---|
| layui-anim-up | 从最底部往上滑入 |
| layui-anim-upbit | 微微往上滑入 |
| layui-anim-scale | 平滑放大 |
| layui-anim-scaleSpring | 弹簧式放大 |
| layui-anim-fadein | 渐现 |
| layui-anim-fadeout | 渐隐 |
| layui-anim-rotate | 360度旋转 |
| 追加：layui-anim-loop | 循环动画 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<!-- 引入js -->
<script type="application/javascript" src="layui/layui.js"></script>
<body>
<div class="layui-anim layui-anim-up layui-anim-loop">循环动画</div>
<hr>
<div class="layui-anim layui-anim-down">顶部下滑</div>
<hr>
<div class="layui-anim layui-anim-fadeout">渐隐</div>
<hr>
<!-- 整个div会在页面显示时，以特定动画显示出来 -->
<div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
<!-- 额外添加样式类：layui-anim-loop 使得动画循环运行 -->
<div class="layui-anim layui-anim-rotate layui-anim-loop"
style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">bb</div>
</body>
</html>
3.4.按钮.html
class=”layui-btn 主题 样式”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<button type="button" class="layui-btn layui-btn-warm">添加</button>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-border-blue">跳转</a>
<button type="button" class="layui-btn">标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius ">
<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
带图标的按钮
</a>
</body>
</html>
3.5.表单.html
class=”layui-form”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<form class="layui-form" action="http://www.baidu.com">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));//把表单中数据转成Json并输出
return false;//true表示执行action对应的地址
});
});
</script>
</body>
</html>
3.6 导航.html
导航条
class=”layui-nav” 水平导航条
class=”layui-nav layui-nav-tree” 垂直导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<!--<ul class="layui-nav layui-nav-tree" lay-filter="">-->
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</body>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){});
</script>
</html>
四、内置模块
4.1.layer.html
弹窗 msg()、alert()、confirm()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
qwer
<div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
hello world!
</div>
</body>
<script>
layui.use(["layer"],function(){
layer = layui.layer;
layer.open({
type:1,// 消息框，没有确定按钮
title:["hello","padding-left:5px"], // 标题，及标题样式
content:layui.$("#testmain"), // dom格式
offset:'rb',//可以在右下角显示
shade:true //是否遮罩
});
layer.open({
type:2,// iframe加载，需要一个url
content:"1.栅格布局.html"
});
});
</script>
<!--<script>-->
<!-- // 导入 layer模块-->
<!-- layui.use(["layer"],function(){-->
<!-- var layer = layui.layer;-->
<!-- //layer.msg("hello world!!");-->
<!-- layer.msg("确定吗？",{btn:["确定！","放弃！"],-->
<!-- yes:function(i){layer.close(i);layer.msg("yes!!!")},-->
<!-- btn2:function(i){layer.close(i);layer.msg("no!!!")}}-->
<!-- );-->
<!-- });-->
<!--</script>-->
<!--<script>-->
<!-- // 导入 layer模块-->
<!-- layui.use(["layer"],function(){-->
<!-- var layer = layui.layer;-->
<!-- //0-6 7种图标 0:warning 1:success 2:error 3:question 4:lock 5:哭脸 6：笑脸-->
<!-- layer.alert("alert弹框",-->
<!-- {title:'alert',icon:5 },-->
<!-- function(){//点击“确定”按钮时的回调-->
<!-- layer.msg("好滴");-->
<!-- }-->
<!-- );-->
<!-- });-->
<!--</script>-->
<!--<script>-->
<!-- // 导入 layer模块-->
<!-- layui.use(["layer"],function(){-->
<!-- var layer = layui.layer;-->
<!-- layer.confirm("hello world~",-->
<!-- {shade:false,icon:1,btn:["好滴","不行"]},-->
<!-- function(){layer.msg("好滴！");},-->
<!-- function(){layer.msg("不行！")}-->
<!-- );-->
<!-- });-->
<!--</script>-->
</html>
4.2.layDate.html
日期框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<form class="layui-form layui-form-pane" action="" method="post">
<!-- layui-form-item 一个输入项-->
<div class="layui-form-item">
<label class="layui-form-label">生日</label>
<!-- layui-input-block 输入框会占满除文字外的整行 -->
<div class="layui-input-block">
<input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</body>
<script>
layui.use(["laydate","form"],function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#birth', //指定元素
format:'yyyy/MM/dd',
//value:'2012-12-12' //默认值
value:new Date() //默认值
});
});
</script>
</html>
4.3.数据表格.html
4.3.1 动态表格
动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<!-- 引入js -->
<script type="application/javascript" src="layui/layui.js"></script>
<body>
<table id="demo" lay-filter="test"></table>
</body>
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
var table = layui.table;
// 为表格填充数据
table.render({
elem: '#demo'
,height: 312
,url: 'data.json' //获取数据
,page: true //开启分页
,cols: [[ //表头
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
,{field:'score',width:80, title: '评分', sort: true}
]]
});
});
</script>
</html>data.json数据格式如下：
code：0 代表查询成功，为1时，会显示msg中的内容
count：是为分页准备的，共有多少条数据
msg：消息内容
data：数据
{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]}
4.3.2 分页参数
分页条细节定制
<script>
layui.use("table",function(){
var table = layui.table;
table.render({
elem: '#demo'，
url:'${pageContext.request.contextPath}/data,
cols:[[...]],
page:{limit:1//每页显示1条（ 向后台传值，每页显示条数 ）
,limits:[1,2,3] //可选每页条数
,first: '首页' //首页显示文字，默认显示页号
,last: '尾页'
,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
,next: '<i class="layui-icon layui-icon-next"></i>'
,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
},
});
});
</script>
4.3.3 显示工具栏
右上角工具按钮 toolbar:true
<script>
layui.use("table",function(){
var table = layui.table;
table.render({
elem: '#demo'，
toolbar:true,//显示工具栏
url:'${pageContext.request.contextPath}/data,
cols:[[...]],
page:{...},
});
});
</script>
4.3.4 操作按钮
为每行增加操作按钮
<script>
layui.use(["table","laytpl"],function(){
var table = layui.table;
table.render({
elem: '#demo'，
url:'${pageContext.request.contextPath}/data,
cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市'}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field:"right",title:"操作",toolbar: '#barDemo'}//添加操作按钮
]],
...
});
});
</script>
<!-- 如下script可以定义操作按钮在页面的任何位置 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
4.3.5 操作按钮回调
按钮的单击事件
<table id="demo" lay-filter="test"></table>
<script>
layui.use("table",function(){
table = layui.table;
table.rander({...});
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(test)', function(obj){
var data = obj.data; //获得当前行数据
//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var layEvent = obj.event;
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
// 向服务端发送删除请求
// 此处可以发送ajax
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
// 向服务端发送更新请求
// 同步更新缓存对应的值
obj.update({
username: 'shine001',
city: '北京',
sex:'女',
score:99});
}
});
});
</script>
4.3.5 操作图片
{field: ‘picUrl’, title: ‘图片地址’, width:180,templet:'<div><img style=”height: 80px;width: 80px;” src=”{
{ d.picUrl}}”> </div>’}
4.3.6 操作时间
{field:’updatetime’, width:180, title: ‘修改时间’,templet : “<div>{
{layui.util.toDateString(d.updatetime, ‘yyyy-MM-dd HH:mm:ss’)}}</div>”}
4.4.upload.html
文件上传，layui默认上传MultipartFile的文件名为：file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<form class="layui-form layui-form-pane" action="" method="post" enctype="multipart/form-data">
<!-- layui-form-item 一个输入项-->
<div class="layui-form-item">
<label class="layui-form-label">username</label>
<!-- layui-input-block 输入框会占满除文字外的整行 -->
<div class="layui-input-block">
<input id="birth" type="text" name="username" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
</form>
</body>
<script>
layui.use(['upload','layer'], function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/user/upload' //上传接口
,accept:'file' // file代表所有文件，默认是images代表图片
,size:100 // 文件最大不能超过100kb
,done: function(res){
//上传完毕回调
layui.layer.msg("ok");
}
,error: function(){
//请求异常回调
layui.layer.msg("error");
}
});
});
</script>
</html>
4.5.carousel.html
轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item style="text-align: center;line-height: 280px">
<div><img src="img/1.jpg" width="400" height="400"></div>
<div><img src="img/2.jpg" width="400" height="400"></div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
</body>
<script>
layui.use(['carousel'], function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
});
});
</script>
</html>
版权声明：本文为m0_52994499原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。