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

js div实现下一页翻页效果

发布时间:2017-01-11   编辑:www.jquerycn.cn
jquery中文网为您提供js div实现下一页翻页效果等资源,欢迎您收藏本站,我们将为您提供最新的js div实现下一页翻页效果资源
分享一篇利用js 和div 实现的简单的翻页效果效果,这种效果很漂亮有需要的朋友可以参考一下。
<script>ec(2);</script>
提示:您可以先修改部分代码再运行

<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实现图片上显示左右箭头类似翻页效果的代码
书本翻页效果 Turn.js
使用jQuery.fn自定义jQuery翻页插件
书本翻页效果 Turn.js
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
javascript标签页翻动效果(实例分享)(图文)
Jquery:ajax实现翻页无刷新功能代码
书本翻页效果 Turn.js
JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页

[关闭]