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
<h1>Procházení mezi obrázky</h1> <p> <button onclick="posunout(-1)">Zpět</button> <button onclick="posunout(1)">Dopředu</button> </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 = 1; function posunout(posun) { // skrýt viditelný obrazky[aktualniObrazek - 1].style.display = "none"; aktualniObrazek = aktualniObrazek + posun; if (aktualniObrazek > pocetObrazku) { aktualniObrazek = 1; } else if (aktualniObrazek < 1) { aktualniObrazek = pocetObrazku; } // zobrazit nový obrazky[aktualniObrazek - 1].style.display = "block"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>