我是小库，今天要讲的内容是怎么通过js实现一个新闻列表,并支持翻页切换对应内容？我已经把模版代码也写好了，直接分享出来吧。
- HTML: 创建基本页面结构，包括新闻列表和翻页按钮。
- CSS: 设计简单的样式。
- JavaScript: 实现翻页逻辑。
HTML结构示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻列表</title>
<style>
/* 在这里添加CSS */
</style>
</head>
<body>
<div id="news-container">
<ul id="news-list">
<!-- 新闻列表项将通过JavaScript动态生成 -->
</ul>
</div>
<div id="pagination">
<button>上一页</button>
<span id="page-info">第 1 页</span>
<button>下一页</button>
</div>
<script>
// 在这里添加JavaScript
</script>
</body>
</html>
在html的head <style>标签中加入下面的css代码
#news-container {
margin: 0;
padding: 0;
list-style: none;
}
#news-list li {
padding: 5px;
border-bottom: 1px solid #ddd;
}
#pagination {
margin-top: 20px;
text-align: center;
}
<script>标签中添加以下JavaScript代码
// 假设这是我们的新闻数据
var newsData = [
// 这里可以填入多条新闻数据
];
var currentPage = 1; // 当前页数
var pageSize = 5; // 每页显示的新闻条数
// 动态生成新闻列表的函数
function generateNewsList() {
var newsList = document.getElementById('news-list');
newsList.innerHTML = ''; // 清空当前列表
var start = (currentPage - 1) * pageSize;
var end = start + pageSize;
for (var i = start; i < end && i < newsData.length; i++) {
var li = document.createElement('li');
li.innerText = newsData[i];
newsList.appendChild(li);
}
// 更新页码信息
document.getElementById('page-info').innerText = '第 ' + currentPage + ' 页';
}
// 上一页按钮的函数
function prevPage() {
if (currentPage > 1) {
currentPage--;
generateNewsList();
}
}
// 下一页按钮的函数
function nextPage() {
if (currentPage * pageSize < newsData.length) {
currentPage++;
generateNewsList();
}
}
// 初始化列表
generateNewsList();
然后我们本地允许一下，看下效果咋样
看到没，上一页，下一页的效果就出来了
| 
