Layui在弹出层实现轮播图效果

一、官网弹出层和轮播图代码

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	轮播切换动画方式，可选值为： default（左右切换） updown（上下切换） fade（渐隐渐显切换）	string	'default'
autoplay	是否自动切换	boolean	true
interval	自动切换的时间间隔，单位：ms（毫秒），不能低于800	number	3000
index	初始开始的条目索引	number	0
arrow	切换箭头默认显示状态，可选值为： hover（悬停显示） always（始终显示） none（始终不显示）	string	'hover'
indicator	指示器位置，可选值为： inside（容器内部） outside（容器外部） none（不显示）注意：如果设定了 anim:'updown'，该参数将无效	string	'inside'
trigger	指示器的触发事件	string	'click'

posted on 2021-12-26 21:16 周文豪阅读(2244) 评论(0) 编辑收藏举报