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

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

<script>
layui.use([&＃39;table&＃39;, &＃39;tree&＃39;, &＃39;layer&＃39;,&＃39;jquery&＃39;], function () {//改变宽高var h &＃61; document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度var w &＃61; document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度//监听改变窗口大小window.onresize &＃61; function(){h &＃61; document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度w &＃61; document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度table.reload(&＃39;idTest&＃39;,{height:h,width: w});//刷新数据表格}//方法级渲染window.demoTable &＃61; table.render({elem: &＃39;#idTest&＃39;,id:&＃39;idTest&＃39;,url : &＃39;<%&＃61;path%>/activity/getOrglifeListByOrgCode&＃39;,width : w,height : h, cols: [[ //标题栏{checkbox: true, LAY_CHECKED: false, filter: &＃39;test&＃39;}// , {field: &＃39;ID&＃39;, title: &＃39;序号&＃39;, width: 150, sort: true, align: &＃39;center&＃39;}, {field: &＃39;PO_NAME&＃39;, title: &＃39;组织名称&＃39;, width: 250, align: &＃39;center&＃39;}, {field: &＃39;SUBJECT&＃39;, title: &＃39;活动主题&＃39;, width: 120, align: &＃39;center&＃39;}, {field: &＃39;PO_LIFE_TYPE_NAME&＃39;, title: &＃39;生活类型&＃39;, width: 180, align: &＃39;center&＃39;}, {field: &＃39;POLIFETIME&＃39;, title: &＃39;活动时间&＃39;, width: 180, align: &＃39;center&＃39;}, {field: &＃39;VENUE&＃39;, title: &＃39;活动地点&＃39;, width: 100, align: &＃39;center&＃39;}, {field: &＃39;PHOTO_UUID&＃39;, title: &＃39;图片集&＃39;, width: 200, align: &＃39;center&＃39;,templet:&＃39;#imgs&＃39;}, {field: &＃39;ISOPEN&＃39;, title: &＃39;是否开放&＃39;, width: 120, align: &＃39;center&＃39;,templet:&＃39;#isopen&＃39;}, {field: &＃39;PM_NAME&＃39;, title: &＃39;主持人&＃39;, width: 150, align: &＃39;center&＃39;}, {field: &＃39;partake&＃39;, title: &＃39;参与人&＃39;, width: 150, align: &＃39;center&＃39;,templet:&＃39;#join&＃39;}, {field: &＃39;CREATETIME&＃39;, title: &＃39;记录时间&＃39;, width: 220, align: &＃39;center&＃39;}, {field: &＃39;PM_NUM&＃39;, title: &＃39;参与数&＃39;, width: 85, align: &＃39;center&＃39;}, {title: &＃39;操作&＃39;, width: 130, align: &＃39;center&＃39;, toolbar: &＃39;#barDemo&＃39;}]], page: true //是否显示分页,limits : [ 10, 20,50, 100 ],limit : 20,done:function(res,curr,count){$(&＃39;table tr&＃39;).on(&＃39;click&＃39;,function(){$(&＃39;table tr&＃39;).css(&＃39;background&＃39;,&＃39;&＃39;);$(this).css(&＃39;background&＃39;,&＃39;<%&＃61;PropKit.use("config.properties").get("table_color")%>&＃39;);});}});})script>

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

<script type&＃61;"text/html" id&＃61;"imgs">class&＃61;"openimg" href&＃61;&＃39;Javascript:;&＃39; onclick&＃61;&＃39;showImages("{{d.PHOTO_UUID}}")&＃39; lay-event&＃61;"img">查看图片集
script>

在列表显示中为超链接&＃xff0c;点击事件调用了showImages方法。如下&＃xff1a;

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

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

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

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

// 组织生活查看图片集public void showMediaFiles(){String orgCode &＃61; getSessionAttr("orgCode");String uuid &＃61; getPara("uuid");// 以下是自己封装的一个远程调用方法&＃xff0c;具体底层还是Jfinal HttpKit.post(url,data)的调用Map map &＃61; new HashMap();map.put("USER_ID", orgCode);map.put("UUID", uuid);String res_showMediaFiles &＃61; sendPostRequest("MgrActivityApi", orgCode, "showMediaFiles", "857", map);JSONObject jo_showMediaFiles &＃61; JSONObject.fromObject(res_showMediaFiles);JSONArray arr_photoes &＃61; new JSONArray();JSONObject obj_photo &＃61; new JSONObject();if(jo_showMediaFiles.getInt("code")&＃61;&＃61;0){JSONArray photoes &＃61; jo_showMediaFiles.getJSONArray("data");for(int i &＃61;0 ;iJSONObject photo &＃61; photoes.getJSONObject(i);obj_photo.put("alt", "图片名");obj_photo.put("pid", 666);obj_photo.put("src", PropKit.use("config.properties").get("url")&＃43;getSessionAttr("REGION_CODE")&＃43;"/"&＃43;photo.getString("FILE_PATH"));obj_photo.put("thumb", "");arr_photoes.add(obj_photo);// 追加到JSONArray中}}Map dataMap &＃61; new HashMap();// 组装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));}

最终显示效果如下&＃xff1a;

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

专业墙纸贴纸厨房用具装饰出售&＃xff0c;本人网店经营

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