实现 switchPage
函数
在这一步中,你将学习如何实现 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
函数已实现,页面切换功能应按预期工作。