求大神看看 怎样才能翻页啊 每页2个 分3页啊

情诗未必惆怅 情诗未必惆怅 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery手机网站数据列表分页样式代码 - 素材目录99447com</title>
<style type="text/css">

//分页的显示与隐藏
$("#xifenye").click(function(a){
$("#uljia").empty();
$("#xab").toggle();
//显示出的一共多少页
var uljia=$("#uljia");
var page=parseInt($("#xiye").html());//获取当前的页数
var pages=parseInt($("#mo").html());//获取当前的总页数
for(var i=1;i<=pages;i++)
{
var H="<li onclick='fl("+i+","+pages+")'>"+i+"</li>";//添加一共多少页和点击事件

uljia.append(H);
}
scrolltop(page);
})
//点击分页显示的方法
function fl(p1,p2){
//var p=p1;
$("#xiye").empty();
$("#xiye").html(p1);//给显示的页数赋值

}
//分页的的上一页和下一页
function topclick(){
var v=document.getElementById("xiye");
var num=v.innerHTML;
if(num>1)
{
num--;
v.innerHTML=num;
var hei=25*num-25;
$("#xab").scrollTop(hei);
}


}
function downclick(){
var pages=parseInt($("#mo").html());//获取当前的总页数
var v=$("#xiye");
var num=parseInt(v.html());
if(num < pages){
num = ++num;
v.html(num);
scrolltop(num);
}
}
//分页的的首页和未页
$("#first").bind("click",function(){
var v=document.getElementById("xiye");
v.innerHTML=1;
scrolltop(v.innerHTML);
})
$("#last").bind("click",function(){
var v=document.getElementById("xiye");
var l=document.getElementById("mo");
v.innerHTML=l.innerHTML;
scrolltop(v.innerHTML);
})
//滚动条
function scrolltop(top){
var hei=25*top-25;
$("#xab").scrollTop(hei);
}
</style>
</head>
<body>
<div id="conten">
<div class="mingyi">
<img class="img" src="images/llk.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">廖乐宽 奥林院长/主任医师</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长痔、瘘、脱肛、肛肠肿瘤、内外痔、混合痔、复杂性肛瘘、多间隙肛周脓肿等肛肠疾病的治疗,具有高深造诣。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />


<div class="mingyi">
<img class="img" src="images/lch.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">李春洪 肛肠科主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">精通运用PPH、COOK、HCPT、DG-HAL等先进微创技术治疗痔疮、肛瘘、肛裂、肛周脓肿等病症。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />


<div class="mingyi">
<img class="img" src="images/wsb.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">吴仕碧 胃肠主任医师/女子诊疗中心主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">对胃肠消化内科、胃炎、慢性胃炎、胃溃疡、胃炎有独到的诊疗技术。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />


<div class="mingyi">
<img class="img" src="images/yf.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">杨繁 肛肠科主治医师</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长重度痔疮、高位复杂性肛瘘、顽固性肛裂、肛周湿疣、马蹄形脓肿、直肠脱垂等肛肠疾病,临床经验丰富。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />

<div class="mingyi">
<img class="img" src="images/yn.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">叶宁 肛肠科主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长诊治重度痔疮、浓性肛瘘、直肠黏膜脱垂、息肉、肛裂等,手法独特。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="wrap" >
<div class="fenye">
<ul>
<li id="first">首页</li>
<li id="top" onclick="topclick()">上一页</li>
<li class="xifenye" id="xifenye">
<a id="xiye">1</a>/<a id="mo">3</a>
<div class="xab" id="xab" style="display:none">
<ul id="uljia">

</ul>
</div>
</li>
<li id="down" onclick="downclick()">下一页</a></li>
<li id="last">末页</li>
</ul>

</div>
</div>
</div>


</body>
</html>

弄了好半天 求解决
...全文

相关推荐

前端开发组件示例源码_f1b6a91d详解

前端开发组件示例源码_f1b6a91d,内容包含源码/脚本与使用说明文档,结构清晰、注释完整,适合学习参考与二次开发,下载解压即可查看。

鱿鱼助手

前端开发基于history.js的HTML5与HTML4浏览器兼容方案:单页应用无刷新历史状态管理技术实现-Gjl4Gf1792158475

内容概要:本文系统介绍了如何利用history.js实现单页应用(SPA)在HTML5c与HTML4浏览器间s草错发的无缝历史状态管理。通过封装原生History API并在不支持的浏览器中自动降级为哈希路由,history.js解决了因浏览器兼容性导致的后退按钮失效、URL混乱等问题。文章详细讲解了其核心机制,包括状态对象管理、自动模式切换(HTML5 pushState vs HTML4 哈希)、状态数据持久化以及针,对Safari、IE等浏\览器的兼容性修复方案,并提供了从入门到实战的完整示例,涵盖初始化、事,件监听、页面加载及性能优化技巧。;Gjl4Gf1792158475 www.gblp.net www.gsctlq.com gezhixq.cn www.greendalian.com wap.gxqnm.com

2601_97196179

前端开发基于history.js的HTML5与HTML4浏览器兼容方案:单页应用无刷新历史状态管理技术实现-5Z6jeSqI1792158476

内容概要:本文系统介绍了如何利用history.js实现单页应用(SPA)在HTML5c与HTML4浏览器间s草错发的无缝历史状态管理。通过封装原生History API并在不支持的浏览器中自动降级为哈希路由,history.js解决了因浏览器兼容性导致的后退按钮失效、URL混乱等问题。文章详细讲解了其核心机制,包括状态对象管理、自动模式切换(HTML5 pushState vs HTML4 哈希)、状态数据持久化以及针,对Safari、IE等浏\览器的兼容性修复方案,并提供了从入门到实战的完整示例,涵盖初始化、事,件监听、页面加载及性能优化技巧。;5Z6jeSqI1792158476 sdhmgggw168.com www.shangliangwangye.com www.sdbing.net migu.blsxex.abxlbz.sc.cn www.safespeed.net.cn

2601_97196179

高校如何通过科技报告服务提升技术转移转化效率?.docx

科易网基于40亿+科创知识图谱数据库,深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景,研究科技创新领域的AI+数智化解决方案,推动科技创新与产业创新智能化发展。

BIZKEEN

科技服务机构如何提升服务大企业的技术诊断能力?.docx

科技服务机构如何提升服务大企业的技术诊断能力?

BIZKEEN
评论 2
收藏 已收藏
分享
返回顶部
情诗未必惆怅
JavaScript 87,984 成员 224,681 内容