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 id="banner1"> <a href="http://www.odkaz.cz" target="_top"> <img src="http://fakeimg.pl/900x170/282828/eae0d0/?text=Prvni" width="900" height="170"> </a> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
function banner(frames, element, interval, animation) { var current = 0, next; var blending, start, now, progress; // najdeme si odkaz a obrázek var link = element.getElementsByTagName('a')[0]; var img = link.getElementsByTagName('img')[0]; // naklonujeme odkaz s obrazkem var link2 = link.cloneNode(true); // pridame jej do banneru element.insertBefore(link2, link); var img2 = link2.getElementsByTagName('img')[0]; // nastavime css, aby se prekryvaly link2.style.position = "absolute"; // a ten novy byl na pozadi link2.style.zIndex = -1; function blend() { now = +new Date(); // v kolikatine animace jsme progress = (now - start) / animation; // jednicka na zacatku, nula na konci link.style.opacity = 1 - progress; // pokud dobehla animace do konce if (progress > 1) { // zrusime animaci window.clearInterval(blending); blending = null; // posuneme na dalsi obrazek current = (current + 1) % frames.length; link.href = frames[current].link; img.src = frames[current].img; img.alt = frames[current].alt; // obnovime nepruhlednost link.style.opacity = 1; } } function cycle() { // nastavime obrazek na pozadi na nasledujici next = (current + 1) % frames.length; link2.href = frames[next].link; img2.src = frames[next].img; img2.alt = frames[next].alt; // zapamatujeme si zacatek animace start = +new Date(); // spustime animaci blending = window.setInterval(blend, 40); } // spustime meneni obrazku window.setInterval(cycle, interval); } var frames1 = [ { img: "http://fakeimg.pl/900x170/282828/eae0d0/?text=Prvni", link: "http://www.odkaz.cz", alt: "test1" }, { img: "http://fakeimg.pl/900x170/282828/eae0d0/?text=Druhy", link: "http://www.odkaz2.cz", alt: "test2" }, { img: "http://fakeimg.pl/900x170/282828/eae0d0/?text=Treti", link: "http://www.odkaz3.cz", alt: "test3" }, { img: "http://fakeimg.pl/900x170/282828/eae0d0/?text=Ctvrty", link: "http://www.odkaz4.cz", alt: "test4" }]; var banner1 = document.getElementById('banner1'); banner(frames1, banner1, 3000, 1000);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>