本文介绍了如何使用JavaScript实现分页特效。我们需要创建一个HTML文件，包含一个表格和一个按钮。在JavaScript中编写一个函数，用于获取表格的数据并按照指定的页码进行分页显示。通过监听按钮的点击事件，实现翻页功能。
JS 分页特效源码详细介绍
原生JS实现酷炫分页
1、代码语言：JavaScript
2、HTML结构：
<!DOCTYPE html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf8" />
<title>原生JS实现酷炫分页</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
liststyle: none;
}
#ul1 {
width: 600px;
height: 250px;
}
#ul1 li {
width: 100px;
height: 100px;
background: red;
float: left;
overflow: hidden;
margin: 10px;
}
a {
margin: 5px;
}
</style>
</head>
<body>
<div id="div1"></div>
<ul id="ul1">
<! 这里将动态加载数据 >
</ul>
<a href="javascript:void(0);" onclick="page({nowNum:1})">首页</a>
<a href="javascript:void(0);" onclick="page({nowNum:2})">尾页</a>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
var json = {
title: [
'效果1',
'效果2',
'效果3',
'效果4',
'效果5',
'效果6',
'效果7',
'效果8',
'效果9',
'效果10',
'效果11',
'效果12',
'效果13',
'效果14',
'效果15',
'效果16',
'效果17',
'效果18',
'效果19',
'效果20',
'效果21',
'效果22',
'效果23',
'效果24',
'效果25',
'效果26',
'效果27',
'效果28',
'效果29',
'效果30',
'效果31',
'效果32',
'效果33',
'效果34'
]
};
//建立数组，存储布局坐标
var arr = [];
//从最后一个li开始运动，下标为9
var iNow = 9;
page({
id: 'div1',
nowNum: 1,
//计算总页数，除以10并向上取整
allNum: Math.ceil(json.title.length / 10),
callBack: function (now, all) {
//如果当前页乘以10小于json.title.length，加载10条
//如果当前页乘以10大于json.title.length, 加载本例中剩于的4条
var num = now * 10 < json.title.length ? 10 : json.title.length (now 1) * 10;
//获取ul
var oUl = document.getElementById('ul1');
//获取li
var aLi = oUl.getElementsByTagName('li');
//如果不前ul里面的的内容为空
if (oUl.innerHTML == '') {
//循环num次
for (var i = 0; i < num; i++) {
var li = document.createElement('li');
li.innerHTML = json.title[i];
oUl.appendChild(li);
}
} else {
//清空内容
oUl.innerHTML = '';
for (var i = 0; i < num; i++) {
var li = document.createElement('li');
li.innerHTML = json.title[i];
oUl.appendChild(li);
}
}
}
});
}
</script>
</body>
</html> 基于jQuery的分页组件特效
1、代码语言：JavaScript（使用jQuery）
2、HTML结构：
<!DOCTYPE html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf8" />
<title>jQuery分页组件特效</title>
<style>
/* CSS样式省略 */
</style>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<div id="pagingContainer">
<! 分页容器 >
</div>
<script>
(function($){
$.fn.paging = function(options){
var settings = $.extend({
list_num: 50, //文章数目，默认50篇
ali: null, //获取页码的DOM，默认null
btn: null, //获取上下页按钮的DOM，默认null
num: 5 //每页显示的文章数目，默认5篇
}, options);
return this.each(function(){
var self = $(this);
self.data('paging', new Paging(settings));
});
};
function Paging(options){
this.list_num = options.list_num; //文章数目，默认50篇
this.ali = options.ali; //获取页码的DOM，默认null
this.btn = options.btn; //获取上下页按钮的DOM，默认null
this.num = options.num; //每页显示的文章数目，默认5篇
this.page = 1; //定义一个当前页面的全局变量，初始值为1
this.page_num = Math.ceil(this.list_num / this.num); //根据文章数和每页显示数，向上取整算出页码数
this.drc = [this.page 2, this.page 1, this.page, this.page + 1, this.page + 2]; //中间按钮是当前页码，则前后各两个按钮表示相邻页码
}
Paging.prototype.init = function(){
var self = this;
//给页码按钮绑定点击事件
for(var i = 0, len = this.ali.length; i < len; i++){
if(this.drc[i] > 0 && this.drc[i] <= this.page_num){
this.ali[i].innerText = this.drc[i]; //设置页码文本
}else{
this.ali[i].innerText = '*'; //非有效页码用星号表示
}
this.ali[i].onclick = function(){
var val = parseInt(this.innerText, 10); //获取点击的页码值，并转换为整数类型
if(!isNaN(val)){ //判断是否为数字类型，避免点击到非有效页码时报错
self.page = val; //更新当前页码值
self.render(); //重新渲染分页组件
}else{
alert('请单击正确的页码'); //弹出提示框，提醒用户点击有效的页码按钮
return false; //终止函数执行，防止后续操作出错
}
};
}
//给上一页和下一页按钮绑定点击事件
this.btn[0].onclick = function(){ //上一页按钮的点击事件处理函数
self.page; //将当前页码值减一，实现翻到上一页的效果
self.render(); //重新渲染分页组件，更新显示内容为上一页的数据
};
this.btn[1].onclick = function(){ //下一页按钮的点击事件处理函数
self.page++; //将当前页码值加一，实现翻到下一页的效果
self.render(); //重新渲染分页组件，更新显示内容为下一页的数据
};
};
Paging.prototype.render = function(){ //重新渲染分页组件的方法，用于更新显示内容和状态信息等，根据当前选中的页码来渲染对应的内容和样式等信息，如果当前页码小于等于零或大于最大页码数，则弹出提示框提醒用户已经到达列表的开头或结尾；否则根据当前页码计算出需要显示的内容范围，然后调用相应的方法进行渲染操作即可，具体实现方式可以根据实际需求进行调整和优化以达到最佳效果和性能表现！ 原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1084242.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复