Ustvarite diaprojekcijo z uporabo predlog javascript. Fotolaboratorij. Kontrolniki Slidr

Pregled programov za ustvarjanje diaprojekcije Ustvarjanje diaprojekcije za spletno stran

Pri ustvarjanju diaprojekcije za objavo na spletnem mestu je najbolje uporabiti že pripravljene programske rešitve. Po mojem mnenju je najboljša in najlažja možnost uporaba jQuery, posebne brezplačne knjižnice skript (majhnih JavaScript programov). Prejšnji članki so že govorili o tem čudovitem orodju za spletni razvoj. Oglejte si na primer članek Fotogalerija jQuery- preprosto in lepo! . Zdaj pa uporabimo jQuery za ustvarjanje diaprojekcije na spletnem mestu, tako imenovani drsnik.

Za to bomo uporabili vtičnik Slides, ki ga je ustvaril programer Nathan Searles, tehnični direktor oblikovalskega studia "The Brigade" v Portlandu, Oregon, ZDA. Še en njegov razvoj je bil opisan v članku Fotogalerija za spletno trgovino.

Vtičnik Diapozitivi je enostaven za namestitev, ima več možnosti za spreminjanje slik v diaprojekciji in se pogosto uporablja za glavo spletnega mesta. Primer delovanja tega drsnika s privzetimi nastavitvami je prikazan na sliki:

Namestitev diaprojekcije Diapozitivi

Kot vedno najprej ustvarite mapo s skripti na spletnem mestu. Nato morate prenesti arhiv in ga razpakirati v ustvarjeno mapo. Vseboval bo dve skripti jquery-1.8.3.min.js in jquery.cycle.all.min.js.

Nato v naslov strani znotraj oznake... vstavimo naslednje vrstice, ki označujejo pot do skriptov in majhen javascript, ki določa parametre diaprojekcije:

$(". diaprojekcija").cikel((
fx: "zbledi"
});
});

.diaprojekcija(
širina: 200px;
višina: 135px;
marža: samodejno;
}

Kot lahko vidite, obstaja tudi preprosto pravilo CSS, v katerem morate določiti velikost okna za slike prihodnje diaprojekcije (širina - višina). Seveda morajo biti vse slike enake velikosti. Če želite, lahko razširite možnosti CSS z dodajanjem na primer obrob, ozadij, oblazinjenja in drugih elementov za slike diaprojekcije. V tem primeru morate navesti skupno velikost, to je sliko ter vdolbine in obrobe po dolžini in širini, ki ste ju nastavili.

Pomembna opomba:Če vaše spletno mesto uporablja več vtičnikov jQuery, je bolj priročno premakniti datoteko jquery.js (po možnosti najnovejšo različico) v korensko mapo, da je ne boste večkrat prenesli. V tem primeru bo vrstica za dostop videti enako za vse vtičnike. Zlasti za naš primer se izkaže takole:

Ni priporočljivo uporabljati več različnih različic jQuery na isti strani, da ne pride do konflikta med seboj. Hkrati se prepričajte, da vtičniki delujejo z nameščeno različico jQuery, saj niso vse različice zamenljive.

Zadnji korak je postavitev slik na stran. Tudi tukaj je vse preprosto. Postavite slike v oznako ali drugo oznako, ki vam omogoča nastavitev širine in višine, ter določite njen class="slideshow" . Za naš primer je koda HTML za drsnik videti takole:

Na tej točki je ustvarjanje diaprojekcije skoraj končano in si jo lahko ogledate tako, da odprete svojo stran v brskalniku.

Nastavitev možnosti diaprojekcije Diapozitivi

V ustvarjeni diaprojekciji lahko nastavite različne vrste prehodov med okvirji tako, da spremenite javascript v glavi strani. Poleg tega lahko z zamenjavo vrstice sync:false v skriptu s sync:true odstranite presledek pri spreminjanju slik.

Trajanje prikazovanja slik je nadzorovano s parametrom časovne omejitve, hitrost pa s parametrom hitrosti. Tukaj je na primer več pogostih možnosti diaprojekcije in ustreznih skriptov, ki jih je treba vstaviti v glavo strani.

1. Razpustitev (naš primer): $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "zbledi", //vrsta prehoda hitrost: 1000 , //hitrost spreminjanja slike časovna omejitev: 1000 //trajanje okvirja }); });
2. Mešanje: $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "naključno", sinhronizacija: false, hitrost: 500 časovna omejitev: 5000 }); });
3. Povečava: $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "povečava", sinhronizacija: napačno }); });
4. Obrni po osi X ali Y: $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "curtainX", // za rotacijo vzdolž osi Y - curtainY sinhronizacija: napačno }); });
5. Strni navpično: $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "turnDown", // smer je mogoče nastaviti zavijanje navzgor, zavijanje levo, zavijanje desno sinhronizacija: res }); });
6. Drsenje (odmik): $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx:"scrollDown", // smer zamika je mogoče nastaviti scrollUp, scrollLeft, scrollRight sinhronizacija: res }); });
7. Zbledi v desno: $(dokument).pripravljen(funkcija() ( $(". diaprojekcija").cikel(( fx: "pokrov }); });

Včasih morate na eno stran spletnega mesta postaviti več možnosti diaprojekcije, kot je storjeno v tem članku. Če želite to narediti, morate samo določiti različne razrede za vsako možnost v vrstici $(".slideshow").cycle(( (glejte kodo v zgornji tabeli) in ne pozabite določiti velikosti oken za vsak razred v CSS.

Če diapozitivi vsebujejo samo slike, lahko nekoliko spremenite strukturo:

Prejšnji Naprej

Ne pozabite atributu alt dodati pomembne vrednosti.

Če želite uporabiti povezave strani, lahko storite naslednje:

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

Nazaj Naprej 1 2 3

Upoštevajte uporabo atributov »podatki« - nekatere diaprojekcije lahko vstavijo slike kot ozadje in ti atributi bodo uporabljeni v skriptu kot mesta za povezavo ozadja in diapozitiva.

Uporaba seznamov Pomensko pravilen pristop bi bil uporaba elementov seznama kot diapozitivov. V tem primeru bo struktura takšna:

Če je vrstni red diapozitivov dobro določen (na primer v predstavitvi), lahko uporabite oštevilčene sezname

CSS Začnimo z naslednjo strukturo:

Prejšnji Naprej

Ker Ker bo diaprojekcija potekala od desne proti levi, bo zunanji vsebnik fiksne velikosti, notranji pa bo širši, saj vsebuje vse diapozitive. Prvi diapozitiv bo viden. To je nastavljeno s prelivom:

Drsnik (širina: 1024 slikovnih pik; preliv: skrit; ) .slider-wrapper (širina: 9999 slikovnih pik; višina: 683 slikovnih pik; položaj: relativni; prehod: levo 500 ms linearno; )

Slogi notranjega ovoja vključujejo:

Velika širina
- fiksna višina, maksimalna višina tobogana
- položaj: relativni, kar vam bo omogočilo ustvarjanje premikanja diapozitiva
- CSS prehod v levo, zaradi česar bo gibanje gladko. Zaradi poenostavitve nismo vključili vseh predpon. Za to lahko uporabite tudi transformacije CSS (skupaj s prevodom).

Diapozitivi imajo atribut float, da se postavijo v vrsto. Postavljeni so relativno tako, da lahko dobite njihov levi odmik v JS. Uporabljamo ga za ustvarjanje drsnega učinka.

Diapozitiv (lebdenje: levo; položaj: relativno; širina: 1024 slikovnih pik; višina: 683 slikovnih pik; )

Čeprav smo nastavili določeno širino, jo lahko v skriptu spremenimo tako, da število diapozitivov pomnožimo s širino diapozitiva. Nikoli ne veš, kakšno širino morda potrebuješ.

Navigacija poteka preko gumbov "Prejšnji" in "Naprej". Ponastavimo njihove privzete sloge in dodelimo svoje:

Slider-nav ( višina: 40px; širina: 100 %; margin-top: 1,5em; ) .slider-nav gumb ( border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent : -9999em; barva ozadja: prozorna; ponavljanje ozadja: brez ponavljanja; ) .slider-nav button.slider-previous ( float: levo; ozadje-image: url(previous.png); ) .slider-nav button .slider-next ( float: desno; ozadje-slika: url(next.png); )

Če namesto gumbov uporabljate povezave strani, lahko ustvarite naslednje sloge:

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; višina: 2em; višina vrstice: 2; poravnava besedila: sredina; ) .slider-nav a.current (barva obrobe: #000; barva: #000; teža pisave: krepko; )

Ti razredi bodo dodeljeni dinamično iz skripta.

Ta pristop je primeren za učinek drsenja. Če želimo doseči učinek zatemnitve, moramo spremeniti sloge, saj float doda vodoravni odmik med diapozitivi. To pomeni, da ne potrebujemo diapozitivov v eni vrstici - potrebujemo "paket" diapozitivov:

Drsnik ( širina: 1024 slikovnih pik; rob: 2em auto; ) .slider-wrapper ( širina: 100 %; višina: 683 slikovnih pik; položaj: relativno; /* Ustvari kontekst za absolutno pozicioniranje */ ) .slide ( položaj: absolutno; /* Absolutna postavitev vseh diapozitivov */ širina: 100 %; višina: 100 %; motnost: 0; /* Vsi diapozitivi so skriti */ prehod: motnost 500 ms linearno; ) /* Na začetku je viden samo prvi */ .slider- ovoj >
Za skrivanje diapozitivov uporabljamo lastnost motnosti, ker bodo bralniki zaslona preskočili vsebino elementov, ki imajo display: none (glejte CSS v akciji: Nevidna vsebina samo za uporabnike bralnikov zaslona).

Zahvaljujoč kontekstualnemu pozicioniranju CSS smo ustvarili "kup" diapozitivov, pri čemer je bil zadnji diapozitiv v viru pred drugimi. Ampak to ni tisto, kar potrebujemo. Da ohranimo vrstni red diapozitivov, moramo skriti vse diapozitive razen prvega.

JS uporablja prehod CSS, spremeni vrednost lastnosti motnosti trenutnega diapozitiva in ponastavi to vrednost na nič za vse ostale.

Koda JavaScript Diaprojekcija brez označevanja strani Diaprojekcija brez označevanja strani deluje s klikom na gumba »Naprej« in »Prejšnji«. Lahko si jih predstavljamo kot operatorje inkrementa in dekrementa. Vedno obstaja kazalec (ali kurzor), ki se poveča ali zmanjša vsakič, ko pritisnete gumbe. Njegova začetna vrednost je 0, cilj pa je izbrati trenutni diapozitiv na enak način, kot so izbrani elementi niza.

Ko torej prvič kliknemo Naprej, se kazalec poveča za 1 in dobimo drugi diapozitiv. S klikom na Prejšnji pomanjšamo kazalec in dobimo prvi diapozitiv. itd.

Skupaj s kazalcem uporabimo metodo jQuery .eq(), da dobimo trenutni diapozitiv. V čistem JS je videti takole:

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

Ne pozabite – NodeList uporablja indekse tako kot niz. Drug način za izbiro trenutnega diapozitiva je z izbirniki CSS3:

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

Izbirnik CSS3:nth-child() šteje elemente, ki se začnejo z 1, zato morate kazalcu dodati 1. Po izbiri diapozitiva je treba njegov nadrejeni vsebnik premakniti od desne proti levi. V jQueryju lahko uporabite metodo .animate():

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( ovoj: ".slider-wrapper", diapozitivi: ".slide", //... hitrost: 500, popuščanje : "linearno" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( levo : - $currentSlide.position().left), options.speed, options.easing); //... ); ))(jQuery);

V navadnem JS ni metode .animate(), zato uporabljamo prehode CSS:

Ovoj drsnika ( položaj: relativni; // zahtevan prehod: levo 500 ms linearno; )

Zdaj lahko levo lastnost spremenite dinamično prek objekta sloga:

Zdaj moramo ustvariti dogodek klika za vsak kontrolnik. V jQueryju lahko uporabite metodo .on(), v čistem JS pa metodo addEventListener().

Prav tako morate preveriti, ali je kazalec dosegel meje seznama - 0 za »Prejšnji« in skupno število diapozitivov za »Naprej«. V vsakem primeru morate skriti ustrezen gumb:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( ovoj: ".slider-wrapper", diapozitivi: ".slide", prejšnji: ".slider-prejšnji", naslednji : ".slider-next", //... hitrost: 500, popuščanje: "linearno" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( levo: - $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 == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klik", funkcija() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

In v čistem JS je videti takole:

Funkcija 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"; ), dejanja: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; 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 = "brez"; ) self._slideTo(self.index); ), napačno); ) );

Paginirana diaprojekcija Pri tej vrsti diaprojekcije je vsaka povezava odgovorna za en diapozitiv, zato kazalo ni potrebno. Animacije se ne spremenijo, temveč način, kako se uporabnik premika po diapozitivih. Za jQuery bomo imeli naslednjo kodo:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( ovoj: ".slider-wrapper", diapozitivi: ".slide", nav: ".slider-nav", hitrost : 500, popuščanje: "linearno" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( levo: - $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("trenutni").siblings(). removeClass("trenutni"); )); )); ))(jQuery);

V tem primeru vsako sidro ustreza ID-ju določenega diapozitiva. V čistem JS lahko uporabite tako njega kot atribut podatkov, ki shranjuje številčni indeks diapozitivov znotraj NodeList:

Funkcija 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(); ), navigate: 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 lahko upravljate razrede prek classList:

Link.classList.add("trenutni");

Z IE11 pa lahko atribute podatkov pridobite prek lastnosti nabora podatkov:

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

Ostranjene diaprojekcije s kontrolniki Te diaprojekcije predstavljajo nekaj zapletenosti kode – združiti morate uporabo zgoščenih vrednosti indeksa in strani. To pomeni, da mora biti trenutni diapozitiv izbran na podlagi položaja kazalca in diapozitiva, izbranega prek povezav.

To je mogoče sinhronizirati s številčnim indeksom vsake povezave v DOM. Ena povezava - en diapozitiv, zato bodo njihovi indeksi 0, 1, 2 itd.

V jQuery bo koda takšna:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( //... paginacija: ".slider-pagination", //... ), možnosti); $. fn.slideshow.index = 0; vrni this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("klik", funkcija(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerični indeks $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == skupno - 1) ( $.fn.slideshow.index = skupno - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indeks, $element); $a.addClass("trenutni"). siblings().removeClass("trenutni"); )); )); ); //... ))(jQuery);

Takoj lahko vidite, da se je vidnost kazalca spremenila - indeks je zdaj deklariran kot lastnost predmeta diaprojekcije. Na ta način se izognemo težavam z obsegom, ki jih lahko ustvarijo povratni klici v jQuery. Kazalec je zdaj na voljo povsod, tudi zunaj imenskega prostora vtičnika, saj je deklariran kot javna lastnina predmeta diaprojekcije.

Metoda .index() daje številski indeks vsake povezave.

V čistem JS ni takšne metode, zato je lažje uporabiti podatkovne atribute:

Zdaj lahko svoje postopke povežemo z referencami in uporabimo atribute podatkov, ki smo jih pravkar ustvarili:

Dejanja: 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 = "brez "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), napačno); ) )

Razumevanje dimenzij Vrnimo se k naslednjemu pravilu CSS:

Ovoj drsnika (širina: 9999 slikovnih pik; višina: 683 slikovnih pik; položaj: relativno; prehod: levo 500 ms linearno; )

Če imamo veliko diapozitivov, potem 9999 morda ne bo dovolj. Velikosti diapozitivov morate prilagoditi sproti glede na širino posameznega diapozitiva in število diapozitivov.

V jQuery je preprosto:

// Diaprojekcija polne širine vrne this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

Vzemite širino okna in nastavite širino vsakega diapozitiva. Skupno širino notranjega ovoja dobimo tako, da pomnožimo širino okna in število diapozitivov.

// Diaprojekcija s fiksno širino vrne this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * skupno); //... ));

Tukaj je začetna širina nastavljena na širino vsakega diapozitiva. Določiti morate le skupno širino ovoja.

Notranja posoda je zdaj dovolj široka. V čistem JS se to naredi približno na enak način:

// Diaprojekcija polne širine 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; // Viewport's width var winWidth = window .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"; }, //... };

Učinki bledenja Učinki bledenja se pogosto uporabljajo v diaprojekcijah. Trenutni diapozitiv izgine in prikaže se naslednji. jQuery ima metodi fadeIn() in fadeOut(), ki delujeta z lastnostmi motnosti in prikaza, tako da je element odstranjen s strani, ko se animacija zaključi (display:none).

V čistem JS je najbolje delati z lastnostjo motnosti in uporabiti sklad za pozicioniranje CSS. Nato bo diapozitiv najprej viden (neprosojnost: 1), ostali pa bodo skriti (neprosojnost: 0).

Naslednji nabor slogov prikazuje to metodo:

Drsnik ( širina: 100 %; prelivanje: skrito; položaj: relativno; višina: 400 slikovnih pik; ) .slider-wrapper ( širina: 100 %; višina: 100 %; položaj: relativno; ) .slide ( položaj: absolutno; širina: 100 %; višina: 100 %; motnost: 0; ) .slider-wrapper > .slide:first-child ( motnost: 1; )

V čistem JS morate registrirati prehod CSS vsakega diapozitiva:

Diapozitiv (lebdenje: levo; položaj: absolutno; širina: 100 %; višina: 100 %; motnost: 0; prehod: motnost 500 ms linearno; )

Pri jQuery morate za uporabo metod fadeIn() in fadeOut() spremeniti motnost in prikaz:

Diapozitiv ( float: levo; položaj: absolutno; širina: 100 %; višina: 100 %; zaslon: nič; ) .slider-wrapper > .slide:first-child ( display: block; )

V jQuery je koda naslednja:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( ovoj: ".slider-wrapper", prejšnji: ".slider-prejšnji", naslednji: ".slider-next" , diapozitivi: ".slide", nav: ".slider-nav", hitrost: 500, popuščanje: "linearno" ), 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 animiranju motnosti morate spremeniti tudi vrednosti te lastnosti za preostale diapozitive.

V JavaScriptu bi bilo:

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

Medijski elementi: Video V diaprojekcijo lahko vključimo video. Tukaj je primer video diaprojekcije iz Vimea:

Videoposnetki so vključeni prek iframe. To je isti zamenljivi vgrajeni blok kot na sliki. Zamenljiv – ker je vsebina vzeta iz zunanjega vira.

Če želite ustvariti celostransko diaprojekcijo, morate spremeniti sloge, kot sledi:

Html, telo ( rob: 0; oblazinjenje: 0; višina: 100 %; najmanjša višina: 100 %; /* Višina naj bo celotna stran */ ) .drsnik ( širina: 100 %; preliv: skrit; višina: 100 %; najmanjša višina: 100 %; /* Višina in širina do polne */ pozicija: absolutna; /* Absolutna postavitev */ ) .slider-wrapper ( širina: 100 %; višina: 100 %; /* Višina in širina do full */ position: relative; ) .slide ( float: levo; position: absolute; width: 100 %; height: 100 %; ) .slide iframe ( display: block; /* Block element */ position: absolute; /* Absolutna postavitev */ širina: 100 %; višina: 100 %; /* Celotna višina in širina */ )

Samodejne diaprojekcije Samodejne diaprojekcije uporabljajo časovnike. Vsakič, ko se funkcija časovnika setInterval() prikliče nazaj, se kazalec poveča za 1 in tako bo izbran naslednji diapozitiv.

Ko kazalec doseže največje število diapozitivov, ga je treba ponastaviti.

Neskončne diaprojekcije uporabnikom hitro postanejo dolgočasne. Najboljša praksa je, da animacijo ustavite, ko se uporabnik premakne nadnjo, in nadaljujete, ko se kazalec odmakne.

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( diapozitivi: ".slide", hitrost: 3000, popuščanje: "linearno"), možnosti); var timer = null; // Časovnik var index = 0; // Kazalec var 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) ( // Inicializiraj časovnik zaporedja = setInterval ( function() ( index++; // Povečaj kazalec za 1 if(index == $(options.slides, element).length) ( index = 0; // Ponastavi kazalec) slideTo(index, element); ), options.speed); // Enak interval kot v method.animate()); var startStop = function(element) ( element.hover(function() ( // Ustavi animacijo clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Nadaljuj animacijo )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Oba parametra metode .stop() sta nastavljena na true, ker iz našega zaporedja nam ni treba ustvariti čakalne vrste animacij.

V čistem JS koda postane preprostejša. Za vsak diapozitiv registriramo prehod CSS z določenim trajanjem:

Diapozitiv (prehod: nepreglednost 3s linearno; /* 3 sekunde = 3000 milisekund */)

In koda bo takšna:

Navigacija s tipkovnico Napredne diaprojekcije ponujajo navigacijo s tipkovnico, tj. Po diapozitivih se pomikajte s pritiskom na tipke. Za nas to preprosto pomeni, da moramo registrirati obravnavo dogodka pritiska na tipko.

Da bi to naredili, bomo dostopali do lastnosti keyCode predmeta dogodka. Vrne kodo pritisnjene tipke (seznam kod).

Tiste dogodke, ki smo jih pripeli gumboma »Prejšnji« in »Naprej«, lahko zdaj pripnemo tipkama »levo« in »desno«. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Puščica levo $next.trigger("click"); ) if( koda == 37) ( // puščica desno $previous.trigger("klik"); ) ));

V čistem JS boste namesto preproste metode .trigger() morali uporabiti dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // klik miške if(code == 39) ( // Puščica levo self .next.dispatchEvent(evt); ) if(code == 37) ( // Desna puščica self.previous.dispatchEvent(evt); ) ), false);

V spodobnih projektih to ni običajno. Morali bi definirati funkcionalnost, ki omogoča obračanje v javni metodi, in jo nato poklicati, ko kliknemo gumb. Potem, če bi moral drug del programa implementirati to funkcionalnost, ne bi bilo treba posnemati dogodkov DOM, ampak bi lahko preprosto poklicali to metodo.

Povratni klici Lepo bi bilo, če bi lahko dodali nekaj kode kateremu koli dejanju diaprojekcije, ki bi se izvršilo, ko je to dejanje izvedeno. To je namen povratnih funkcij – izvedejo se le, ko se zgodi določeno dejanje. Recimo, da ima naša diaprojekcija napise in so privzeto skriti. V času animacije moramo prikazati napis za trenutni diapozitiv ali celo nekaj narediti z njim.

V jQuery lahko ustvarite povratni klic, kot je ta:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( //... povratni klic: funkcija() () ), možnosti); var slideTo = funkcija(diapozitiv, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1), options.speed, options.easing, // Povratni klic za trenutni diapozitiv options.callback($ currentSlide)). siblings(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

V tem primeru je povratni klic funkcija iz .animate(), ki vzame trenutni diapozitiv kot argument. Takole ga lahko uporabite:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Prikaže trenutni napis in skrije ostale $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

V čistem JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naš povratni klic this.el = document.querySelector(element); this.init(); ) Diaprojekcija. prototip = ( 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); // Вызывает функцию по окончанию перехода } }; // })();

Funkcija povratnega klica je definirana kot drugi parameter konstruktorja. Uporabite ga lahko takole:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Prikaže trenutni napis in skrije ostale var allSlides = ovoj. 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"); } } }); });

Zunanji API-ji Do zdaj je naš scenarij dela preprost: vsi diapozitivi so že v dokumentu. Če moramo vanj vstaviti podatke od zunaj (YouTube, Vimeo, Flickr), moramo diapozitive zapolniti sproti, ko prejmemo zunanjo vsebino.

Ker odgovor strežnika tretje osebe morda ne bo takojšen, morate vstaviti animacijo nalaganja, ki prikazuje, da je postopek v teku:

Prejšnji Naprej

Lahko je gif ali čista animacija CSS:

#spinner (polmer obrobe: 50%; obroba: 2px polna #000; višina: 80px; širina: 80px; položaj: absolutno; zgoraj: 50%; levo: 50%; rob: -40px 0 0 -40px; ) # spinner:after ( vsebina: ""; pozicija: absolutna; barva ozadja: #000; zgoraj: 2px; levo: 48%; višina: 38px; širina: 2px; polmer obrobe: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: kotna 1s linearna neskončna; animacija: kotna 1s linearna neskončna; ) @-webkit-keyframes kotna ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( vsebina: ""; položaj: absolutno; barva ozadja: #000; zgoraj: 6 slikovnih pik; levo: 48 %; višina: 35 slikovnih pik; širina: 2 slikovnih pik; polmer roba: 5 slikovnih pik; -webkit-transform-origin: 50 % 94 % ; transform-origin: 50 % 94 %; -webkit-animation: ptangular 6s linearno neskončno; animacija: ptangular 6s linearno neskončno; ) @-webkit-keyframes ptangular ( 0 %(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Koraki bodo takšni:
- zahtevati podatke od zunaj
- skrij zagonski nalagalnik
- razčleniti podatke
- zgraditi HTML
- prikaz diaprojekcije
- obdelava diaprojekcij

Recimo, da iz YouTuba izberemo uporabnikove najnovejše videoposnetke. jQuery:

(funkcija($) ( $.fn.slideshow = funkcija(možnosti) ( možnosti = $.extend(( ovoj: ".slider-wrapper", //... nalagalnik: "#spinner", //... omejitev: 5, uporabniško ime: "learncodeacademy" ), možnosti); //... var getVideos = function() ( // Pridobite videoposnetke iz YouTuba var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Pridobite video kot objekt JSON $(options.loader). hide(); // Skrivanje nalagalnika 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 čistem JavaScriptu obstaja dodaten korak - ustvarjanje metode za pridobivanje JSON:

Potem so postopki podobni:

(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: funkcija(url, povratni klic) ( povratni klic = povratni klic || funkcija(); var zahteva = nov XMLHttpRequest(); request.open("GET", url, true); request.send(null); zahteva .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON object callback(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Pridobi YouTube video var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Pridobite video kot objekt JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "brez"; // Skrivanje nalagalnika za (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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки