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
<article> <section> <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> <script> (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 ); </script> <div id="banner1"> <H3>Lorem ipsum dolor sit amet</H3> <p>Lorem ipsum dolor sit amet consectetuer pretium volutpat enim vitae.</p> <p>Lorem ipsum dolor sit amet consectetuer urna eros laoreet In.</p> </div> <div id="banner2"> <H3>Programování webu</H3> <p>Hledáte způsob jak vytvořit web, ale nechce se vám platit hodně za profesionální kodéry? Por začátek ti uděláme web za méně.</p> <div id="tlacitko"><a style="text-decoration: none; color: white;" href="sluzby.html">Vytvořte mi něco!</a></div> </div> <div id="banner3"> <H3>Lorem ipsum dolor sit amet</H3> <p>Lorem ipsum dolor sit amet consectetuer pretium volutpat enim vitae.</p> <p>Lorem ipsum dolor sit amet consectetuer urna eros laoreet In.</p> </div> <div class="cistic"></div> </section> </article>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background-color: black; } article { background-color: white; } .slideshow { width: 600px; position: relative; max-width: 100%; margin: auto; } .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; } #banner1 { background: url(http://lorempixel.com/600/300/0) no-repeat center center; width: 250px; height: 300px; padding: 10px; color: white; box-shadow: black 5px 5px 10px; float: left; } #banner2 { background: url(http://lorempixel.com/600/300/0/0) no-repeat center center; width: 250px; height: 300px; padding: 10px; color: white; box-shadow: black 5px 5px 10px; float: right; } #banner3 { background: url(http://lorempixel.com/600/300/0/0/0) no-repeat center center; width: 250px; height: 300px; padding: 10px; color: white; box-shadow: black 5px 5px 10px; margin: auto; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>