layui框架（弹出层和div轮播）

桃扇骨 2023-02-12 05:57 305阅读 0赞

**一、弹出层**  
模块加载名称：layer；  
由于layer可以独立使用，也可以通过Layui模块化使用。  
layer下载地址：http://layer.layui.com/  
**1、作为独立组件使用 layerlayui**

<script src="layer.js"></script>
    <script> layer.msg('hello'); </script>
    
     
      
     
      
       1
       2
       3
       4
       5

2、在 layui 中使用 layer

**3、弹出层属性的使用方法**  
type - 基本层类型  
layer提供了5种层类型  
可传入的值有：  
0（信息框，默认）  
1（页面层）  
2（iframe层）  
3（加载层）  
4（tips层）  
若你采用layer.open(\{type: 1\})方式调用，则type为必填项（信息框除外）。

基础参数一览表：  
![基础参数一览表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70]  
offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：  
![offset的赋值][offset]

内置方法一览表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70 1]  
代码展示：

html代码：

<div>
    			<button class="layui-btn" id="btn1">信息框</button>
    			<button class="layui-btn" id="btn2">页面层</button>
    			<button class="layui-btn" id="btn3">iframe层</button>
    			<button class="layui-btn" id="btn4">加载层</button>
    			<button class="layui-btn" id="btn5">tips层</button>
    			<button class="layui-btn" id="btn6">输入层</button>
    			<button class="layui-btn" id="btn7">选项卡</button>
    		</div>
    
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9

js代码：

**二、轮播**  
常规轮播效果图：  
![在这里插入图片描述][20191213201956580.gif]

在HTML结构中，只需要简单地注意这两项：

1.  外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
2.  内层元素的属性 carousel-item 用来标识条目。

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数。

基础参数选项表:  
![基础参数选项表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70 2]

html代码：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    			<legend>常规轮播</legend>
    		</fieldset>
    		<div class="layui-carousel" id="test1" lay-filter="test1">
    			<div carousel-item="">
    				<div style="background-color: #00F7DE;"></div>
    				<div style="background-color: #FFFF00"></div>
    				<div style="background-color: #FF5722"></div>
    				<div style="background-color: #FF00FF"></div>
    				<div style="background-color: aqua"></div>
    			</div>
    		</div>
    
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13

js代码：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213114947603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA==,size_16,color_FFFFFF,t_70
[offset]: https://img-blog.csdnimg.cn/20191213115648913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191213115135483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA==,size_16,color_FFFFFF,t_70
[20191213201956580.gif]: https://img-blog.csdnimg.cn/20191213201956580.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191213195916339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FfMjU0MDYzODc3NA==,size_16,color_FFFFFF,t_70