jQuery实现仿腾讯视频列表分页效果的方法

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法。分享给大家供大家参考。具体如下：

这里使用jQuery仿腾讯视频列表分页效果，无刷新分页特效，点击分页按钮，无刷新进入下一页内容列表。

运行效果截图如下：

具体代码如下：

<!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>
<title>仿腾讯视频列表分页效果</title>
<meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\">
<style type=\"text/css\">
.main{width:800px;zoom:1;margin:0 auto;}
.item{width:800px;overflow:hidden;}
ul{padding:0;width:860px;zoom:1;}
.clear{zoom:1;}
.clear:after{content:\"\";display:block;height:0;clear:both;visibility:hidden;}
ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
.page_btn{padding-top:20px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}
</style>
<script src=\"jquery-1.7.1.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(document).ready(function(){
 $(\"ul li:gt(3)\").hide();//初始化，前面4条数据显示，其他的数据隐藏
 var total_q=$(\"ul li\").index()+1;//总数据
 var current_page=4;//每页显示的数据
 var current_num=1;//当前页数
 var total_page= Math.round(total_q/current_page); //总页数 
 var next=$(\".next\");//下一页
 var prev=$(\".prev\");//上一页
 $(\".total\").text(total_page);//显示总页数
 $(\".current_page\").text(current_num);//当前的页数
 //下一页
 $(\".next\").click(function(){
  if(current_num==7){
   return false;//如果大于总页数就禁用下一页
  }else{
   $(\".current_page\").text(++current_num);//点击下一页的时候当前页数的值就加1
   $.each($(\'ul li\'),function(index,item){
    var start = current_page* (current_num-1);//起始范围
    var end = current_page * current_num;//结束范围
    if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
     $(this).show();
    }else{
     $(this).hide();
    }
   });
  }
 });
 //上一页方法
 $(\".prev\").click(function(){
  if(current_num==1){
   return false;
  }else{
   $(\".current_page\").text(--current_num);
   $.each($(\'ul li\'),function(index,item){
    var start = current_page* (current_num-1);//起始范围
    var end = current_page * current_num;//结束范围
    if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐藏
     $(this).show();
    }else {
     $(this).hide(); 
    }
   });
  }
 })
})
</script>
</head>
<body>
<div class=\"main\">
 <div class=\"item\">
  <ul class=\"clear\">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li>18</li>
   <li>19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
   <li>25</li>
   <li>26</li>
   <li>27</li>
   <li>28</li>
  </ul>
 </div>
 <div class=\"page_btn clear\">
  <span class=\"page_box\">
   <a class=\"prev\">上一页</a><span class=\"num\"><span class=\"current_page\">1</span><span style=\"padding:0 3px;\">/</span><span class=\"total\"></span></span><a class=\"next\">下一页</a>
  </span>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24427

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案