2023年7月9日发(作者：)

使⽤jQuery进⾏图⽚分页，每页形成九宫格1.引⼊css⽂件（可根据⾃⼰页⾯的布局进⾏调整）/* 图⽚框样式设置 */

.list-main{width:100%;height:800px;position:relative;}.allImgList{ overflow: hidden; width: 30%; height: 230px; margin-right: 3%; margin-top:10px; margin-bottom: 1%; text-align: center; float: left; }.list-img li{ overflow: hidden; width: 98%; height: 200px; line-height:200px;

margin-bottom:10px; border: 1px solid #e8e8e8; float: left; }.list-img li img{ width:auto; height:auto; max-width:100%; max-height:100%;

vertical-align: middle; text-align: center;

}.imgTitle{ width: 100%; }

/* 图⽚分页样式设置 */

*{ margin:0; padding:0; list-style:none;}a{ text-decoration:none;}a:hover{ text-decoration:none;}.tcdPageCode{padding: 15px 20px;color: #ccc;text-align:center;position: absolute;margin-top: 82%;margin-left: 35%;}.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}.tcdPageCode t{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}.tcdPageCode ed{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}2.引⼊js⽂件（不要忘记引⼊, 我这⾥引⼊的是，可根据项⽬需要引⼊相应的版本，不能太低）(function($){ var ms = { init:function(obj,args){ return (function(){ ml(obj,args); ent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ (); //上⼀页 if(t > 1){ ('上⼀页'); }else{ ('.prevPage'); ('上⼀页'); } //中间页码 if(t != 1 && t >= 4 && unt != 4){ (''+1+''); } if(t-2 > 2 && t <= unt && unt > 5){ ('...'); } var start = t -2,end = t+2; if((start > 1 && t < 4)||t == 1){ end++; } if(t > unt-4 && t >= unt){ start--; } for (;start <= end; start++) { if(start <= unt && start >= 1){ if(start != t){ (''+ start +''); }else{ (''+ start +''); } } } if(t + 2 < unt - 1 && t >= 1 && unt > 5){ ('...'); } if(t != unt && t < unt -2 && unt != 4){ (''+unt+''); } //下⼀页 if(t < unt){ ('下⼀页'); }else{ ('.nextPage'); ('下⼀页'); } })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ ("click","ber",function(){ var current = parseInt($(this).text()); ml(obj,{"current":current,"pageCount":unt}); if(typeof()=="function"){ (current); } }); //上⼀页 ("click","ge",function(){ var current = parseInt(en("t").text()); ml(obj,{"current":current-1,"pageCount":unt}); if(typeof()=="function"){ (current-1); } }); //下⼀页 ("click","ge",function(){ var current = parseInt(en("t").text()); ml(obj,{"current":current+1,"pageCount":unt}); if(typeof()=="function"){ (current+1); } }); })(); } } $.Page = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); (this,args); }})(jQuery);页⾯

代码调⽤（此处我的需求是：点击按钮显⽰图⽚分页，每页9张图⽚。若要进⼊页⾯就显⽰分页，在初始化时加载即可） function getCertificateInfo(){

$(".tcdPageCode").remove(); $("#certificateContent").append('

'); var pageNo=1; //加载第⼀页 var pageCount=initCertificate(pageNo);

$(".tcdPageCode").createPage({

pageCount: pageCount, current: pageNo, backFn: function (p) { pageNo=p; initCertificate(pageNo);

} });

}

//加载图⽚ function initCertificate(pageNo){

$("#imgArea").html(""); //清空上⼀次加载得图⽚

var pageCount; //总页数

$.ajax({

cache: true, async: false, type: "POST",

dataType: "json", url: "selPublishCertificateFile",//请求的action路径

data:{ pageSize:9, pageNumber:pageNo }, error: function () { alert("请求失败", "error");

},

success:function(data){

if(>0){ $(".tcdPageCode").show(); pageCount=unt; //总页数

var $ul=$("#imgArea");

$.each(, function(index, element) { //此处li标签中的a标签是为了点击图⽚，显⽰⼤图所⽤，不需要放⼤图⽚的，去掉a标签，直接加⼊img标签即可 var str = $('