Livro em construção
<!DOCTYPE html>
<html>
<pre>
<head>
<title>Meu eBook</title>
<style>
/* Estilos para a exibição das páginas */
.page {
display: none;
/* Estilos adicionais para a aparência das páginas */
}
</style>
</head>
<body>
<button id="previousButton">Anterior</button>
<button id="nextButton">Próxima</button>
<div class="page" id="page1">
<h1>Página 1</h1>
<!-- Conteúdo da página 1 -->
</div>
<div class="page" id="page2">
<h1>Página 2</h1>
<!-- Conteúdo da página 2 -->
</div>
<!-- Adicione mais divs de página conforme necessário -->
<script src="script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let currentPage = 1;
const numPages = document.querySelectorAll(".page").length;
function showPage(page) {
document.querySelectorAll(".page").forEach(function(page) {
page.style.display = "none";
});
document.getElementById(`page${page}`).style.display = "block";
}
function goToPreviousPage() {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
}
function goToNextPage() {
if (currentPage < numPages) {
currentPage++;
showPage(currentPage);
}
}
document.getElementById("previousButton").addEventListener("click", goToPreviousPage);
document.getElementById("nextButton").addEventListener("click", goToNextPage);
showPage(currentPage);
});
</script>
</body>
</pre>
</html>