Rykrdo
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 4 Mar 2018
- Mensajes
- 806
Lector Manga
Buenas noches, hoy me desperté con ganas de crear algo y compartirlo, y se me ocurrió de crear un código para aquellos que le gustaría compartir manga en su página web.
Como siempre, me gusta compartir los más esencial, ya dependerá de ustedes como lo usarán y como lo editarán con css, el código ya de por si es muy simple, pero tiene lo que yo considero más importante.
Funciones
- Botones de Siguiente / Anterior
- Botón de Modo Cascada
- Muestra cuantas páginas tiene el manga
- Puede usar las flechas de tu teclado para cambiar de página(Nuevo)
Demostración online
Código completo en HTML
Eso es todo por hoy, espero que les sea de ayuda, si creen que sea necesario de agregar, eliminar o modificar algo, por favor háganmelo saber.
Si necesitan algún código, me pueden escribir y veré la forma de como hacerlo, y si puedo lo comparto.
No se olviden darle like, compartir y seguirme
Buenas noches, hoy me desperté con ganas de crear algo y compartirlo, y se me ocurrió de crear un código para aquellos que le gustaría compartir manga en su página web.
Como siempre, me gusta compartir los más esencial, ya dependerá de ustedes como lo usarán y como lo editarán con css, el código ya de por si es muy simple, pero tiene lo que yo considero más importante.
Funciones
- Botones de Siguiente / Anterior
- Botón de Modo Cascada
- Muestra cuantas páginas tiene el manga
- Puede usar las flechas de tu teclado para cambiar de página(Nuevo)
Demostración online
Código completo en HTML
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manga Reader</title>
</head>
<body>
<button id="prev-btn">Anterior</button>
<button id="next-btn">Siguiente</button>
<button id="mode">Modo Cascada</button>
<span id="counter"></span>
<div id="reader"></div>
<script>
// Array de imágenes
let pages = [
"https://via.placeholder.com/300x200/3f5efb/fff?text=Imagen+1",
"https://via.placeholder.com/300x200/f7b731/fff?text=Imagen+2",
"https://via.placeholder.com/300x200/20bf6b/fff?text=Imagen+3",
"https://via.placeholder.com/300x200/eb3b5a/fff?text=Imagen+4",
"https://via.placeholder.com/300x200/8854d0/fff?text=Imagen+5",
];
</script>
<script>
// Obtener elementos del DOM
const imgContainer = document.getElementById("reader");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const counter = document.getElementById("counter");
const showAllBtn = document.getElementById("mode");
const Fullscreen = document.getElementById("fullscreen");
// Variables de estado
let currentIndex = 0;
let isShowAll = false;
// Función para mostrar la imagen actual
function showImage() {
imgContainer.innerHTML = "";
const img = document.createElement("img");
img.src = pages[currentIndex];
imgContainer.appendChild(img);
counter.textContent = `Página ${currentIndex + 1} de ${pages.length}`;
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === pages.length - 1;
}
// Función para mostrar todas las imágenes
function showAll() {
isShowAll = !isShowAll;
if (isShowAll) {
imgContainer.innerHTML = "";
pages.forEach((image) => {
const img = document.createElement("img");
img.src = image;
imgContainer.appendChild(img);
});
prevBtn.style.display = "none";
nextBtn.style.display = "none";
counter.style.display = "none";
showAllBtn.innerText = "Modo Página";
} else {
showImage();
prevBtn.style.display = "inline";
nextBtn.style.display = "inline";
counter.style.display = "inline";
showAllBtn.innerText = "Modo Cascada";
}
}
// Función para mostrar la imagen anterior
function showPreviousImage() {
if (currentIndex > 0) {
currentIndex--;
showImage();
}
}
// Función para mostrar la siguiente imagen
function showNextImage() {
if (currentIndex < pages.length - 1) {
currentIndex++;
showImage();
}
}
// Función para manejar los eventos de teclado
function handleKeyboardEvent(event) {
const key = event.key;
if (key === "ArrowLeft") {
showPreviousImage();
} else if (key === "ArrowRight") {
showNextImage();
}
}
// Agregar eventos de clic para los botones
nextBtn.addEventListener("click", showNextImage);
prevBtn.addEventListener("click", showPreviousImage);
showAllBtn.addEventListener("click", showAll);
// Agregar evento de escucha para los eventos de teclado
document.addEventListener("keydown", handleKeyboardEvent);
// Mostrar la primera imagen
showImage();
</script>
</body>
</html>Eso es todo por hoy, espero que les sea de ayuda, si creen que sea necesario de agregar, eliminar o modificar algo, por favor háganmelo saber.
Si necesitan algún código, me pueden escribir y veré la forma de como hacerlo, y si puedo lo comparto.
No se olviden darle like, compartir y seguirme
Última edición:
