Vytvořte prezentaci pomocí šablon javascriptu. Fotolaboratoř. Ovládací prvky posuvníku

Přehled programů pro vytváření prezentací Vytvoření prezentace pro web

Při vytváření prezentace pro umístění na webové stránky je nejlepší použít hotová softwarová řešení. Podle mého názoru je nejlepší a nejjednodušší možností použít jQuery, speciální bezplatnou knihovnu skriptů (malé JavaScriptové programy). Předchozí články již hovořily o tomto úžasném nástroji pro vývoj webových aplikací. Viz například článek Fotogalerie jQuery- jednoduché a krásné! . Nyní pomocí jQuery vytvoříme prezentaci na webu, tzv. slider.

K tomu nám poslouží plugin Slides, který vytvořil programátor Nathan Searles, technický ředitel designového studia „The Brigade“ v Portlandu, Oregon, USA. Další jeho vývoj byl popsán v článku Fotogalerie pro internetový obchod.

Plugin Slides se snadno instaluje, má několik možností pro změnu obrázků v prezentaci a často se používá pro záhlaví webu. Příklad, jak tento posuvník funguje s výchozím nastavením, je znázorněn na obrázku:

Instalace prezentace Snímky

Jako vždy nejprve na webu vytvořte složku se skripty. Poté je potřeba archiv stáhnout a rozbalit do vytvořené složky. Bude obsahovat dva skripty jquery-1.8.3.min.js a jquery.cycle.all.min.js.

Dále do názvu stránky uvnitř značky... vložíme následující řádky, které označují cestu ke skriptům a malý javascript, který definuje parametry prezentace:

$(".slideshow").cycle((
fx: "fade"
});
});

.slideshow(
šířka: 200px;
výška: 135px;
okraj: auto;
}

Jak vidíte, existuje také jednoduché pravidlo CSS, ve kterém je třeba určit velikost okna pro obrázky budoucí prezentace (šířka - výška). Všechny obrázky musí mít přirozeně stejnou velikost. Pokud si přejete, můžete rozšířit možnosti CSS přidáním například ohraničení, pozadí, odsazení a dalších prvků pro obrázky prezentace. V tomto případě musíte uvést celkovou velikost, tj. obrázek plus odsazení a okraje podél vámi nastavené délky a šířky.

Důležitá poznámka: Pokud váš web používá několik pluginů jQuery, je výhodnější přesunout soubor jquery.js (nejlépe nejnovější verzi) do kořenové složky, abyste jej nestahovali několikrát. V tomto případě bude řádek pro přístup k němu vypadat pro všechny pluginy stejně. Konkrétně pro náš příklad to vypadá takto:

Nedoporučuje se používat několik různých verzí jQuery na stejné stránce, aby nebyly v konfliktu. Zároveň nezapomeňte zkontrolovat, zda pluginy fungují s nainstalovanou verzí jQuery, protože ne všechny verze jsou zaměnitelné.

Posledním krokem je umístění obrázků na stránku. I zde je vše jednoduché. Umístěte obrázky do štítku nebo jiného štítku, který vám umožní nastavit šířku a výšku, a zadejte jeho class="slideshow" . V našem příkladu vypadá HTML kód pro posuvník takto:

V tomto okamžiku je tvorba prezentace téměř dokončena a můžete ji zobrazit otevřením stránky v prohlížeči.

Nastavení možností prezentace Snímky

Ve vytvořené slideshow můžete změnou javascriptu umístěného v záhlaví stránky nastavit různé typy přechodů mezi snímky. Navíc nahrazením řádku sync:false ve skriptu sync:true můžete odstranit mezeru při změně obrázků.

Doba zobrazování obrázků je řízena parametrem timeout a rychlost parametrem speed. Zde je jako příklad několik běžných možností prezentace a odpovídajících skriptů, které by měly být vloženy do záhlaví stránky.

1. Rozpuštění (náš příklad): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //typ přechodu rychlost: 1000 , //rychlost změny obrazu časový limit: 1000 //trvání snímku }); });
2. Náhodné míchání: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zamíchat", synchronizace: false, rychlost: 500 časový limit: 5000 }); });
3. Lupa: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zoom", synchronizace: nepravda }); });
4. Překlopte osu X nebo Y: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // pro rotaci podél osy Y - záclonaY synchronizace: nepravda }); });
5. Vertikální sbalení: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // směr lze nastavit turnUp, turnLeft, turnRight synchronizace: pravda }); });
6. Posouvání (posun): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // lze nastavit směr posunu scrollUp, scrollLeft, scrollRight synchronizace: pravda }); });
7. Zeslabování doprava: $(document).ready(function() ( $(".slideshow").cycle(( fx: "kryt }); });

Někdy je potřeba umístit několik možností prezentace na jednu stránku webu, jak je uvedeno v tomto článku. Chcete-li to provést, stačí zadat různé třídy pro každou možnost v řádku $(".slideshow").cycle(( (viz kód v tabulce výše) a nezapomeňte zadat velikosti oken pro každou třídu v CSS.

Pokud snímky obsahují pouze obrázky, můžete mírně změnit strukturu:

předchozí další

Nezapomeňte do atributu alt přidat smysluplnou hodnotu.

Chcete-li použít odkazy na stránky, můžete provést následující:

... ... ... 1 2 3

Předchozí Další 1 2 3

Všimněte si použití atributů „data“ – některé prezentace mohou vkládat obrázky jako pozadí a tyto atributy budou použity ve skriptu jako místa pro spojení pozadí a snímku.

Použití seznamů Sémanticky správným přístupem by bylo použití položek seznamu jako snímků. V tomto případě bude struktura vypadat takto:

Pokud je pořadí snímků dobře definováno (například v prezentaci), můžete použít číslované seznamy

CSS Začněme s následující strukturou:

předchozí další

Protože Protože prezentace poběží zprava doleva, vnější kontejner bude mít pevnou velikost a vnitřní bude širší, protože obsahuje všechny snímky. První snímek bude viditelný. To se nastavuje přes přetečení:

Posuvník ( šířka: 1024px; přetečení: skryté; ) .slider-wrapper ( šířka: 9999px; výška: 683px; pozice: relativní; přechod: vlevo 500 ms lineární; )

Styly vnitřního obalu zahrnují:

Velká šířka
- pevná výška, maximální výška skluzu
- poloha: relativní, což vám umožní vytvořit posuvný pohyb
- Přechod CSS vlevo, díky kterému bude pohyb plynulý. Pro jednoduchost jsme nezahrnuli všechny předpony. K tomu můžete použít i CSS transformace (společně s překladem).

Snímky mají atribut float, aby se zarovnaly. Jsou umístěny relativně tak, že můžete získat jejich levý offset v JS. Používáme ho k vytvoření posuvného efektu.

Snímek ( plovoucí: vlevo; pozice: relativní; šířka: 1024px; výška: 683px; )

Přestože máme nastavenou určitou šířku, ve skriptu ji můžeme změnit vynásobením počtu snímků šířkou snímku. Nikdy nevíte, jakou šířku můžete potřebovat.

Navigace se provádí pomocí tlačítek „Předchozí“ a „Další“. Obnovíme jejich výchozí styly a přiřadíme vlastní:

Slider-nav ( výška: 40px; šířka: 100%; okraj-horní: 1,5em; ) tlačítko .slider-nav (ohraničení: žádné; zobrazení: blok; šířka: 40px; výška: 40px; kurzor: ukazatel; odsazení textu : -9999em; barva pozadí: průhledná; opakování pozadí: bez opakování; ) .slider-nav button.slider-previous ( float: left; background-image: url(previous.png); ) .slider-nav button .slider-next ( float: right; background-image: url(next.png); )

Při použití odkazů na stránky místo tlačítek můžete vytvořit následující styly:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; výška: 2em; výška řádku: 2; zarovnání textu: na střed; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )

Tyto třídy budou přiřazeny dynamicky ze skriptu.

Tento přístup je vhodný pro posuvný efekt. Pokud chceme dosáhnout efektu roztmívání, musíme změnit styly, protože float přidává vodorovné odsazení mezi snímky. To znamená, že nepotřebujeme snímky na jednom řádku – potřebujeme „balíček“ snímků:

Posuvník ( šířka: 1024px; margin: 2em auto; ) .slider-wrapper ( šířka: 100 %; výška: 683px; pozice: relativní; /* Vytvoří kontext pro absolutní umístění */ ) .slide ( pozice: absolutní; /* Absolutní umístění všech snímků */ šířka: 100 %; výška: 100 %; neprůhlednost: 0; /* Všechny snímky jsou skryté */ přechod: neprůhlednost 500 ms lineárně; ) /* Zpočátku je viditelný pouze první */ .slider- obal >
Ke skrytí snímků používáme vlastnost opacity, protože čtečky obrazovky přeskočí obsah prvků, které mají display: none (viz CSS v akci: Neviditelný obsah jen pro uživatele čtečky obrazovky).

Díky kontextovému umístění CSS jsme vytvořili „hromadu“ snímků, přičemž poslední snímek ve zdroji byl před ostatními. Ale to není to, co potřebujeme. Abychom zachovali pořadí snímků, musíme skrýt všechny snímky kromě prvního.

JS používá přechod CSS, mění hodnotu vlastnosti opacity aktuálního snímku a u všech ostatních tuto hodnotu resetuje na nulu.

Kód JavaScriptu Prezentace bez stránkování Prezentace bez stránkování funguje kliknutím na tlačítka „Další“ a „Předchozí“. Lze si je představit jako operátory inkrementace a dekrementace. Vždy existuje ukazatel (nebo kurzor), který se zvýší nebo sníží při každém stisknutí tlačítek. Jeho počáteční hodnota je 0 a cílem je vybrat aktuální snímek stejným způsobem, jakým se vybírají prvky pole.

Když tedy poprvé klikneme na Další, ukazatel se zvýší o 1 a dostaneme druhý snímek. Kliknutím na Předchozí zmenšíme ukazatel a získáme první snímek. Atd.

Spolu s ukazatelem používáme metodu .eq() jQuery k získání aktuálního snímku. V čistém JS to vypadá takto:

Funkce Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(ukazatel) ( var currentSlide = this.slides; //... ) );

Pamatujte - NodeList používá indexy stejně jako pole. Dalším způsobem, jak vybrat aktuální snímek, jsou selektory CSS3:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(ukazatel) ( var n = ukazatel + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ));

Selektor CSS3:nth-child() počítá prvky začínající od 1, takže k ukazateli musíte přidat 1. Po výběru snímku je nutné přesunout jeho nadřazený kontejner zprava doleva. V jQuery můžete použít metodu .animate():

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing) : "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

V běžném JS neexistuje metoda .animate(), takže používáme přechody CSS:

Slider-wrapper ( poloha: relativní; // požadovaný přechod: vlevo 500 ms lineárně; )

Nyní můžete vlastnost left dynamicky měnit prostřednictvím objektu stylu:

Nyní musíme vytvořit událost kliknutí pro každý ovládací prvek. V jQuery můžete použít metodu .on() a v čistém JS můžete použít metodu addEventListener().

Musíte také zkontrolovat, zda ukazatel dosáhl hranic seznamu - 0 pro „Předchozí“ a celkový počet snímků pro „Další“. V každém případě musíte skrýt příslušné tlačítko:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", další : ".slider-next", //... rychlost: 500, náběh: "lineární" ), možnosti); var slideTo = funkce(snímek, prvek) ( var $currentSlide = $(options.slides, prvek). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == celkem - 1) ( index = celkem - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

A v čistém JS to vypadá takto:

Funkce Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), akce: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "blok"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), Nepravdivé); ));

Stránkovaná prezentace U tohoto typu prezentace je každý odkaz zodpovědný za jeden snímek, takže není potřeba index. Animace se nemění, mění se způsob, jakým se uživatel pohybuje po snímcích. Pro jQuery budeme mít následující kód:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed) : 500, náběh: "linear" ), možnosti); var slideTo = funkce (snímek, prvek) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, prvek). animate(( vlevo: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href) ")); slideTo($slide, $element); $a.addClass("aktuální").siblings(). removeClass("aktuální"); )); )); ))(jQuery);

V tomto případě každá kotva odpovídá ID konkrétního snímku. V čistém JS můžete použít jak on, tak atribut data, který ukládá číselný index snímků uvnitř NodeList:

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav) a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigace: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Od IE10 můžete spravovat třídy pomocí classList:

Link.classList.add("aktuální");

A s IE11 lze atributy dat získat prostřednictvím vlastnosti datové sady:

Var index = parseInt(a.dataset.slide, 10) + 1;

Stránkované prezentace s ovládacími prvky Tyto prezentace představují určitou složitost kódu – musíte kombinovat použití indexu a hash stránky. To znamená, že aktuální snímek musí být vybrán na základě polohy ukazatele a snímku vybraného pomocí odkazů.

To lze synchronizovat pomocí číselného indexu každého odkazu v DOM. Jeden odkaz - jeden snímek, takže jejich indexy budou 0, 1, 2 atd.

V jQuery bude kód vypadat takto:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // Číselný index DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == celkem - 1) ( $.fn.slideshow.index = celkem - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("aktuální"). sourozenci().removeClass("aktuální"); )); )); ); //... ))(jQuery);

Okamžitě vidíte, že se změnila viditelnost kurzoru – index je nyní deklarován jako vlastnost objektu slideshow. Tímto způsobem se vyhneme problémům s rozsahem, které mohou být vytvořeny zpětnými voláními v jQuery. Kurzor je nyní dostupný všude, dokonce i mimo jmenný prostor pluginu, protože je deklarován jako veřejná vlastnost objektu slideshow.

Metoda .index() udává číselný index každého odkazu.

V čistém JS žádná taková metoda neexistuje, takže je snazší používat datové atributy:

Nyní můžeme propojit naše postupy s referencemi a používat datové atributy, které jsme právě vytvořili:

Akce: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none "; ) else ( self.next.style.display = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(to); ), Nepravdivé); ))

Pochopení dimenzí Vraťme se k následujícímu pravidlu CSS:

Slider-wrapper (šířka: 9999px; výška: 683px; pozice: relativní; přechod: vlevo 500 ms lineární; )

Pokud máme hodně snímků, pak 9999 nemusí stačit. Velikosti snímků je třeba upravit za běhu na základě šířky každého snímku a počtu snímků.

V jQuery je to jednoduché:

// Prezentace po celé šířce return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * celkem); //... ));

Vezměte šířku okna a nastavte šířku každého snímku. Celková šířka vnitřního obalu se získá vynásobením šířky okna a počtu snímků.

// Prezentace s pevnou šířkou return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * celkem); //... ));

Zde je počáteční šířka nastavena na šířku každého snímku. Stačí nastavit celkovou šířku zavinovačky.

Vnitřní nádoba je nyní dostatečně široká. V čistém JS se to dělá přibližně stejným způsobem:

// Prezentace na celou šířku Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // šířka výřezu var winWidth = okno .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Efekty stmívání Efekty stmívání se často používají v prezentacích. Aktuální snímek zmizí a zobrazí se další. jQuery má metody fadeIn() a fadeOut(), které pracují s vlastnostmi opacity i display, takže po dokončení animace je prvek ze stránky odstraněn (display:none).

V čistém JS je nejlepší pracovat s vlastností opacity a používat zásobník polohování CSS. Poté bude snímek zpočátku viditelný (neprůhlednost: 1) a ostatní budou skryté (průhlednost: 0).

Následující sada stylů demonstruje tuto metodu:

Posuvník ( šířka: 100 %; přetečení: skryté; pozice: relativní; výška: 400px; ) .slider-wrapper ( šířka: 100 %; výška: 100 %; pozice: relativní; ) .snímek ( pozice: absolutní; šířka: 100 %; výška: 100 %; neprůhlednost: 0; ) .slider-wrapper > .slide:first-child ( opacity: 1; )

V čistém JS musíte zaregistrovat přechod CSS každého snímku:

Snímek ( plovoucí: vlevo; poloha: absolutní; šířka: 100 %; výška: 100 %; neprůhlednost: 0; přechod: neprůhlednost 500 ms lineární; )

Chcete-li v jQuery používat metody fadeIn() a fadeOut(), musíte změnit krytí a zobrazení:

Snímek ( plovoucí: vlevo; pozice: absolutní; šířka: 100 %; výška: 100 %; zobrazení: žádné; ) .slider-wrapper > .slide:first-child ( display: block; )

V jQuery je kód následující:

(funkce($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , snímky: ".slide", nav: ".slider-nav", rychlost: 500, náběh: "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. ..); ))(jQuery);

Při animaci neprůhlednosti je také nutné změnit hodnoty této vlastnosti pro zbývající snímky.

V JavaScriptu by to bylo:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Mediální prvky: Video Video můžeme zahrnout do prezentace. Zde je příklad video prezentace z Vimeo:

Videa jsou zahrnuta prostřednictvím prvků iframe. Jedná se o stejný vyměnitelný inline blok jako na obrázku. Vyměnitelné – protože obsah je převzat z externího zdroje.

Chcete-li vytvořit celostránkovou prezentaci, musíte změnit styly následovně:

Html, tělo ( okraj: 0; odsazení: 0; výška: 100 %; minimální výška: 100 %; /* Výška by měla být celá stránka */ ) .posuvník ( šířka: 100 %; přetečení: skryté; výška: 100 %; min-height: 100 %; /* Výška a šířka na plnou */ poloha: absolutní; /* Absolutní umístění */ ) .slider-wrapper ( šířka: 100 %; výška: 100 %; /* Výška a šířka do plná */ pozice: relativní; ) .slide ( plovoucí: vlevo; pozice: absolutní; šířka: 100 %; výška: 100 %; ) .slide iframe ( display: block; /* Element bloku */ pozice: absolutní; /* Absolutní umístění */ šířka: 100 %; výška: 100 %; /* Celá výška a šířka */ )

Automatické prezentace Automatické prezentace používají časovače. Pokaždé, když je funkce časovače setInterval() zavolána zpět, kurzor se zvýší o 1 a tím se vybere další snímek.

Když kurzor dosáhne maximálního počtu snímků, musí být resetován.

Nekonečné prezentace rychle začnou uživatele nudit. Nejlepším postupem je zastavit animaci, když na ni uživatel najede myší, a pokračovat, když se kurzor vzdálí.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Časovač var index = 0; // Varování kurzoru slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( opacity: 1), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Inicializace časovače sekvence = setInterval ( function() ( index++; // Zvětšit kurzor o 1 if(index == $(options.slides, element).length) ( index = 0; // Resetovat kurzor ) slideTo(index, element); ), options.speed ); // Stejný interval jako v metodě.animate() ); var startStop = funkce(prvek) ( element.hover(funkce() ( // Zastavení animace clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Obnovení animace )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Oba parametry metody .stop() jsou nastaveny na hodnotu true, protože nepotřebujeme z naší sekvence vytvářet animační frontu.

V čistém JS se kód zjednoduší. Pro každý snímek registrujeme přechod CSS s určitou dobou trvání:

Snímek ( přechod: neprůhlednost 3 s lineární; /* 3 sekundy = 3000 milisekund */ )

A kód bude vypadat takto:

Navigace pomocí klávesnice Pokročilé prezentace nabízejí navigaci pomocí klávesnice, tzn. Procházejte snímky pomocí tlačítek. Pro nás to jednoduše znamená, že musíme zaregistrovat zpracování události stisku klávesy.

K tomu přistoupíme k vlastnosti keyCode objektu události. Vrací kód stisknuté klávesy (seznam kódů).

Události, které jsme připojili k tlačítkům „Předchozí“ a „Další“, lze nyní připojit ke klávesám „vlevo“ a „vpravo“. jQuery:

$("body").on("keydown", function(e) ( kód var = e.keyCode; if(code == 39) ( // Šipka vlevo $next.trigger("click"); ) if( kód == 37) ( // Šipka vpravo $previous.trigger("click"); ) ));

V čistém JS budete muset místo jednoduché metody .trigger() použít dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // kliknutí myší if(code == 39) ( // šipka vlevo self .next.dispatchEvent(evt); ) if(code == 37) ( // Šipka vpravo self.previous.dispatchEvent(evt); ) ), false);

U slušných projektů to není zvykem. Potřebovali bychom definovat funkcionalitu, která poskytuje překlápění ve veřejné metodě, a poté ji zavolat po kliknutí na tlačítko. Pokud by pak jiná část programu potřebovala implementovat tuto funkcionalitu, nebylo by potřeba emulovat události DOM, ale bylo by možné tuto metodu jednoduše zavolat.

Zpětná volání Bylo by hezké mít možnost připojit nějaký kód k jakékoli akci prezentace, která by se provedla, když je tato akce provedena. K tomu slouží funkce zpětného volání – provádějí se pouze tehdy, když dojde k určité akci. Řekněme, že naše prezentace má titulky a ve výchozím nastavení jsou skryté. V době animace musíme zobrazit popisek k aktuálnímu snímku nebo s ním dokonce něco udělat.

V jQuery můžete vytvořit zpětné volání takto:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Zpětné volání pro aktuální snímek options.callback($ currentSlide)). sourozenci(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

V tomto případě je zpětným voláním funkce z .animate(), která bere aktuální snímek jako argument. Můžete jej použít takto:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Zobrazí aktuální popisek a skryje ostatní $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("pomalu"); ) )); ));

V čistém JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naše zpětné volání this.el = document.querySelector(element); this.init(); ) Slideshow. prototyp = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Funkce zpětného volání je definována jako druhý parametr konstruktoru. Můžete jej použít takto:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Zobrazí aktuální titulek a skryje ostatní var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Externí rozhraní API Náš pracovní scénář je zatím jednoduchý: všechny snímky jsou již v dokumentu. Pokud do něj potřebujeme vkládat data zvenčí (YouTube, Vimeo, Flickr), musíme snímky plnit za běhu, když přijímáme externí obsah.

Protože odpověď ze serveru třetí strany nemusí být okamžitá, musíte vložit animaci načítání, abyste ukázali, že proces probíhá:

předchozí další

Může to být gif nebo čistá animace CSS:

#spinner ( border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; ) # spinner:after ( content: ""; pozice: absolutní; barva pozadí: #000; nahoře:2px; vlevo: 48%; výška: 38px; šířka: 2px; border-radius: 5px; -webkit-transform-origin: 50 % 97 %; transformace-origin: 50 % 97 %; -animace webkitu: úhlová 1s lineární nekonečná; animace: úhlová 1s lineární nekonečná; ) @-webkit-keyframes úhlové ( 0%(-webkit-transform:rotate(0deg) );) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ngular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( obsah: ""; pozice: absolutní; barva pozadí: #000; nahoře:6px; vlevo: 48%; výška: 35px; šířka: 2px; rádius-okraje: 5px; -webkit-transform-origin: 50% 94% ; původ transformace: 50 % 94 %; -animace webkitu: ptangular 6s linear infinite; animace: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Kroky budou následující:
- požadovat data zvenčí
- skrýt bootloader
- analyzovat data
- vytvořit HTML
- zobrazit prezentaci
- zpracovávat prezentace

Řekněme, že vybereme nejnovější videa uživatele z YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, uživatelské jméno: "learncodeacademy" ), možnosti); //... var getVideos = function() ( // Získejte videa z YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Získání videa jako objektu JSON $(options.loader). hide(); // Skrytí zavaděče var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

V čistém JavaScriptu existuje další krok - vytvoření metody pro získání JSON:

Pak jsou postupy podobné:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // zpětné volání objektu JSON(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Získat video YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Získání videa jako objektu JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "žádný"; // Skrytí zavaděče pro (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки