Jquery中文网 > 脚本编程 > javascript > 正文 js div实现下一页翻页效果

js div实现下一页翻页效果

发布时间：2017-01-11 编辑：www.jquerycn.cn

jquery中文网为您提供js div实现下一页翻页效果等资源，欢迎您收藏本站，我们将为您提供最新的js div实现下一页翻页效果资源

分享一篇利用js 和div 实现的简单的翻页效果效果，这种效果很漂亮有需要的朋友可以参考一下。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript div分页效果</title> <style type="text/css"> ul{list-style:none;height:150px;border:1px solid #555;padding:10px;width:200px;} ul li{float:left;border:1px solid #eee;padding:5px;width:70px;display:none;margin-top:10px;margin-left:10px;} </style> </head> <body>

上一页1/<span>4</span>下一页

<ul> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li>22</li> <li>22</li> <li>22</li> <li>22</li> <li>22</li> <li>22</li> <li>33</li> <li>33</li> <li>33</li> <li>33</li> <li>33</li> <li>33</li> </ul> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ var num=$("ul li").length; var pageSize=Math.ceil(num/6); //总共有几页数据，这边6是你一页显示几个； var indexSize=1;//当前在第几页数据 var $b=$("p b"); var $span=$("p span"); $("ul li:lt(6)").show(); $b.text(indexSize); $span.text(pageSize); var $next=$("a.next"); var $prev=$("a.prev"); $next.click(function(){ if(indexSize<pageSize){ indexSize ; $b.text(indexSize); $("ul li").hide(); $("ul li:lt(" indexSize*6 ")").show(); $("ul li:lt(" (indexSize-1)*6 ")").hide(); } }); $prev.click(function(){ if(indexSize==1){ return false; } indexSize--; $b.text(indexSize); $("ul li").hide(); $("ul li:lt(" indexSize*6 ")").show(); $("ul li:lt(" (indexSize-1)*6 ")").hide(); }); })

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
页面内容翻页效果 Flippage
js实现图片上显示左右箭头类似翻页效果的代码
 javascript标签页翻动效果(实例分享)(图文)
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
 js div实现下一页翻页效果
 在canvas上实现元素图片镜像翻转动画效果的方法
 书本翻页效果 Turn.js
js实现网页标题闪烁效果
 uc浏览器电脑版翻译怎么设置
 JQuery学习笔记实现图片翻转效果和TAB标签切换效果第1/2页

上一篇：javascript精美的tab选项卡实现代码下一篇：兼容ie6淘宝浮动工具样

[关闭]

js div实现下一页翻页效果

最近更新

浏览排行