介绍
在这个项目中，你将学习如何使用前端技术创建一个基于网页的 PowerPoint（PPT）演示文稿。这种类型的 PPT 更便于传播和查看，并且可以充分利用前端技术的布局和交互能力。
👀 预览
🎯 任务
在这个项目中，你将学习：
- 如何实现
switchPage函数以在 PPT 页面之间切换 - 如何处理用户输入，如键盘按键和按钮点击，以浏览 PPT 页面
- 如何实现
goLeft和goRight函数以处理 PPT 页面之间的导航 - 如何向 PPT 幻灯片添加内容以教授基本的 HTML 知识
🏆 成果
完成这个项目后，你将能够：
- 使用前端技术创建一个基于网页的 PowerPoint（PPT）演示文稿
- 操作 DOM 以显示和隐藏 PPT 页面
- 处理用户输入并相应地更新 UI
- 以 PPT 格式组织和展示与 HTML 相关的内容
设置项目结构
在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：
打开项目文件夹。目录结构如下：
├── css
│ └── style.css
├── images
│ ├── left-small.svg
│ └── right-small.svg
├── js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html
其中：
css/style.css是样式表。images文件夹包含页面中使用的图标。js/index.js是页面的 JavaScript 文件。js/jquery-3.6.0.min.js是 jQuery 文件。index.html是主页。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。
实现切换页面功能
在这一步中，你将学习如何实现 switchPage 函数以在 PPT 页面之间进行切换。
- 打开
js/index.js文件。 - 找到
switchPage函数并添加以下代码：
function switchPage() {
$("section").eq(activeIndex).show().siblings().hide();
$(".btn.left").toggleClass("disable", activeIndex === 0);
$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
$(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}
解释：
$("section").eq(activeIndex).show().siblings().hide();：这一行显示当前页面（章节）并隐藏所有其他页面。$(".btn.left").toggleClass("disable", activeIndex === 0);：当用户位于第一页时，这一行将“上一页”按钮添加disable类，而当用户位于任何其他页面时则移除该类。$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);：当用户位于最后一页时，这一行将“下一页”按钮添加disable类，而当用户位于任何其他页面时则移除该类。$(".page").text(${activeIndex + 1} / ${sectionsCount});：这一行更新页面左下角的页码显示。
- 保存
js/index.js文件。
现在，switchPage 函数已实现，页面切换功能应按预期工作。
处理用户输入
在这一步中，你将学习如何处理用户输入，例如键盘按键和按钮点击，以便在 PPT 页面间导航。
- 打开
js/index.js文件。 - 找到事件监听器代码并添加以下代码：
// 监听用户按下空格和箭头键
$(document).on("keydown", (e) => {
e.preventDefault();
// TODO
if (e.key === " " || e.key === "ArrowRight") {
goRight();
}
if (e.key === "ArrowLeft") {
goLeft();
}
});
// 监听按钮点击事件
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);
解释：
- 第一个事件监听器监听文档上的 keydown 事件。当用户按下空格键或右箭头键时，调用
goRight()函数。当用户按下左箭头键时，调用goLeft()函数。 - 第二组事件监听器监听“上一页”和“下一页”按钮的点击事件。当用户点击“上一页”按钮时，调用
goLeft()函数。当用户点击“下一页”按钮时，调用goRight()函数。
- 保存
js/index.js文件。
现在，用户输入处理已实现，用户可以使用键盘或按钮在 PPT 页面间导航。
实现向左和向右移动功能
在这一步中，你将学习如何实现 goLeft 和 goRight 函数来处理 PPT 页面之间的导航。
- 打开
js/index.js文件。 - 找到
goLeft和goRight函数并添加以下代码：
// 切换到下一页的函数
function goLeft() {
// TODO
if (activeIndex === 0) {
return;
}
activeIndex -= 1;
switchPage();
}
// 切换到上一页的函数
function goRight() {
// TODO
if (activeIndex === sectionsCount - 1) {
return;
}
activeIndex += 1;
switchPage();
}
解释：
goLeft函数检查用户是否在第一页。如果是，则不做任何操作直接返回。否则，它会将activeIndex变量减 1，并调用switchPage函数来更新显示。goRight函数检查用户是否在最后一页。如果是，则不做任何操作直接返回。否则，它会将activeIndex变量加 1，并调用switchPage函数来更新显示。
- 保存
js/index.js文件。
现在，goLeft 和 goRight 函数已经实现，用户可以使用键盘或按钮在 PPT 页面间导航。
页面的最终效果应如下所示：
总结
恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。
