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="slider" style="background: url(http://fakeimg.pl/400x200/?text=Image-number-1.png);"></div> <span id="slider_prev">Předchozí</span> <span id="slider_dots"></span> <span id="slider_next">Další</span>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#slider { width: 400px; height: 200px; } #slider_prev, #slider_next, #slider_images { display: none; cursor: pointer; } .slider-dot{ display: inline-block; width: 16px; height: 16px; margin: 0 1px; background: url(http://fakeimg.pl/16x16/000000/); cursor: pointer; } .slider-dot.active { background: url(http://fakeimg.pl/16x16/ff0000/); }
CSS
Autoformát
CSS reset
Až na konci
// vytvoří pole adres obrázků function unrollImages(url, count, suffix) { var images = []; for (var i = 1; i <= count; i++) { images.push(url + i + suffix); } return images; } // element - hlavní div, kterému se mění pozadí // images - pole obrázků, které promítat na pozadí elementu // userOptions - další nastavení ve formě objektu function slider(element, images, userOptions) { // kompletní nastavení slideru // některé vlastnosti bude chtít uživatel změnit pomocí userOptions var options = { prevButton: null, nextButton: null, dotsContainer: null, dotHTML: '<span class="slider-dot"></span>', timeToFadeOut: 500, timeToFadeIn: 500, timeToChange: 5000, }; // zkopírujeme uživatelské nastavení if (typeof userOptions == "object") { for (var o in userOptions) { options[o] = userOptions[o]; } } // seznam funkcí, které se zavolají při změně var listeners = []; // pokud uživatel chce být informován o změnách obrázků if (options.listener) { listeners.push(options.listener); } // funkce k notifikaci posluchačů function notifyListeners(event, data) { for (var i = 0; i < listeners.length; i++) { listeners[i](event, data); } } // toto je timer, který změní obrázek za timeToChange milisekund var timer = null; // číslo aktuálního obrázku var current = 0; // funkce teď umí změnit obrázek podle jeho čísla function changeImage(imageNumber) { // restart timeout clearTimeout(timer); timer = setTimeout(nextImage, options.timeToChange); // pokud je obrázek již zobrazován if (current == imageNumber) { return; } // nastaví se jako aktuální v okamžiku, // kdy začíná animace pro přechod na něj notifyListeners('out', current); current = imageNumber; element.fadeOut(options.timeToFadeOut, function() { element.css('background', 'url(' + images[current] + ')'); notifyListeners('in', current); element.fadeIn(options.timeToFadeIn, function() { notifyListeners('showing', current); }); }); } // funkce pro přechod na předchozí a další function prevImage() { changeImage((images.length + current - 1) % images.length); } function nextImage() { changeImage((current + 1) % images.length); } // podpora pro tlačítka prev a next if (options.prevButton) { options.prevButton.click(prevImage); options.prevButton.show(); } if (options.nextButton) { options.nextButton.click(nextImage); options.nextButton.show(); } // podpora pro tečky if (options.dotsContainer) { // pole teček var dots = []; for (var i = 0; i < images.length; i++) { // toto je trik, který zajistí, že proměnná i bude mít správnou hodnotu // viz http://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=106539#lexikalni-uzaver (function(i) { // vytvoří tečku a přidá ji do kontejneru i pole var dot = $(options.dotHTML); options.dotsContainer.append(dot); dots.push(dot); // při kliknutí změní obrázek na číslo tečky dot.click(function() { changeImage(i); }); })(i); } options.dotsContainer.show(); // aktivní tečka, abych jí později mohli odebrat třídu active var activeDot = null; listeners.push(function(event, data) { // nevadí nám poslouchat všechny události // zrušíme aktuální aktivní tečku if (activeDot) { activeDot.removeClass('active'); } // nastavíme novou aktivní podle události activeDot = dots[data]; activeDot.addClass('active'); }); } // nastartujeme timer timer = setTimeout(nextImage, options.timeToChange); // vyšleme událost, že se zobrazuje current notifyListeners('showing', current); } $(document).ready(function() { // počet obrázků var numberOfImages = 6; // pole adres obrázků var images = unrollImages('http://fakeimg.pl/400x200/?text=Image-number-', numberOfImages, '.png'); // samotný slider slider( $('#slider'), // element images, // obrázky { // objekt dalších vlastností prevButton: $('#slider_prev'), nextButton: $('#slider_next'), dotsContainer: $('#slider_dots'), listener: function(event, data) {alert(event + ' ' + data)} } ); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>