是否可以为HTML幻灯片创建javascript后退按钮？

我有一个相当大的幻灯片类型的网站。所有幻灯片都在一个html页面上，因此我无法使用浏览器返回功能。每张幻灯片都有一个后退按钮。我不能特别指定后退按钮应该放在哪里，因为幻灯片放映是非线性的。所以我可以从其他幻灯片中找到任何特定的幻灯片。有没有一种方法可以制作一个历史数组或者任何我可以用来制作这个后退按钮的东西

应该说，我是个初学者。我还在学习javascript

编辑：我忘了提到我正试图用javascript/html/css来完成这项工作

---

我已经在javascript中使用了后退按钮，但只向后退了一步。我只是这样做的，每个按钮点击更新一个变量与当前幻灯片的ID。然后返回按钮只是“指向”该变量。问题是，它不会返回多个步骤，因为一旦返回，变量就永远不会更新为刚刚返回的ID。希望这是有道理的

您可以使用历史API：

当从幻灯片1跳到幻灯片5时，调用

history.pushState

：

var stateObject = {page: "5"};
history.pushState(stateObject, "Slide #5", "#5");

返回时，只需调用

history.back（）

，并添加

popstate

侦听器即可显示所需幻灯片：

window.addEventListener("popstate", function(event) {
    $(".page").hide();
    $("#p" + event.state.page).show();
}

event.state

这里是调用

history.pushState

时推送的

stateObject

。例如，当用户导航回幻灯片#5时，

事件.state

为

{page:“5”}

函数跳转（）{
var target=this.getAttribute（“数据值”）；
document.querySelector（“.on”）.classList.remove（“.on”）；
document.getElementById（“s”+目标）.classList.add（“on”）；
var stateObject={page:target}；
history.pushState（stateObject，“Slide#“+target”，“#”+target）；
}
document.queryselectoral（“.jump”）.forEach（函数（元素）{
元素。addEventListener（“单击”，跳转）；
});
document.querySelector（“.back”）.addEventListener（“单击”，函数（）{
历史。返回（）；
});
addEventListener（“popstate”），函数（事件）{
如果（event.state==null）{
//第一页没有stateObject
document.querySelector（“.on”）.classList.remove（“.on”）；
document.getElementById（“s1”）.classList.add（“on”）；
}else if（typeof event.state.page！=“未定义”）{
document.querySelector（“.on”）.classList.remove（“.on”）；
document.getElementById（“s”+event.state.page）.classList.add（“on”）；
}
});
.page{display:none；}
.page.on{display:block；}
返回
幻灯片#1
转到第3页
幻灯片#2
转到#1
幻灯片#3
转到第2页
历史API-