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

Question

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

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

编辑：我忘了提一下，我正试图纯用javascript/html/css来做这件事。

我已经让后退按钮在javascript中工作，但只后退了一步。我只是这样做了，每次点击按钮都会用当前幻灯片的ID更新一个变量。然后后退按钮就会"指向"那个变量。问题是，它不会倒退不止一步，因为一旦你倒退一步，变量就永远不会更新到你刚刚返回的ID。希望这是有道理的。

Answer 1

您可以使用历史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时，event.state就是{page: "5"}。

function jump() {
var target = this.getAttribute("data-value");
document.querySelector(".on").classList.remove("on");
document.getElementById("s"+target).classList.add("on");
var stateObject = {page: target};
history.pushState(stateObject, "Slide #" + target, "#" + target);
}
document.querySelectorAll(".jump").forEach(function(element) {
element.addEventListener("click", jump);
});
document.querySelector(".back").addEventListener("click", function() {
history.back();
});
window.addEventListener("popstate", function(event) {
if (event.state === null) {
// the first page has no stateObject
document.querySelector(".on").classList.remove("on");
document.getElementById("s1").classList.add("on");
} else if (typeof event.state.page !== "undefined") {
document.querySelector(".on").classList.remove("on");
document.getElementById("s" + event.state.page).classList.add("on");
}
});

.page {display: none;}
.page.on {display: block;}

<button class="back">Back</button>
<div class="page on" id="s1">
Slide #1
<div class="action">
<button class="jump" data-value="3">Go to #3</button>
</div>
</div>
<div class="page" id="s2">
Slide #2
<div class="action">
<button class="jump" data-value="1">Go to #1</button>
</div>
</div>
<div class="page" id="s3">
Slide #3
<div class="action">
<button class="jump" data-value="2">Go to #2</button>
</div>
</div>

参见：

https://developer.mozilla.org/en-US/docs/Web/API/History_APIhttps://developer.mozilla.org/en-US/docs/Web/Events/popstate