Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Procházení polem obrázků</title> <h1>Procházení mezi obrázky</h1> <p> <button onclick="posunout(-1)">Zpět</button> <button onclick="posunout(1)">Dopředu</button> <button onclick="posunout(2)">Dopředu o 2</button> <button onclick="posunout(-5)">Zpět o 5</button> Aktuální obrázek: <span id="aktualni">1/3</span> </p> <div id="galerie"> <img src="http://lorempixel.com/600/300/0" alt=""> <img src="http://lorempixel.com/600/300/0/0/" alt=""> <img src="http://lorempixel.com/600/300/0/0/0" alt=""> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#galerie img { display: none; } #galerie img:first-child { display: block; }
CSS
Autoformát
CSS reset
Až na konci
var obrazky = document.querySelectorAll("#galerie img"); var pocetObrazku = obrazky.length; var aktualniObrazek = 0; function posunout(posun) { // skrýt viditelný obrazky[aktualniObrazek].style.display = "none"; // nastavit aktuální aktualniObrazek = (pocetObrazku + aktualniObrazek + (posun % pocetObrazku)) % pocetObrazku; // zobrazit nový obrazky[aktualniObrazek].style.display = "block"; // výpis aktuálního obrázku aktualni.innerHTML = (aktualniObrazek + 1) + "/" + pocetObrazku; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>