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>Slideshow obrázků</title> <h1>Slideshow obrázků</h1> <div class="slideshow"> <img src="http://lorempixel.com/600/300/0" class="show"><!-- první obrázek --> <img src="http://lorempixel.com/600/300/0/0"> <img src="http://lorempixel.com/600/300/0/0/0"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.slideshow { width: 600px; position: relative; max-width: 100%; } .slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); transition: opacity .4s; } .slideshow .show { opacity: 1; filter: alpha(opacity=100); } .slideshow .stoped { z-index: 1; } .slideshow :first-child { position: relative; display: block; }
CSS
Autoformát
CSS reset
Až na konci
(function(el, time) { var timer; var active = 0; var img = el.querySelectorAll("img"); var imgCount = img.length; function change() { img[active].className = ""; if (active == (imgCount - 1)) { active = 0; } else { active = active + 1; } img[active].className = "show"; } timer = setInterval(change, time); el.onmouseover = function() { clearInterval(timer); img[active].className = "show stoped"; }; el.onmouseout = function() { timer = setInterval(change, time); }; el.onclick = change; })( document.querySelector(".slideshow"), 3 * 1000 // Doba jednoho obrázku v milisekundách );
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>