在網(wǎng)頁設(shè)計中，翻頁效果是很常見的一個功能。下面是一個基本的HTML界面翻頁效果代碼，你可以根據(jù)自己的需要進(jìn)行修改和優(yōu)化。
<html>
<head>
<title>HTML頁面翻頁效果代碼</title>
<script type="text/javascript">
var currentPage = 1; // 當(dāng)前頁碼
var pageSize = 10; // 每頁顯示的記錄數(shù)
var totalPage = 20; // 總頁數(shù)
var totalRecord = 200; // 總記錄數(shù)
function gotoPage(num) {
currentPage = num;
// 顯示當(dāng)前頁的內(nèi)容
// 更新翻頁導(dǎo)航欄
updateNav();
}
function updateNav() {
var nav = document.getElementById('nav');
// 根據(jù)當(dāng)前頁和總頁數(shù)生成導(dǎo)航鏈接
var links = '';
for(var i = 1; i <= totalPage; i++) {
if(i == currentPage) {
links += '' + i + '';
} else {
links += '' + i + '';
}
}
nav.innerHtml = links;
}
window.onload = function() {
// 顯示第一頁的內(nèi)容
// 更新翻頁導(dǎo)航欄
updateNav();
}
</script>
</head>
<body>
<div id="content">
// 顯示內(nèi)容的區(qū)域
</div>
<div id="nav">
// 翻頁導(dǎo)航欄的區(qū)域
</div>
</body>
</html>在這個代碼中，我們定義了四個變量，分別是當(dāng)前頁碼、每頁顯示的記錄數(shù)、總頁數(shù)和總記錄數(shù)。我們通過編寫兩個函數(shù)來實現(xiàn)翻頁的功能，一個是gotoPage函數(shù)，用于跳轉(zhuǎn)到指定的頁碼；另一個是updateNav函數(shù)，用于更新翻頁導(dǎo)航欄。我們通過 JavaScript 代碼來控制頁面的顯示和邏輯。
在 HTML 代碼中，我們使用了兩個<div>標(biāo)簽，一個用于顯示內(nèi)容，另一個用于顯示翻頁導(dǎo)航欄。在翻頁導(dǎo)航欄的區(qū)域，我們通過 JavaScript 代碼來生成翻頁鏈接。