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
<div class="prolinacka"> <img src="/i/400x200/f00"> <img src="/i/400x200/ff0"> <img src="/i/400x200/0f0"> <img src="/i/400x200/0ff"> <img src="/i/400x200/00f"> <img src="/i/400x200/f0f"> </div> <div class="prolinacka"> <img src="/i/200x100/00f"> <img src="/i/200x100/f0f"> <img src="/i/200x100/f00"> <img src="/i/200x100/ff0"> <img src="/i/200x100/0f0"> <img src="/i/200x100/0ff"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.prolinacka { position: relative; } .prolinacka * { position: absolute; top: 0; left: 0; z-index: -1; } .prolinacka .bottom { z-index: 0; } .prolinacka .top { z-index: 1; }
CSS
Autoformát
CSS reset
Až na konci
function prolinacka(container) { var changeMilis = 2000; // doba mezi obrázky var transitionMilis = 500; // délka animace var stepMilis = 50; // častost kroků animace var transition = true; // false = zakázání prolínání var diff = +1; // +1 = posun dopředu, -1 = posun dozadu var current = 0; var images = container.children; if (images.length == 0) { return; } container.style.width = images[0].offsetWidth + 'px'; container.style.height = images[0].offsetHeight + 'px'; images[current].className = 'top'; function changeFunc() { var bottom = images[current]; current = (current + diff + images.length) % images.length; var top = images[current]; bottom.className = ''; top.className = 'top'; // nastav na false, pak snadněji pochopíš, změnu obrázků if (transition) { // bude mít třídu jen po dobu prolínání bottom.className = 'bottom'; top.style.opacity = 0; var start = +new Date(); function transitionFunc() { var progress = (+new Date() - start) / transitionMilis; if (progress > 1) { bottom.className = ''; top.style.opacity = ''; window.clearInterval(transtionInterval); } else { top.style.opacity = progress; } } var transtionInterval = window.setInterval(transitionFunc, stepMilis); } } window.setInterval(changeFunc, changeMilis); } window.onload = function() { // spuštění prolínačky var prolinacky = document.querySelectorAll('.prolinacka'); for (var i = 0; i < prolinacky.length; i++) { prolinacka(prolinacky[i]); } };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>