layui下的图片轮播图效果代码收藏

以下展示在layui table表格列表中展示图片集，并使用layui图片轮播效果。

<script>
layui.use(['table', 'tree', 'layer','jquery'], function () {

//改变宽高
        var h = document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度
         var w = document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度
         //监听改变窗口大小
         window.onresize = function(){
            h = document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度
            w = document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度
            table.reload('idTest',{height:h,width: w});//刷新数据表格
         }

//方法级渲染
        window.demoTable = table.render({
            elem: '#idTest'
            ,id:'idTest'
            ,url : '<%=path%>/activity/getOrglifeListByOrgCode'
            ,width : w
            ,height : h
            , cols: [[ //标题栏
                 {checkbox: true, LAY_CHECKED: false, filter: 'test'}
               // , {field: 'ID', title: '序号', width: 150, sort: true, align: 'center'}
                , {field: 'PO_NAME', title: '组织名称', width: 250, align: 'center'}
                , {field: 'SUBJECT', title: '活动主题', width: 120, align: 'center'}
                , {field: 'PO_LIFE_TYPE_NAME', title: '生活类型', width: 180, align: 'center'}
                , {field: 'POLIFETIME', title: '活动时间', width: 180, align: 'center'}
                , {field: 'VENUE', title: '活动地点', width: 100, align: 'center'}
                , {field: 'PHOTO_UUID', title: '图片集', width: 200, align: 'center',templet:'#imgs'}
                , {field: 'ISOPEN', title: '是否开放', width: 120, align: 'center',templet:'#isopen'}
                , {field: 'PM_NAME', title: '主持人', width: 150, align: 'center'}
                , {field: 'partake', title: '参与人', width: 150, align: 'center',templet:'#join'}
                , {field: 'CREATETIME', title: '记录时间', width: 220, align: 'center'}
                , {field: 'PM_NUM', title: '参与数', width: 85, align: 'center'}
                , {title: '操作', width: 130, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true //是否显示分页
            ,limits : [ 10, 20,50, 100 ]
            ,limit : 20
            ,done:function(res,curr,count){
                $('table tr').on('click',function(){
                     $('table tr').css('background','');
                     $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                 });
            }
        });

})

</script>

其中查看图片集使用的是Layui templet，id号为imgs，如下所示

<script type="text/html" id="imgs">
       <a class="openimg" href='javascript:;' onclick='showImages("{{d.PHOTO_UUID}}")' lay-event="img">查看图片集</a>
</script>

在列表显示中为超链接，点击事件调用了showImages方法。如下：

//图片弹窗
    function showImages(uuid){
        $.ajax({
            cache:false,
            type:'POST',
            dataType:"json",
            url:'<%=path%>/activity/showMediaFiles',
            data:{"uuid":uuid},
            error: function () {
                alert('请求失败');
            },
            success:function(res){
                console.log(res)
                layer.photos({
                    photos: res
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                  }); 
            }
        });
    }

根据官方的说法，使用layer.photos插件，数据组织有一定的标准性，如下是官网的数据格式实例：

{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

本人使用的是Jfinal框架，在<%=path%>/activity/showMediaFiles中组装好layui photo需要的json格式数据即可。

// 组织生活查看图片集
    public void showMediaFiles(){
        String orgCode = getSessionAttr("orgCode");
        String uuid = getPara("uuid");
        // 以下是自己封装的一个远程调用方法，具体底层还是Jfinal HttpKit.post(url,data)的调用
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("USER_ID", orgCode);
        map.put("UUID", uuid);
        String res_showMediaFiles = sendPostRequest("MgrActivityApi", orgCode, "showMediaFiles", "857", map);
        JSONObject jo_showMediaFiles = JSONObject.fromObject(res_showMediaFiles);

        JSONArray arr_photoes = new JSONArray();
        JSONObject obj_photo = new JSONObject();
        if(jo_showMediaFiles.getInt("code")==0){
            JSONArray photoes = jo_showMediaFiles.getJSONArray("data");
            for(int i =0 ;i<photoes.size();i++){
                JSONObject photo = photoes.getJSONObject(i);
                obj_photo.put("alt", "图片名");
                obj_photo.put("pid", 666);
                obj_photo.put("src", PropKit.use("config.properties").get("url")+getSessionAttr("REGION_CODE")+"/"+photo.getString("FILE_PATH"));
                obj_photo.put("thumb", "");
                arr_photoes.add(obj_photo);// 追加到JSONArray中
            }
        }
        Map<String,Object> dataMap = new HashMap<String,Object>();
        // 组装layer.photo需要的json格式数据
        dataMap.put("title", "");
        dataMap.put("id", 123);
        dataMap.put("start", 0);
        dataMap.put("data", arr_photoes);
        System.out.println(JsonKit.toJson(dataMap));
        renderJson(JsonKit.toJson(dataMap));
    }

最终显示效果如下：

点击其中的一列，弹出图片轮播的效果，多张图片可以左右滑动。

专业墙纸贴纸厨房用具装饰出售，本人网店经营

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。https://item.taobao.com/item.htm?id=569617707364