Kreirajte projekciju slajdova koristeći javascript šablone. Foto laboratorija. Slidr Controls

Pregled programa za kreiranje slajdšoua Kreiranje prezentacije za web stranicu

Prilikom kreiranja slajdova za objavljivanje na web stranici, najbolje je koristiti gotova softverska rješenja. Po mom mišljenju, najbolja i najlakša opcija je korištenje jQueryja, posebne besplatne biblioteke skripti (mali JavaScript programi). Prethodni članci su već govorili o ovom divnom alatu za web razvoj. Na primjer, pogledajte članak Galerija fotografija jQuery- jednostavno i lijepo! . Sada koristimo jQuery da kreiramo slajd šou na sajtu, takozvani klizač.

Za to ćemo koristiti dodatak Slides, koji je kreirao programer Nathan Searles, tehnički direktor dizajnerskog studija "The Brigade" u Portlandu, Oregon, SAD. Još jedan njegov razvoj opisan je u članku Galerija fotografija za online trgovinu.

Dodatak Slides se lako instalira, ima nekoliko opcija za promjenu slika u projekciji slajdova i često se koristi za zaglavlje stranice. Primjer kako ovaj klizač radi sa zadanim postavkama prikazan je na slici:

Instaliranje slideshowa Slajdovi

Kao i uvijek, prvo kreirajte folder sa skriptama na stranici. Zatim morate preuzeti arhivu i raspakirati je u kreiranu mapu. Sadržat će dvije skripte jquery-1.8.3.min.js i jquery.cycle.all.min.js.

Zatim, u naslov stranice unutar oznake... ubacujemo sljedeće redove, koji označavaju putanju do skripti i mali javascript koji definira parametre prezentacije:

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

.slideshow(
širina: 200px;
visina: 135px;
margina: auto;
}

Kao što vidite, postoji i jednostavno CSS pravilo u kojem morate odrediti veličinu prozora za slike budućeg slajd šoua (širina - visina). Naravno, sve slike moraju biti iste veličine. Ako želite, možete proširiti CSS opcije dodavanjem, na primjer, ivica, pozadina, paddinga i drugih elemenata za vaše slike u dijaprojekciji. U tom slučaju morate navesti ukupnu veličinu, odnosno sliku plus uvlake i ivice duž dužine i širine koje ste postavili.

Važna napomena: Ako vaša stranica koristi nekoliko jQuery dodataka, tada je zgodnije premjestiti datoteku jquery.js (po mogućnosti najnoviju verziju) u korijenski folder kako je ne biste preuzimali nekoliko puta. U ovom slučaju, linija za pristup će izgledati isto za sve dodatke. Konkretno, za naš primjer ispada ovako:

Ne preporučuje se korištenje nekoliko različitih verzija jQueryja na istoj stranici kako ne bi bile u sukobu jedna s drugom. Istovremeno, obavezno provjerite rade li dodaci s instaliranom verzijom jQueryja, jer nisu sve verzije zamjenjive.

Posljednji korak je postavljanje slika na stranicu. I ovdje je sve jednostavno. Postavite slike unutar oznake ili druge oznake koja vam omogućava da postavite širinu i visinu i odredite njen class="slideshow" . Za naš primjer, HTML kod za klizač izgleda ovako:

U ovom trenutku, kreiranje slajdova je skoro završeno, a možete ga pogledati otvaranjem stranice u pretraživaču.

Postavljanje opcija za slajd šou Slajdovi

U kreiranoj projekciji slajdova možete postaviti različite vrste prijelaza između okvira promjenom javascripta koji se nalazi u zaglavlju stranice. Osim toga, zamjenom reda sync:false u skripti sa sync:true, možete ukloniti razmak kada mijenjate slike.

Trajanje prikaza slika kontroliše parametar timeout, a brzinu parametar brzine. Kao primjer, evo nekoliko uobičajenih opcija za slideshow i odgovarajućih skripti koje treba umetnuti u zaglavlje stranice.

1. Raspuštanje (naš primjer): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //tip prijelaza brzina: 1000 , //brzina promjene slike timeout: 1000 //trajanje okvira }); });
2. Mešanje: $(document).ready(function() ( $(".slideshow").cycle(( fx: "promiješaj", sinhronizacija: lažna, brzina: 500 vremensko ograničenje: 5000 }); });
3. Zumiranje: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zum", sinhronizacija: lažna }); });
4. Okrenite po X ili Y osi: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // za rotaciju duž Y ose - zavjesaY sinhronizacija: lažna }); });
5. Sažmi okomito: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // smjer se može podesiti okretanje gore, skretanje lijevo, skretanje desno sinhronizacija: istina }); });
6. Pomicanje (offset): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // smjer pomaka se može postaviti scrollUp, scrollLeft, scrollRight sinhronizacija: istina }); });
7. Fade udesno: $(document).ready(function() ( $(".slideshow").cycle(( fx: "cover }); });

Ponekad morate postaviti nekoliko opcija za slajdove na jednu stranicu web-mjesta, kao što je učinjeno u ovom članku. Da biste to učinili, samo trebate navesti različite klase za svaku opciju u redu $(.slideshow").cycle(((pogledajte kod u gornjoj tabeli), i ne zaboravite navesti veličine prozora za svaku klasu u CSS-u.

Ako slajdovi sadrže samo slike, možete malo promijeniti strukturu:

Previous Next

Ne zaboravite dodati značajnu vrijednost atributu alt.

Da biste koristili linkove na stranice, možete učiniti sljedeće:

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

Prethodno Sljedeće 1 2 3

Obratite pažnju na upotrebu atributa „podataka“ – neke projekcije slajdova mogu umetnuti slike kao pozadinu, a ovi atributi će se koristiti u skripti kao mjesta za povezivanje pozadine i slajda.

Korištenje lista Semantički ispravan pristup bio bi korištenje stavki liste kao slajdova. U ovom slučaju struktura će biti ovakva:

Ako je redosled slajdova dobro definisan (na primer, u prezentaciji), možete koristiti numerisane liste

CSS Počnimo sa sljedećom strukturom:

Previous Next

Jer Budući da će se slajdšou odvijati s desna na lijevo, vanjski spremnik će imati fiksnu veličinu, a unutrašnji će biti širi jer sadrži sve slajdove. Prvi slajd će biti vidljiv. Ovo se postavlja preko overflow:

Klizač ( širina: 1024px; prelijevanje: skriveno; ) .slider-wrapper (širina: 9999px; visina: 683px; pozicija: relativna; prijelaz: lijevo 500ms linearno; )

Stilovi unutrašnjeg omota uključuju:

Velika širina
- fiksna visina, maksimalna visina klizača
- pozicija: relativna, što će vam omogućiti da kreirate kretanje klizanja
- CSS tranzicija lijevo, što će kretanje učiniti glatkim. Radi jednostavnosti, nismo uključili sve prefikse. Za ovo možete koristiti i CSS transformacije (zajedno s prijevodom).

Slajdovi imaju atribut float kako bi se poravnali. Postavljeni su relativno tako da možete dobiti njihov levi offset u JS-u. Koristimo ga za stvaranje efekta klizanja.

Slajd (float: lijevo; položaj: relativan; širina: 1024px; visina: 683px; )

Iako smo postavili određenu širinu, u skripti je možemo promijeniti množenjem broja slajdova sa širinom slajda. Nikad ne znate koja bi vam širina mogla zatrebati.

Navigacija se vrši preko dugmadi “Prethodno” i “Sljedeće”. Poništimo njihove zadane stilove i dodijelimo svoje:

Slider-nav (visina: 40px; širina: 100%; margin-top: 1.5em; ) .slider-nav dugme (obrub: nema; prikaz: blok; širina: 40px; visina: 40px; kursor: pokazivač; uvlačenje teksta : -9999em; boja pozadine: prozirna; pozadina-ponavljanje: bez ponavljanja; ) .slider-nav button.slider-previous (float: lijevo; background-image: url(previous.png); ) .slider-nav button. .slider-next (float: desno; background-image: url(next.png); )

Kada koristite veze na stranice umjesto dugmadi, možete kreirati sljedeće stilove:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; obrub: 1px solid #ddd; boja: #444; širina: 2em; visina: 2em; visina reda: 2; poravnanje teksta: centar; ) .slider-nav a.current (boja granice: #000; boja: #000; težina fonta: podebljano; )

Ove klase će biti dodijeljene dinamički iz skripte.

Ovaj pristup je pogodan za efekat klizanja. Ako želimo postići efekat fade-in, moramo promijeniti stilove, jer float dodaje horizontalni pad između slajdova. Odnosno, ne trebaju nam slajdovi u jednoj liniji - treba nam "paket" slajdova:

Klizač ( širina: 1024px; margina: 2em auto; ) .slider-wrapper (širina: 100%; visina: 683px; pozicija: relativna; /* Kreira kontekst za apsolutno pozicioniranje */ ) .slide ( pozicija: apsolutna; /* Apsolutno pozicioniranje svih slajdova */ širina: 100%; visina: 100%; neprozirnost: 0; /* Svi slajdovi su skriveni */ prijelaz: neprozirnost 500ms linearno; ) /* U početku je vidljiv samo prvi */ .slider- omot >
Koristimo svojstvo neprozirnosti da sakrijemo slajdove jer će čitači ekrana preskočiti sadržaj elemenata koji imaju prikaz: nijedan (pogledajte CSS u akciji: Nevidljivi sadržaj samo za korisnike čitača ekrana).

Zahvaljujući CSS kontekstualnom pozicioniranju, kreirali smo „sloj“ slajdova, pri čemu je poslednji slajd u izvoru bio ispred ostalih. Ali to nije ono što nam treba. Da bismo održali redoslijed slajdova, moramo sakriti sve slajdove osim prvog.

JS koristi CSS tranziciju, mijenja vrijednost svojstva neprozirnosti trenutnog slajda i vraća ovu vrijednost na nulu za sve ostale.

JavaScript kod Projekcija slajdova bez paginacije Projekcija slajdova bez paginacije radi klikom na dugmad “Sljedeće” i “Prethodno”. Oni se mogu smatrati operatorima inkrementa i dekrementa. Uvijek postoji pokazivač (ili kursor) koji će se povećavati ili smanjivati svaki put kada pritisnete dugmad. Njegova početna vrijednost je 0, a cilj je odabrati trenutni slajd na isti način kao što se biraju elementi niza.

Dakle, kada prvi put kliknemo na Next, pokazivač se povećava za 1 i dobijamo drugi slajd. Klikom na Prethodno smanjujemo pokazivač i dobivamo prvi slajd. itd.

Zajedno sa pokazivačem, koristimo jQuery-jev .eq() metod da dobijemo trenutni slajd. U čistom JS-u to izgleda ovako:

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

Zapamtite - NodeList koristi indekse baš kao niz. Drugi način da odaberete trenutni slajd je pomoću CSS3 selektora:

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

Selektor CSS3:nth-child() broji elemente počevši od 1, tako da morate dodati 1 pokazivaču. Nakon odabira slajda, njegov roditeljski kontejner mora se pomaknuti s desna na lijevo. U jQueryju možete koristiti metodu .animate():

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( omotač: ".slider-wrapper", slajdovi: ".slide", //... brzina: 500, opuštanje : "linear" ), opcije); var slideTo = funkcija (slajd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( lijevo : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

U običnom JS-u ne postoji metoda .animate(), pa koristimo CSS tranzicije:

Slider-wrapper (pozicija: relativna; // potreban prijelaz: lijevo 500ms linearno; )

Sada možete promijeniti lijevo svojstvo dinamički kroz objekt stila:

Sada moramo kreirati događaj klika za svaku kontrolu. U jQueryju možete koristiti metodu .on(), au čistom JS-u možete koristiti metodu addEventListener().

Također morate provjeriti da li je pokazivač dosegao granice liste - 0 za “Prethodno” i ukupan broj slajdova za “Sljedeće”. U svakom slučaju, morate sakriti odgovarajuće dugme:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) (opcije = $.extend(( omotač: ".slider-wrapper", slajdovi: ".slide", prethodni: ".slider-previous", sljedeći : ".slider-next", //... brzina: 500, ublažavanje: "linearno" ), opcije); var slideTo = funkcija (slajd, element) ( var $currentSlide = $(options.slides, element). eq(slajd); $(options.wrapper, element).animate(( lijevo: - $currentSlide.position().left), options.speed, options.easing); ); vrati this.each(function() ( var $element = $(ovo), $previous = $(options.previous, $element), $next = $(options.next, $element), indeks = 0, ukupno = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == ukupno - 1) (index = ukupno - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klik", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(indeks, $element); )); )); ); ))(jQuery);

A u čistom JS-u to izgleda ovako:

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: funkcija (pokazivač) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), akcije: 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("klik", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "ništa"; ) self._slideTo(self.index); ), lažno); ) );

Paginirani slajd šou U ovoj vrsti slajd šoua, svaka veza je odgovorna za jedan slajd, tako da nema potrebe za indeksom. Animacije se ne mijenjaju; mijenja se način na koji se korisnik kreće kroz slajdove. Za jQuery ćemo imati sljedeći kod:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) (opcije = $.extend(( omotač: ".slider-wrapper", slajdovi: ".slide", navigacija: ".slider-nav", brzina : 500, ublažavanje: "linearno" ), opcije); var slideTo = funkcija (slajd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( lijevo: - $currentSlide.position().left ), options.speed, options.easing); ); vrati this.each(function() ( var $element = $(ovo), $navigationLinks = $( "a", options.nav); $navigationLinks.on("klik", funkcija(e) ( e.preventDefault(); var $a = $(ovo), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

U ovom slučaju, svako sidro odgovara ID-u određenog slajda. U čistom JS-u možete koristiti i njega i atribut podataka, koji pohranjuje numerički indeks slajdova unutar NodeList-a:

Funkcija Klizač(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 možete upravljati klasama putem liste klasa:

Link.classList.add("current");

A sa IE11, atributi podataka se mogu dobiti putem svojstva skupa podataka:

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

Stranične slajdove sa kontrolama Ove projekcije slajdova predstavljaju određenu složenost koda - morate kombinovati upotrebu indeksa i heševa stranica. To jest, trenutni slajd mora biti odabran na osnovu pozicije pokazivača i slajda odabranog preko veza.

Ovo se može sinhronizovati preko indeksa brojeva svake veze u DOM-u. Jedan link - jedan slajd, pa će im indeksi biti 0, 1, 2 itd.

U jQuery-ju kod će biti ovakav:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... paginacija: ".slider-pagination", //... ), opcije); $. fn.slideshow.index = 0; vrati this.each(function() (var $element = $(ovo), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $paginacija), //... $paginationLinks.on("klik", function(e) ( e.preventDefault(); var $a = $(ovo), elemIndex = $a.index(); // DOM numerički indeks $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == ukupno - 1) ( $.fn.slideshow.index = ukupno - 1; $next.hide(); ) ostalo ( $next.show(); ) slideTo($.fn.slideshow. indeks, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

Odmah možete vidjeti da se vidljivost kursora promijenila - indeks je sada deklariran kao svojstvo objekta slideshow. Na ovaj način izbjegavamo probleme s opsegom koji mogu biti kreirani povratnim pozivima u jQueryju. Kursor je sada dostupan svuda, čak i izvan imenskog prostora dodatka, pošto je deklarisan kao javno svojstvo objekta prezentacije.

Metoda .index() daje numerički indeks svake veze.

Ne postoji takva metoda u čistom JS-u, pa je lakše koristiti atribute podataka:

Sada možemo povezati naše procedure s referencama i koristiti atribute podataka koje smo upravo kreirali:

Akcije: 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 = "blok"; ) if(self.index == self.total - 1) (self.index = self.total - 1; self.next.style.display = "nema "; ) else ( self.next.style.display = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(ovo); ), lažno); ) )

Razumijevanje dimenzija Vratimo se sljedećem CSS pravilu:

Slider-wrapper (širina: 9999px; visina: 683px; pozicija: relativna; prijelaz: lijevo 500ms linearno; )

Ako imamo puno slajdova, onda 9999 možda neće biti dovoljno. Morate prilagoditi veličine slajdova u hodu na osnovu širine svakog slajda i broja slajdova.

U jQueryju je jednostavno:

// Slideshow pune širine vraća this.each(function() ( var $element = $(ovo), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * ukupno); //... ));

Uzmite širinu prozora i postavite širinu svakog slajda. Ukupna širina unutrašnjeg omotača dobija se množenjem širine prozora i broja slajdova.

// Slideshow fiksne širine vraća this.each(function() ( var $element = $(ovo), ukupno = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * ukupno); //... ));

Ovdje je početna širina postavljena na širinu svakog slajda. Vi samo trebate podesiti ukupnu širinu omotača.

Unutrašnji kontejner je sada dovoljno širok. U čistom JS-u to se radi otprilike na isti način:

// Slideshow pune š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; // širina Viewporta var winWidth = prozor .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"; }, //... };

Efekti bledenja Efekti bledenja se često koriste u projekcijama slajdova. Trenutni slajd nestaje i pojavljuje se sljedeći. jQuery ima metode fadeIn() i fadeOut() koje rade sa svojstvima neprozirnosti i prikaza, tako da se element uklanja sa stranice kada se animacija završi (display:none).

U čistom JS-u, najbolje je raditi sa svojstvom neprozirnosti i koristiti CSS stek za pozicioniranje. Tada će u početku slajd biti vidljiv (prozirnost: 1), a ostali će biti skriveni (prozirnost: 0).

Sljedeći skup stilova demonstrira ovu metodu:

Klizač ( širina: 100%; prelivanje: skriveno; pozicija: relativna; visina: 400px; ) .slider-wrapper ( širina: 100%; visina: 100%; pozicija: relativna; ) .slide ( pozicija: apsolutna; širina: 100 %; visina: 100%; neprozirnost: 0; ) .slider-wrapper > .slide:first-child (prozirnost: 1; )

U čistom JS-u morate registrirati CSS prijelaz svakog slajda:

Slajd (float: lijevo; pozicija: apsolutna; širina: 100%; visina: 100%; neprozirnost: 0; prijelaz: neprozirnost 500ms linearno; )

Uz jQuery, da biste koristili metode fadeIn() i fadeOut(), morate promijeniti neprozirnost i prikaz:

Slajd ( plutajući: lijevo; pozicija: apsolutna; širina: 100%; visina: 100%; prikaz: nema; ) .slider-wrapper > .slide:first-child (prikaz: blok; )

Kod jQueryja je sljedeći:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) (opcije = $.extend(( omotač: ".slider-wrapper", prethodni: ".slider-previous", sljedeći: ".slider-next" , slajdovi: ".slide", nav: ".slider-nav", brzina: 500, ublažavanje: "linearno" ), opcije); var slideTo = funkcija (slajd, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide. animate(( neprozirnost: 1), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

Kada animirate neprozirnost, također morate promijeniti vrijednosti ovog svojstva za preostale slajdove.

U JavaScript-u bi to bilo:

Slideshow.prototype = ( //... _slideTo: funkcija(slajd) ( 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 Možemo uključiti video u slideshow. Evo primjera video prezentacije sa Vimea:

Videozapisi su uključeni putem iframe-a. Ovo je isti zamjenjivi inline blok kao na slici. Zamjenjivo – jer je sadržaj preuzet iz vanjskog izvora.

Da biste kreirali projekciju slajdova preko cijele stranice, morate promijeniti stilove na sljedeći način:

Html, tijelo ( margina: 0; padding: 0; visina: 100%; min-visina: 100%; /* Visina bi trebala biti cijela stranica */ ) .slider ( širina: 100%; preljev: skriveno; visina: 100 %; min-visina: 100%; /* Visina i širina do pune */ pozicija: apsolutna; /* Apsolutno pozicioniranje */ ) .slider-wrapper ( širina: 100%; visina: 100%; /* Visina i širina do puni */ pozicija: relativna; ) .slide ( float: lijevo; pozicija: apsolutna; širina: 100%; visina: 100%; ) .slide iframe (prikaz: blok; /* Blok element */ pozicija: apsolutna; /* Apsolutno pozicioniranje */ širina: 100%; visina: 100%; /* Puna visina i širina */ )

Automatske projekcije slajdova Automatske projekcije slajdova koriste tajmere. Svaki put kada se funkcija setInterval() tajmer ponovo pozove, kursor će se povećati za 1 i tako će biti odabran sljedeći slajd.

Kada kursor dostigne maksimalan broj slajdova, mora se resetovati.

Beskrajne prezentacije brzo postaju dosadne korisnicima. Najbolja praksa je zaustaviti animaciju kada korisnik pređe preko nje i nastaviti kada se kursor pomakne.

(funkcija($) ( $.fn.slideshow = funkcija(opcije) (opcije = $.extend(( slajdovi: ".slide", brzina: 3000, ublažavanje: "linearno"), opcije); var timer = null; // Tajmer var index = 0; // Kursor var slideTo = funkcija (slajd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animirati (( neprozirnost: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Inicijaliziraj mjerač vremena sekvence = setInterval ( function() ( index++; // Povećaj kursor za 1 if(index == $(options.slides, element).length) ( index = 0; // Poništi kursor ) slideTo(index, element); ), options.speed ); // Isti interval kao u method.animate() ); var startStop = function(element) ( element.hover(function() ( // Zaustavi animaciju clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Nastavi animaciju )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Oba parametra metode .stop() su postavljena na true, jer ne trebamo kreirati red animacija iz naše sekvence.

U čistom JS-u, kod postaje jednostavniji. Registriramo CSS prijelaz za svaki slajd sa određenim trajanjem:

Slajd (prijelaz: neprozirnost 3s linearna; /* 3 sekunde = 3000 milisekundi */ )

A kod će biti ovakav:

Navigacija tastaturom Napredne projekcije slajdova nude navigaciju pomoću tastature, tj. Listajte kroz slajdove pritiskom na tastere. Za nas to jednostavno znači da moramo registrovati rukovanje događajem pritiska na tipku.

Da bismo to učinili, pristupit ćemo svojstvu keyCode objekta događaja. Vraća kod pritisnute tipke (lista kodova).

Događaji koje smo priložili dugmadima “Prethodno” i “Sljedeće” sada se mogu pričvrstiti na tipke “lijevo” i “desno”. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Strelica lijevo $next.trigger("click"); ) if( code == 37) ( // Strelica desno $previous.trigger("click"); ) ));

U čistom JS-u, umjesto jednostavne .trigger() metode, morat ćete koristiti dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // klik mišem if(code == 39) ( // strelica lijevo .next.dispatchEvent(evt); ) if(code == 37) ( // Strelica desno self.previous.dispatchEvent(evt); ) ), false);

U pristojnim projektima to nije uobičajeno raditi. Trebali bismo definirati funkcionalnost koja omogućava okretanje u javnoj metodi, a zatim je pozvati kada se klikne na dugme. Zatim, ako bi drugi dio programa trebao implementirati ovu funkcionalnost, ne bi bilo potrebe za emulacijom DOM događaja, već bi jednostavno mogli pozvati ovu metodu.

Povratni pozivi Bilo bi lijepo imati mogućnost priložiti neki kod na bilo koju radnju slideshowa koja bi se izvršila kada se ta radnja izvrši. Ovo je svrha funkcija povratnog poziva - one se izvršavaju samo kada se dogodi određena radnja. Recimo da naša prezentacija ima titlove i da su skriveni prema zadanim postavkama. U vrijeme animacije, moramo pokazati naslov za trenutni slajd ili čak nešto učiniti s njim.

U jQueryju možete kreirati povratni poziv ovako:

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

U ovom slučaju, povratni poziv je funkcija iz .animate() koja uzima trenutni slajd kao argument. Evo kako ga možete koristiti:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Prikazuje trenutni naslov i sakriva ostale $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

U čistom JS:

(function() ( funkcija Slideshow(element, callback) ( this.callback = callback || function()); // Naš povratni poziv this.el = document.querySelector(element); this.init(); ) Slideshow. prototip = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = ovo; 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 povratnog poziva definirana je kao drugi parametar konstruktora. Možete ga koristiti ovako:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Prikazuje trenutni naslov i skriva ostale var allSlides = omot. 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"); } } }); });

Vanjski API-ji Do sada je naš radni scenarij jednostavan: svi slajdovi su već u dokumentu. Ako u njega trebamo umetnuti podatke izvana (YouTube, Vimeo, Flickr), slajdove moramo popunjavati u hodu dok primamo vanjski sadržaj.

Budući da odgovor servera treće strane možda neće biti trenutan, morate umetnuti animaciju učitavanja kako biste pokazali da je proces u toku:

Previous Next

To može biti gif ili čista CSS animacija:

#spinner ( radijus granica: 50%; granica: 2px čvrsta #000; visina: 80px; širina: 80px; pozicija: apsolutna; vrh: 50%; lijevo: 50%; margina: -40px 0 0 -40px; ) # spinner:after (sadržaj: ""; pozicija: apsolutna; boja pozadine: #000; vrh:2px; lijevo: 48%; visina: 38px; širina: 2px; radijus granice: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animacija: angular 1s linearno beskonačno; animacija: angular 1s linear beskonačno; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( sadržaj: ""; pozicija: apsolutna; boja pozadine: #000; vrh:6px; lijevo: 48%; visina: 35px; širina: 2px; radijus granice: 5px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animacija: ptangular 6s linearno beskonačno; animacija: ptangular 6s linear beskonačno; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular (0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Koraci će biti ovakvi:
- tražiti podatke izvana
- sakrij bootloader
- analizirati podatke
- izgraditi HTML
- prikazati projekciju slajdova
- proces slajd šoua

Recimo da odaberemo najnovije videozapise korisnika sa YouTube-a. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( omotač: ".slider-wrapper", //... loader: "#spinner", //... ograničenje: 5, korisničko ime: "learncodeacademy" ), opcije); //... var getVideos = function() ( // Preuzmi video s YouTubea var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Dobijte video kao JSON objekat $(options.loader). hide( ); // Skrivanje učitavač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);

U čistom JavaScript-u postoji dodatni korak - kreiranje metode za dobijanje JSON-a:

Tada su procedure slične:

(function() ( funkcija 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 poziv) (povratni poziv = povratni poziv || function(); var request = novi XMLHttpRequest(); request.open("GET", url, true); request.send(null); zahtjev .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // povratni poziv JSON objekta (data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Get 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) ( // Dobijte video kao JSON objekat var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "nijedan"; // Skrivanje učitavača 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 += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки