Vytvorte prezentáciu pomocou šablón javascript. Fotolaboratórium. Ovládanie posúvača

Prehľad programov na vytváranie prezentácií Vytváranie prezentácií pre webovú stránku

Pri vytváraní prezentácie na zverejnenie na webovej stránke je najlepšie použiť hotové softvérové riešenia. Najlepšou a najjednoduchšou možnosťou je podľa mňa použiť jQuery, špeciálnu bezplatnú knižnicu skriptov (malé JavaScript programy). Predchádzajúce články už hovorili o tomto úžasnom nástroji na vývoj webových aplikácií. Pozrite si napríklad článok Fotogaléria jQuery- jednoduché a krásne! . Teraz pomocou jQuery vytvoríme prezentáciu na stránke, takzvaný slider.

K tomu nám poslúži plugin Slides, ktorý vytvoril programátor Nathan Searles, technický riaditeľ dizajnérskeho štúdia „The Brigade“ v Portlande, Oregon, USA. Ďalší jeho vývoj bol opísaný v článku Fotogaléria pre internetový obchod.

Doplnok Slides sa ľahko inštaluje, má niekoľko možností na zmenu obrázkov v prezentácii a často sa používa pre hlavičku stránky. Príklad toho, ako tento posúvač funguje s predvolenými nastaveniami, je znázornený na obrázku:

Inštalácia prezentácie Snímky

Ako vždy, najprv vytvorte na stránke priečinok so skriptami. Potom je potrebné stiahnuť archív a rozbaliť ho do vytvoreného priečinka. Bude obsahovať dva skripty jquery-1.8.3.min.js a jquery.cycle.all.min.js.

Ďalej do názvu stránky vnútri značky... vložíme nasledujúce riadky, ktoré označujú cestu k skriptom a malý javascript, ktorý definuje parametre prezentácie:

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

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

Ako vidíte, existuje aj jednoduché pravidlo CSS, v ktorom musíte určiť veľkosť okna pre obrázky budúcej prezentácie (šírka - výška). Prirodzene, všetky obrázky musia mať rovnakú veľkosť. Ak chcete, môžete rozšíriť možnosti CSS pridaním napríklad okrajov, pozadia, výplne a iných prvkov pre obrázky prezentácie. V tomto prípade musíte uviesť celkovú veľkosť, to znamená obrázok plus zarážky a okraje pozdĺž dĺžky a šírky, ktoré ste nastavili.

Dôležitá poznámka: Ak vaša stránka používa viacero pluginov jQuery, potom je vhodnejšie presunúť súbor jquery.js (najlepšie najnovšiu verziu) do koreňového priečinka, aby ste ho nesťahovali viackrát. V tomto prípade bude riadok pre prístup k nemu vyzerať rovnako pre všetky pluginy. Najmä v našom príklade to vyzerá takto:

Neodporúča sa používať niekoľko rôznych verzií jQuery na tej istej stránke, aby si navzájom nekolidovali. Zároveň nezabudnite skontrolovať, či pluginy fungujú s nainštalovanou verziou jQuery, pretože nie všetky verzie sú zameniteľné.

Posledným krokom je umiestnenie obrázkov na stránku. Aj tu je všetko jednoduché. Umiestnite obrázky do značky alebo inej značky, ktorá vám umožní nastaviť šírku a výšku, a zadajte jej class="slideshow" . V našom príklade vyzerá kód HTML pre posúvač takto:

V tomto bode je vytváranie prezentácie takmer dokončené a môžete si ju pozrieť otvorením stránky v prehliadači.

Nastavenie možností prezentácie Snímky

Vo vytvorenej prezentácii môžete nastaviť rôzne typy prechodov medzi snímkami zmenou javascriptu umiestneného v hlavičke stránky. Okrem toho nahradením riadku sync:false v skripte reťazcom sync:true môžete odstrániť medzeru pri zmene obrázkov.

Trvanie zobrazovania obrázkov je riadené parametrom timeout a rýchlosť parametrom speed. Ako príklad uvádzame niekoľko bežných možností prezentácie a zodpovedajúcich skriptov, ktoré by sa mali vložiť do hlavičky stránky.

1. Rozpustenie (náš príklad): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //typ prechodu rýchlosť: 1000 , //rýchlosť zmeny obrazu časový limit: 1000 //trvanie snímky }); });
2. Miešanie: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zamiešať", synchronizácia: nepravda, rýchlosť: 500 časový limit: 5000 }); });
3. Priblíženie: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zoom", synchronizácia: nepravda }); });
4. Otočte os X alebo Y: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // pre otáčanie pozdĺž osi Y - záclonaY synchronizácia: nepravda }); });
5. Zbaliť vertikálne: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // smer je možné nastaviť turnUp, turnLeft, turnRight synchronizácia: pravda }); });
6. Posúvanie (posun): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // možno nastaviť smer posunu scrollUp, scrollLeft, scrollRight synchronizácia: pravda }); });
7. Miznutie doprava: $(document).ready(function() ( $(".slideshow").cycle(( fx: "kryt }); });

Niekedy je potrebné umiestniť niekoľko možností prezentácie na jednu stránku lokality, ako je to uvedené v tomto článku. Ak to chcete urobiť, stačí zadať rôzne triedy pre každú možnosť v riadku $(".slideshow").cycle(( (pozri kód v tabuľke vyššie) a nezabudnite zadať veľkosti okien pre každú triedu v CSS.

Ak snímky obsahujú iba obrázky, môžete mierne zmeniť štruktúru:

Predchádzajúci Nasledujúci

Nezabudnite pridať zmysluplnú hodnotu do atribútu alt.

Ak chcete použiť odkazy na stránky, môžete urobiť nasledovné:

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

Predchádzajúca Ďalšia 1 2 3

Všimnite si použitie atribútov „údaje“ – niektoré prezentácie môžu vložiť obrázky ako pozadie a tieto atribúty sa použijú v skripte ako miesta na prepojenie pozadia a snímky.

Používanie zoznamov Sémanticky správnym prístupom by bolo použitie položiek zoznamu ako snímky. V tomto prípade bude štruktúra vyzerať takto:

Ak je poradie snímok dobre definované (napríklad v prezentácii), môžete použiť očíslované zoznamy

CSS Začnime s nasledujúcou štruktúrou:

Predchádzajúci Nasledujúci

Pretože Keďže prezentácia bude prebiehať sprava doľava, vonkajší kontajner bude mať pevnú veľkosť a vnútorný bude širší, pretože obsahuje všetky snímky. Bude viditeľná prvá snímka. Toto sa nastavuje cez pretečenie:

Posúvač ( šírka: 1024px; pretečenie: skryté; ) .slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )

Štýly vnútorného obalu zahŕňajú:

Veľká šírka
- pevná výška, maximálna výška sklzu
- poloha: relatívna, čo vám umožní vytvoriť posuvný pohyb
- CSS prechod vľavo, vďaka čomu bude pohyb plynulý. Pre jednoduchosť sme nezahrnuli všetky predpony. Na to môžete použiť aj transformácie CSS (spolu s prekladom).

Snímky majú atribút float, aby boli zarovnané. Sú umiestnené relatívne tak, že môžete získať ich ľavý posun v JS. Používame ho na vytvorenie posuvného efektu.

Snímka ( float: left; pozícia: relatívna; šírka: 1024px; výška: 683px; )

Hoci máme nastavenú určitú šírku, v skripte ju môžeme zmeniť vynásobením počtu snímok šírkou snímky. Nikdy neviete, akú šírku budete potrebovať.

Navigácia sa vykonáva pomocou tlačidiel „Predchádzajúci“ a „Ďalej“. Obnovíme ich predvolené štýly a priradíme im vlastné:

Slider-nav ( výška: 40px; šírka: 100%; okraj-vrchu: 1,5em; ) tlačidlo .slider-nav ( orámovanie: žiadne; zobrazenie: blok; šírka: 40px; výška: 40px; kurzor: ukazovateľ; odsadenie textu : -9999em; farba pozadia: priehľadná; opakovanie pozadia: bez opakovania; ) .tlačidlo posuvníka.posuvník-predchádzajúci ( float: left; background-image: url(previous.png); ) .tlačidlo posuvníka .slider-next ( float: right; background-image: url(next.png); )

Pri použití odkazov na stránky namiesto tlačidiel môžete vytvoriť nasledujúce štýly:

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 riadku: 2; zarovnanie textu: stred; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )

Tieto triedy budú priradené dynamicky zo skriptu.

Tento prístup je vhodný pre posuvný efekt. Ak chceme dosiahnuť efekt zoslabenia, musíme zmeniť štýly, keďže float pridáva medzi snímky vodorovnú výplň. To znamená, že nepotrebujeme snímky na jednom riadku - potrebujeme „balenie“ snímok:

Posuvník ( šírka: 1024px; okraj: 2em auto; ) .slider-wrapper ( šírka: 100 %; výška: 683px; poloha: relatívna; /* Vytvorí kontext pre absolútne umiestnenie */ ) .slide ( poloha: absolútna; /* Absolútne umiestnenie všetkých snímok */ šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; /* Všetky snímky sú skryté */ prechod: nepriehľadnosť 500 ms lineárne; ) /* Spočiatku je viditeľný iba prvý */ .posuvník- obal >
Na skrytie snímok používame vlastnosť opacity, pretože čítačky obrazovky preskočia obsah prvkov, ktoré majú display: none (pozri CSS v akcii: Neviditeľný obsah len pre používateľov čítačky obrazovky).

Vďaka kontextovému umiestneniu CSS sme vytvorili „hromadu“ snímok, pričom posledná snímka v zdroji bola pred ostatnými. Ale to nie je to, čo potrebujeme. Aby sme zachovali poradie snímok, musíme skryť všetky snímky okrem prvej.

JS používa prechod CSS, pričom mení hodnotu vlastnosti nepriehľadnosti aktuálnej snímky a pre všetky ostatné vynuluje túto hodnotu.

Kód JavaScript Prezentácia bez stránkovania Prezentácia bez stránkovania funguje kliknutím na tlačidlá „Ďalej“ a „Predchádzajúci“. Možno si ich predstaviť ako operátory prírastku a znižovania. Vždy existuje ukazovateľ (alebo kurzor), ktorý sa zvýši alebo zníži pri každom stlačení tlačidiel. Jeho počiatočná hodnota je 0 a cieľom je vybrať aktuálnu snímku rovnakým spôsobom, ako sa vyberajú prvky poľa.

Keď teda prvýkrát klikneme na Ďalej, ukazovateľ sa zvýši o 1 a dostaneme druhú snímku. Kliknutím na Predchádzajúci zmenšíme ukazovateľ a získame prvú snímku. Atď.

Spolu s ukazovateľom používame metódu .eq() jQuery na získanie aktuálnej snímky. V čistom JS to vyzerá takto:

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

Pamätajte - NodeList používa indexy rovnako ako pole. Ďalším spôsobom, ako vybrať aktuálnu snímku, sú selektory CSS3:

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

Selektor CSS3:nth-child() počíta prvky začínajúce od 1, takže k ukazovateľu musíte pridať 1. Po výbere snímky je potrebné presunúť jej nadradený kontajner sprava doľava. V jQuery môžete použiť metódu .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 bežnom JS neexistuje metóda .animate(), takže používame prechody CSS:

Slider-wrapper ( poloha: relatívna; // požadovaný prechod: vľavo 500 ms lineárne; )

Teraz môžete zmeniť vlastnosť left dynamicky prostredníctvom objektu štýlu:

Teraz musíme vytvoriť udalosť kliknutia pre každý ovládací prvok. V jQuery môžete použiť metódu .on() a v čistom JS môžete použiť metódu addEventListener().

Musíte tiež skontrolovať, či ukazovateľ dosiahol hranice zoznamu - 0 pre „Predchádzajúci“ a celkový počet snímok pre „Ďalší“. V každom prípade musíte skryť príslušné tlačidlo:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next) : ".slider-next", //... rýchlosť: 500, nábeh: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(možnosti.snímky, prvok). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $prvok = $(toto), $predchadzajuci = $(volby.predchadzajuce, $prvok), $dalsi = $(volby.nasleduje, $prvok), index = 0, celkove = $(volby.slajdy).dĺžka; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) (index = total - 1; $next.hide(); ) slideTo(index, $prvok); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

A v čistom JS to vyzerá takto:

Funkcia 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.slide.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), akcie: 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 = "blok"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), nepravda); ));

Stránkovaná prezentácia V tomto type prezentácie je každý odkaz zodpovedný za jednu snímku, takže index nie je potrebný. Animácie sa nemenia, mení sa spôsob, akým sa používateľ pohybuje po snímkach. Pre jQuery budeme mať nasledujúci kód:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed) : 500, easing: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $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álne").súrodenci(). removeClass("aktuálne"); )); )); ))(jQuery);

V tomto prípade každá kotva zodpovedá ID konkrétnej snímky. V čistom JS môžete použiť aj atribút data, ktorý ukladá číselný index snímok v zozname NodeList:

Funkcia 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(); ), navigácia: 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 spravovať triedy cez classList:

Link.classList.add("aktuálne");

A s IE11 možno atribúty údajov získať prostredníctvom vlastnosti množiny údajov:

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

Stránkované prezentácie s ovládacími prvkami Tieto prezentácie predstavujú určitú zložitosť kódu – musíte skombinovať použitie indexu a hash stránky. To znamená, že aktuálna snímka musí byť vybratá na základe polohy ukazovateľa a snímky vybratej prostredníctvom odkazov.

Toto je možné synchronizovať pomocou číselného indexu každého odkazu v DOM. Jeden odkaz - jedna snímka, takže ich indexy budú 0, 1, 2 atď.

V jQuery bude kód vyzerať 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 == celkom - 1) ( $.fn.slideshow.index = celkom - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("aktuálny"). súrodenci().removeClass("aktuálny"); )); )); ); //... ))(jQuery);

Okamžite vidíte, že sa zmenila viditeľnosť kurzora – index je teraz deklarovaný ako vlastnosť objektu prezentácie. Týmto spôsobom sa vyhneme problémom s rozsahom, ktoré môžu vzniknúť spätnými volaniami v jQuery. Kurzor je teraz dostupný všade, dokonca aj mimo menného priestoru doplnku, pretože je deklarovaný ako verejná vlastnosť objektu prezentácie.

Metóda .index() poskytuje číselný index každého odkazu.

V čistom JS takáto metóda neexistuje, takže je jednoduchšie použiť atribúty údajov:

Teraz môžeme prepojiť naše postupy s referenciami a použiť dátové atribúty, ktoré sme práve vytvorili:

Akcie: function() ( var self = toto; //... 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(this); ), nepravda); ))

Pochopenie dimenzií Vráťme sa k nasledujúcemu pravidlu CSS:

Slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )

Ak máme veľa snímok, potom 9999 nemusí stačiť. Veľkosti snímok musíte priebežne upravovať na základe šírky každej snímky a počtu snímok.

V jQuery je to jednoduché:

// Prezentácia na celú šírku return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(okno).width()); $(options.wrapper, $element).width($(window).width() * celkovo); //... ));

Vezmite šírku okna a nastavte šírku každej snímky. Celková šírka vnútorného obalu sa získa vynásobením šírky okna a počtu snímok.

// Prezentácia s pevnou šírkou return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));

Tu je počiatočná šírka nastavená na šírku každej snímky. Stačí si nastaviť celkovú šírku zavinovačky.

Vnútorná nádoba je teraz dostatočne široká. V čistom JS sa to robí približne rovnakým spôsobom:

// Prezentácia na celú šírku 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; // šírka výrezu 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 miznutia Efekty blednutia sa často používajú v prezentáciách. Aktuálna snímka zmizne a zobrazí sa ďalšia. jQuery má metódy fadeIn() a fadeOut(), ktoré pracujú s vlastnosťami nepriehľadnosti aj zobrazenia, takže prvok sa po dokončení animácie zo stránky odstráni (display:none).

V čistom JS je najlepšie pracovať s vlastnosťou opacity a použiť zásobník na umiestnenie CSS. Potom bude najprv snímka viditeľná (nepriehľadnosť: 1) a ostatné budú skryté (nepriehľadnosť: 0).

Nasledujúci súbor štýlov demonštruje túto metódu:

Posúvač ( šírka: 100 %; pretečenie: skryté; pozícia: relatívna; výška: 400px; ) .slider-wrapper ( šírka: 100 %; výška: 100 %; pozícia: relatívna; ) .snímka ( poloha: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; ) .slider-wrapper > .slide:first-child ( nepriehľadnosť: 1; )

V čistom JS musíte zaregistrovať prechod CSS každej snímky:

Snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; prechod: nepriehľadnosť 500 ms lineárne; )

Ak chcete v jQuery použiť metódy fadeIn() a fadeOut(), musíte zmeniť nepriehľadnosť a zobrazenie:

Snímka ( float: left; pozícia: absolútna; šírka: 100 %; výška: 100 %; zobrazenie: žiadne; ) .slider-wrapper > .slide:first-child ( display: block; )

V jQuery je kód nasledovný:

(funkcia($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , snímky: ".slide", nav: ".slider-nav", rýchlosť: 500, nábeh: "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);

Pri animácii nepriehľadnosti je tiež potrebné zmeniť hodnoty tejto vlastnosti pre zostávajúce snímky.

V JavaScripte by to bolo:

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; } } }, //... };

Prvky médií: Video Do prezentácie môžeme zahrnúť video. Tu je príklad prezentácie videa z Vimeo:

Videá sú zahrnuté prostredníctvom prvku iframe. Ide o rovnaký vymeniteľný inline blok ako na obrázku. Vymeniteľné – pretože obsah je prevzatý z externého zdroja.

Ak chcete vytvoriť celostránkovú prezentáciu, musíte zmeniť štýly takto:

Html, telo ( okraj: 0; odsadenie: 0; výška: 100 %; minimálna výška: 100 %; /* Výška by mala byť celá stránka */ ) .posuvník ( šírka: 100 %; pretečenie: skryté; výška: 100 %; minimálna výška: 100 %; /* Výška a šírka na plnú výšku */ poloha: absolútna; /* Absolútna poloha */ ) .slider-wrapper ( šírka: 100 %; výška: 100 %; /* Výška a šírka do plná */ pozícia: relatívna; ) .snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; ) .prvok snímky ( zobrazenie: blok; /* Prvok bloku */ pozícia: absolútna; /* Absolútne umiestnenie */ šírka: 100 %; výška: 100 %; /* Celá výška a šírka */ )

Automatické prezentácie Automatické prezentácie využívajú časovače. Zakaždým, keď je funkcia časovača setInterval() zavolaná späť, kurzor sa zvýši o 1 a teda sa vyberie ďalšia snímka.

Keď kurzor dosiahne maximálny počet snímok, musí sa resetovať.

Nekonečné prezentácie sa pre používateľov rýchlo stanú nudnými. Najlepšou praxou je zastaviť animáciu, keď na ňu používateľ umiestni kurzor myši, a pokračovať, keď sa kurzor presunie preč.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Časovač var index = 0; // Varovanie kurzora 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) ( // Inicializácia sekvenčného časovača = setInterval ( function() ( index++; // Zväčšenie kurzora o 1 if(index == $(options.slides, element).length) ( index = 0; // Resetovanie kurzora ) slideTo(index, element); ), options.speed ); // Rovnaký interval ako v metóde.animate() ); var startStop = funkcia(prvok) ( element.hover(funkcia() ( // Zastavenie animácie clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Obnovenie animácie )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Oba parametre metódy .stop() sú nastavené na hodnotu true, pretože z našej sekvencie nepotrebujeme vytvárať animačné fronty.

V čistom JS sa kód zjednoduší. Pre každú snímku registrujeme prechod CSS s určitým trvaním:

Snímka ( prechod: nepriehľadnosť 3 s lineárne; /* 3 sekundy = 3 000 milisekúnd */ )

A kód bude takýto:

Navigácia pomocou klávesnice Pokročilé prezentácie ponúkajú navigáciu pomocou klávesnice, t.j. Prechádzajte snímkami pomocou tlačidiel. Pre nás to jednoducho znamená, že musíme zaregistrovať spracovanie udalosti stlačenia klávesu.

Aby sme to urobili, pristúpime k vlastnosti keyCode objektu udalosti. Vráti kód stlačeného tlačidla (zoznam kódov).

Udalosti, ktoré sme pripojili k tlačidlám „Predchádzajúci“ a „Ďalej“, môžu byť teraz pripojené k klávesom „vľavo“ a „vpravo“. jQuery:

$("body").on("keydown", function(e) ( kód var = e.keyCode; if(code == 39) ( // Šípka doľava $next.trigger("click"); ) if( kód == 37) ( // šípka doprava $previous.trigger("click"); ) ));

V čistom JS budete musieť namiesto jednoduchej metódy .trigger() použiť dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // kliknutie myšou if(code == 39) ( // Šípka doľava self .next.dispatchEvent(evt); ) if(code == 37) ( // šípka doprava self.previous.dispatchEvent(evt); ) ), false);

V slušných projektoch to nie je zvykom. Museli by sme definovať funkčnosť, ktorá poskytuje preklápanie vo verejnej metóde, a potom ju zavolať, keď sa klikne na tlačidlo. Potom, ak by iná časť programu potrebovala implementovať túto funkcionalitu, nebolo by potrebné emulovať udalosti DOM, ale mohli by sme jednoducho zavolať túto metódu.

Spätné volania Bolo by pekné mať možnosť pripojiť nejaký kód k akejkoľvek akcii prezentácie, ktorá by sa vykonala, keď sa táto akcia vykoná. Na to slúžia funkcie spätného volania – vykonajú sa len vtedy, keď nastane určitá akcia. Povedzme, že naša prezentácia má titulky a sú predvolene skryté. V čase animácie musíme zobraziť titulok pre aktuálnu snímku alebo s ňou dokonca niečo urobiť.

V jQuery môžete vytvoriť spätné volanie 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, // Spätné volanie pre aktuálnu snímku options.callback($ currentSlide)). súrodenci(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

V tomto prípade je spätným volaním funkcia z .animate(), ktorá berie aktuálnu snímku ako argument. Môžete ho použiť takto:

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

V čistom JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naše spätné volanie this.el = document.querySelector(element); this.init(); ) Prezentácia. 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); // Вызывает функцию по окончанию перехода } }; // })();

Funkcia spätného volania je definovaná ako druhý parameter konštruktora. Môžete ho použiť takto:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Zobrazí aktuálny popis 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é API Zatiaľ je náš pracovný scenár jednoduchý: všetky snímky sú už v dokumente. Ak do nej potrebujeme vkladať dáta zvonku (YouTube, Vimeo, Flickr), musíme snímky dopĺňať za chodu, keď prijímame externý obsah.

Keďže odpoveď zo servera tretej strany nemusí byť okamžitá, musíte vložiť animáciu načítania, aby ste ukázali, že proces prebieha:

Predchádzajúci Nasledujúci

Môže to byť gif alebo čistá animácia 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: ""; pozícia: absolútna; farba pozadia: #000; hore:2px; zľava: 48%; výška: 38px; šírka: 2px; polomer okraja: 5px; -webkit-transform-origin: 50 % 97 %; pôvod transformácie: 50 % 97 %; -animácia webkitu: uhlová 1s lineárna nekonečná; animácia: uhlová 1s lineárna nekonečná; ) @-webkit-keyframes uhlové ( 0%(-webkit-transform:rotate(0deg) );) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes uhlové ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( obsah: ""; pozícia: absolútna; farba pozadia: #000; hore:6px; vľavo: 48%; výška: 35px; šírka: 2px; polomer-okraja: 5px; -webkit-transform-origin: 50% 94% ; pôvod transformácie: 50 % 94 %; -animácia webkitu: ptangular 6s linear infinite; animácia: 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 budú takéto:
- vyžiadať si údaje zvonku
- skryť bootloader
- analyzovať údaje
- zostaviť HTML
- zobraziť prezentáciu
- spracovať prezentácie

Povedzme, že vyberieme najnovšie videá používateľa zo služby YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Získanie videí 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ískanie videa ako objektu JSON $(options.loader). hide(); // Skrytie načítača 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 čistom JavaScripte existuje ďalší krok - vytvorenie metódy na získanie JSON:

Potom sú 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); // objekt JSON callback(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Získať 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ískanie videa ako objektu JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "žiadny"; // Skrytie zavádzača pre (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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки