Izveidojiet slaidrādi, izmantojot JavaScript veidnes. Fotolaboratorija. Slidr vadīklas

Pārskats par slaidrādes izveides programmām Slaidrādes izveide vietnei

Veidojot slaidrādi ievietošanai vietnē, vislabāk ir izmantot gatavus programmatūras risinājumus. Manuprāt, labākais un vienkāršākais variants ir izmantot jQuery, īpašu bezmaksas skriptu bibliotēku (mazas JavaScript programmas). Iepriekšējos rakstos jau tika runāts par šo brīnišķīgo tīmekļa izstrādes rīku. Piemēram, skatiet rakstu Fotogalerija jQuery- vienkārši un skaisti! . Tagad izmantosim jQuery, lai vietnē izveidotu slaidrādi, tā saukto slīdni.

Lai to izdarītu, izmantosim spraudni Slides, ko izveidojis programmētājs Neitans Sērls, dizaina studijas "The Brigade" tehniskais direktors Portlendā, Oregonas štatā, ASV. Vēl viena viņa attīstība tika aprakstīta rakstā Fotogalerija tiešsaistes veikalam.

Spraudni Slaidi ir viegli instalēt, tam ir vairākas iespējas attēlu maiņai slaidrādē, un to bieži izmanto vietnes galvenē. Piemērs tam, kā šis slīdnis darbojas ar noklusējuma iestatījumiem, ir parādīts attēlā:

Slaidrādes instalēšana Slaidi

Kā vienmēr, vispirms vietnē izveidojiet skriptu mapi. Pēc tam jums ir nepieciešams lejupielādēt arhīvu un izsaiņot to izveidotajā mapē. Tajā būs divi skripti jquery-1.8.3.min.js un jquery.cycle.all.min.js.

Tālāk lapas nosaukumā tagā... ievietojam šādas rindas, kas norāda ceļu uz skriptiem un nelielu javascript, kas nosaka slaidrādes parametrus:

$(".slaidrāde").cycle((
fx: "izbalināt"
});
});

.slideshow(
platums: 200 pikseļi;
augstums: 135 pikseļi;
piemale: auto;
}

Kā redzat, ir arī vienkāršs CSS noteikums, kurā jums jānorāda nākamās slaidrādes attēlu loga izmērs (platums - augstums). Protams, visiem attēliem jābūt vienāda izmēra. Ja vēlaties, varat paplašināt CSS opcijas, pievienojot, piemēram, apmales, fonus, polsterējumu un citus elementus slaidrādes attēliem. Šajā gadījumā ir jānorāda kopējais izmērs, tas ir, attēls, kā arī atkāpes un apmales visā iestatītajā garumā un platumā.

Svarīga piezīme: Ja jūsu vietnē tiek izmantoti vairāki jQuery spraudņi, tad ērtāk ir pārvietot jquery.js failu (vēlams jaunāko versiju) uz saknes mapi, lai tas netiktu lejupielādēts vairākas reizes. Šajā gadījumā piekļuves līnija visiem spraudņiem izskatīsies vienādi. Jo īpaši mūsu piemērā tas izrādās šādi:

Nav ieteicams vienā lapā izmantot vairākas dažādas jQuery versijas, lai tās nekonfliktētu viena ar otru. Tajā pašā laikā noteikti pārbaudiet, vai spraudņi darbojas ar instalēto jQuery versiju, jo ne visas versijas ir savstarpēji aizstājamas.

Pēdējais solis ir attēlu ievietošana lapā. Arī šeit viss ir vienkārši. Ievietojiet attēlus tagā vai citā tagā, kas ļauj iestatīt platumu un augstumu, un norādiet to class="slideshow" . Mūsu piemērā slīdņa HTML kods izskatās šādi:

Šajā brīdī slaidrādes izveide ir gandrīz pabeigta, un jūs varat to apskatīt, atverot savu lapu pārlūkprogrammā.

Slaidrādes opciju iestatīšana Slaidi

Izveidotajā slaidrādē var iestatīt dažāda veida pārejas starp kadriem, mainot lapas galvenē ievietoto javascript. Turklāt, aizstājot skripta rindiņu sync:false ar sync:true , mainot attēlus, varat noņemt atstarpi.

Attēlu rādīšanas ilgumu kontrolē taimauta parametrs, bet ātrumu - ātruma parametrs. Piemēram, šeit ir vairākas izplatītas slaidrādes opcijas un atbilstošie skripti, kas jāievieto lapas galvenē.

1. Izšķīdināšana (mūsu piemērs): $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "izbalināt", //pārejas veids ātrums: 1000 , //attēla maiņas ātrums taimauts: 1000 //kadra ilgums }); });
2. Sajaukšana: $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "jaukt", sinhronizācija: nepatiesa, ātrums: 500 taimauts: 5000 }); });
3. Tālummaiņa: $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "tuvināt", sinhronizācija: nepatiesa }); });
4. Apvērst X vai Y asī: $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "curtainX", // rotācijai pa Y asi - aizkarsY sinhronizācija: nepatiesa }); });
5. Sakļaut vertikāli: $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "turnDown", // virzienu var iestatīt turnUp, turn Left, turnRight sinhronizācija: patiesa }); });
6. Ritināšana (nobīde): $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx:"scrollDown", // nobīdes virzienu var iestatīt scrollUp, scrollLeft, scrollRight sinhronizācija: patiesa }); });
7. Izbalināt pa labi: $(dokuments).ready(function() ( $(".slaidrāde").cycle(( fx: "vāciņš }); });

Dažreiz vienā vietnes lapā ir jāievieto vairākas slaidrādes opcijas, kā tas tiek darīts šajā rakstā. Lai to izdarītu, jums vienkārši jānorāda dažādas klases katrai opcijai rindā $(.slideshow").cycle(( (skatiet kodu tabulā iepriekš), un neaizmirstiet norādīt logu izmērus katrai klasei. CSS.

Ja slaidos ir tikai attēli, varat nedaudz mainīt struktūru:

Iepriekšējais Nākamais

Neaizmirstiet pievienot jēgpilnu vērtību alt atribūtam.

Lai izmantotu lapas saites, varat rīkoties šādi:

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

Iepriekšējais Nākamais 1 2 3

Ņemiet vērā atribūtu “data” izmantošanu — daži slaidrādes var ievietot attēlus kā fonu, un šie atribūti tiks izmantoti skriptā kā vietas, kur savienot fonu un slaidu.

Sarakstu izmantošana Semantiski pareiza pieeja būtu izmantot saraksta vienumus kā slaidus. Šajā gadījumā struktūra būs šāda:

Ja slaidu secība ir labi noteikta (piemēram, prezentācijā), varat izmantot numurētus sarakstus

CSS Sāksim ar šādu struktūru:

Iepriekšējais Nākamais

Jo Tā kā slaidrāde darbosies no labās puses uz kreiso pusi, ārējam konteineram būs noteikts izmērs, bet iekšējam būs platāks, jo tajā ir visi slaidi. Būs redzams pirmais slaids. Tas tiek iestatīts, izmantojot pārplūdi:

Slīdnis ( platums: 1024 pikseļi; pārplūde: paslēpts; ) .slider-wrapper ( platums: 9999 pikseļi; augstums: 683 pikseļi; pozīcija: relatīvs; pāreja: pa kreisi 500 ms lineāra; )

Iekšējā iesaiņojuma stili ietver:

Liels platums
- fiksēts augstums, maksimālais slidkalniņa augstums
- pozīcija: relatīva, kas ļaus izveidot slaidu kustību
- CSS pāreja pa kreisi, kas padarīs kustību gludu. Vienkāršības labad mēs neesam iekļāvuši visus prefiksus. Šim nolūkam varat izmantot arī CSS transformācijas (kopā ar tulkojumu).

Slaidiem ir peldēšanas atribūts, lai tie sastātos rindā. Tie ir novietoti salīdzinoši tā, lai jūs varētu iegūt to kreiso nobīdi JS. Mēs to izmantojam, lai izveidotu slīdošu efektu.

Slaids ( pludiņš: pa kreisi; pozīcija: relatīvs; platums: 1024 pikseļi; augstums: 683 pikseļi; )

Lai gan esam iestatījuši noteiktu platumu, skriptā varam to mainīt, reizinot slaidu skaitu ar slaida platumu. Jūs nekad nezināt, kāds platums jums varētu būt nepieciešams.

Navigācija tiek veikta, izmantojot pogas “Iepriekšējais” un “Nākamais”. Mēs atiestatām to noklusējuma stilus un piešķiram savus:

Slīdnis-nav ( augstums: 40 pikseļi; platums: 100%; malas augšdaļa: 1,5 em; ) .slider-nav poga ( apmale: nav; displejs: bloks; platums: 40 pikseļi; augstums: 40 pikseļi; kursors: rādītājs; teksta atkāpe : -9999em; fona krāsa: caurspīdīga; fona atkārtošana: bez atkārtošanas; ) .slider-nav button.slider-previous ( peldēšana: pa kreisi; fona attēls: url(iepriekšējais.png); ) .slider-nav poga .slider-next ( peldēt: pa labi; fona attēls: url(next.png); )

Izmantojot lapu saites, nevis pogas, varat izveidot šādus stilus:

Slīdnis-nav ( teksta līdzinājums: centrā; malas augšdaļa: 1,5 em; ) .slider-nav a (displejs: iekļauts bloks; teksta noformējums: nav; apmale: 1 pikseļi ciets #ddd; krāsa: #444; platums: 2 em; augstums: 2 em; līnijas augstums: 2; teksta līdzinājums: centrā; ) .slider-nav a.current ( apmales krāsa: #000; krāsa: #000; fonta svars: treknraksts; )

Šīs klases tiks piešķirtas dinamiski no skripta.

Šī pieeja ir piemērota slīdošajam efektam. Ja vēlamies panākt izbalēšanas efektu, mums ir jāmaina stili, jo pludiņš pievieno horizontālu polsterējumu starp slaidiem. Tas ir, mums nav nepieciešami slaidi vienā rindā - mums ir nepieciešama slaidu “paka”:

Slīdnis ( platums: 1024 pikseļi; margin: 2em auto; ) .slider-wrapper ( platums: 100%; augstums: 683 pikseļi; pozīcija: relatīvs; /* Izveido kontekstu absolūtai pozicionēšanai */ ) .slide ( pozīcija: absolūta; /* Visu slaidu absolūtā pozicionēšana */ platums: 100%; augstums: 100%; necaurredzamība: 0; /* Visi slaidi ir paslēpti */ pāreja: necaurredzamība 500 ms lineāra; ) /* Sākotnēji ir redzams tikai pirmais */ .slider- iesaiņojums >
Mēs izmantojam necaurredzamības rekvizītu, lai paslēptu slaidus, jo ekrāna lasītāji izlaidīs to elementu saturu, kuriem ir displejs: nav (skatiet sadaļu CSS darbībā: Neredzams saturs tikai ekrāna lasītāja lietotājiem).

Pateicoties CSS kontekstuālajai pozicionēšanai, mēs izveidojām slaidu “kaudzi”, pēdējam avota slaidam atrodoties priekšā pārējiem. Bet tas nav tas, kas mums vajadzīgs. Lai saglabātu slaidu secību, mums ir jāslēpj visi slaidi, izņemot pirmo.

JS izmanto CSS pāreju, mainot pašreizējā slaida necaurredzamības rekvizīta vērtību un atiestatot šo vērtību uz nulli visiem pārējiem.

JavaScript koda slaidrāde bez lappušu maiņas Slīdrāde bez lappušu maiņas darbojas, noklikšķinot uz pogas "Nākamais" un "Iepriekšējais". Tos var uzskatīt par pieauguma un samazināšanas operatoriem. Vienmēr ir rādītājs (vai kursors), kas tiks palielināts vai samazināts katru reizi, kad nospiežat pogas. Tā sākotnējā vērtība ir 0, un mērķis ir atlasīt pašreizējo slaidu tādā pašā veidā, kā tiek atlasīti masīva elementi.

Tātad, pirmo reizi noklikšķinot uz Tālāk, rādītājs palielinās par 1 un mēs iegūstam otru slaidu. Noklikšķinot uz Iepriekšējais, mēs samazinām rādītāju un iegūstam pirmo slaidu. utt.

Kopā ar rādītāju mēs izmantojam jQuery .eq() metodi, lai iegūtu pašreizējo slaidu. Tīrā JS formātā tas izskatās šādi:

Funkciju Slīdrāde(elements) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(.slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Atcerieties - NodeList indeksus izmanto tāpat kā masīvu. Vēl viens veids, kā atlasīt pašreizējo slaidu, ir CSS3 atlasītāji:

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

CSS3:nth-child() atlasītājs skaita elementus, sākot no 1, tāpēc rādītājam jāpievieno 1. Pēc slaida atlasīšanas tā vecākkonteiners ir jāpārvieto no labās uz kreiso pusi. Programmā jQuery varat izmantot .animate() metodi:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slaidi: ".slide", //... ātrums: 500, atvieglošana : "lineārs" ), opcijas); var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides, elements).eq(slide); $(options.wrapper, elements). animēt((kreisais) : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Parastā JS nav .animate() metodes, tāpēc mēs izmantojam CSS pārejas:

Slīdnis-iesaiņotājs (pozīcija: relatīva; // nepieciešamā pāreja: pa kreisi 500 ms lineāra; )

Tagad jūs varat dinamiski mainīt kreiso rekvizītu, izmantojot stila objektu:

Tagad mums ir jāizveido klikšķa notikums katrai vadīklai. Programmā jQuery varat izmantot .on() metodi, bet tīrā JS var izmantot metodi addEventListener().

Jums arī jāpārbauda, vai rādītājs ir sasniedzis saraksta robežas - 0 “Iepriekšējais” un kopējais slaidu skaits “Nākamais”. Katrā gadījumā jums ir jāslēpj atbilstošā poga:

(function($) ( $.fn.slideshow = function(options) ( opcijas = $.extend(( wrapper: ".slider-wrapper", slaidi: ".slide", iepriekšējais: ".slider-previous", nākamais) : ".slider-next", //... ātrums: 500, atvieglošana: "lineārs" ), opcijas); var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides, elements). eq(slide); $(options.wrapper, elements).animate((pa kreisi: - $currentSlide.position().left ), options.speed, options.easing; ); return this.each(function() ( var $element = $(šis), $iepriekšējais = $(opcijas.iepriekšējais, $elements), $nākamais = $(options.next, $element), indekss = 0, kopā = $(options.slides).garums; $next.on("klikšķis", funkcija() ( index++; $previous.show(); if(indekss == kopā - 1) ( indekss = kopā - 1; $next.hide(); ) slideTo(index, $elements); )); $iepriekšējais.on("klikšķis", funkcija() ( indekss--; $next.show(); if(indekss == 0) (indekss = 0; $iepriekšējais.slēpt(); ) slideTo(indekss, $elements); )); )); ); ))(jQuery);

Un tīrā JS tas izskatās šādi:

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"; ), darbības: function() ( var self = this; self.next.addEventListener("click", function()) ( self.index++; self.previous.style. displejs = "bloķēt"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "nav"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("klikšķis", funkcija() ( self.index--; self.next.style.display = "bloķēt"; if(self.index == 0) ( self. .index = 0;self.previous.style.display = "nav"; ) self._slideTo(self.index); ), nepatiess); ) );

Slaidrāde ar lappusēm Šāda veida slaidrādē katra saite ir atbildīga par vienu slaidu, tāpēc nav nepieciešams rādītājs. Animācijas nemainās; mainās veids, kā lietotājs pārvietojas pa slaidiem. jQuery mums būs šāds kods:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slaidi: ".slide", nav: ".slider-nav", ātrums) : 500, atvieglojums: "lineārs" ), opcijas); var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides, elements).eq(slaids); $(options.wrapper, elements). animēt(( pa kreisi: - $currentSlide.position().left ), options.speed, options.easing; ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("klikšķis", funkcija(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slaids, $elements); $a.addClass("pašreizējais").siblings(). removeClass("pašreizējais"); )); )); ))(jQuery);

Šajā gadījumā katrs enkurs atbilst konkrēta slaida ID. Tīrā JS varat izmantot gan to, gan datu atribūtu, kas saglabā slaidu skaitlisko indeksu NodeList iekšpusē:

Funkciju Slīdnis(elements) ( 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 = ""; } } } };

Kopš IE10 jūs varat pārvaldīt nodarbības, izmantojot classList:

Link.classList.add("pašreizējais");

Un ar IE11 datu atribūtus var iegūt, izmantojot datu kopas rekvizītu:

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

Lappuses slaidrādes ar vadīklām Šīs slaidrādes rada zināmu sarežģītību kodam — jums ir jāapvieno indeksa un lappušu jaukšanas izmantošana. Tas nozīmē, ka pašreizējais slaids ir jāatlasa, pamatojoties gan uz rādītāja pozīciju, gan slaidu, kas atlasīts, izmantojot saites.

To var sinhronizēt, izmantojot katras saites numuru indeksu DOM. Viena saite - viens slaids, tāpēc to indeksi būs 0, 1, 2 utt.

JQuery kods būs šāds:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... lappušu skaits: ".slider-pagination", //... ), opcijas); $. fn.slideshow.index = 0; atgriež this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("klikšķis", funkcija(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM skaitliskais indekss $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == kopā - 1) ( $.fn.slideshow.index = kopā - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indekss, $elements); $a.addClass("pašreizējais"). siblings().removeClass("pašreizējais"); )); )); ); //... ))(jQuery);

Uzreiz var redzēt, ka ir mainījusies kursora redzamība – indekss tagad ir deklarēts kā slaidrādes objekta īpašums. Tādā veidā mēs izvairāmies no tvēruma problēmām, ko var radīt atzvanīšana programmā jQuery. Kursors tagad ir pieejams visur, pat ārpus spraudņa nosaukumvietas, jo tas ir deklarēts kā slaidrādes objekta publisks īpašums.

Metode .index() sniedz katras saites skaitlisko indeksu.

Tīrā JS šādas metodes nav, tāpēc ir vieglāk izmantot datu atribūtus:

Tagad mēs varam savienot savas procedūras ar atsaucēm un izmantot tikko izveidotos datu atribūtus:

Darbības: 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 = "bloķēt"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "nav "; ) else ( self.next.style.display = "bloķēt"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), nepatiess); ) )

Izpratne par izmēriem Atgriezīsimies pie šāda CSS kārtula:

Slīdnis-iesaiņotājs (platums: 9999 pikseļi; augstums: 683 pikseļi; pozīcija: relatīvs; pāreja: pa kreisi 500 ms lineāra; )

Ja mums ir daudz slaidu, tad ar 9999 var nepietikt. Slaidu izmēri ir jāpielāgo, pamatojoties uz katra slaida platumu un slaidu skaitu.

Programmā jQuery tas ir vienkārši:

// Pilna platuma slaidrādi atgriež this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * kopā); //... ));

Paņemiet loga platumu un iestatiet katra slaida platumu. Iekšējā apvalka kopējo platumu iegūst, reizinot loga platumu un slaidu skaitu.

// Fiksēta platuma slaidrāde atgriež this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * kopā); //... ));

Šeit sākotnējais platums ir iestatīts uz katra slaida platumu. Jums vienkārši jāiestata iesaiņojuma kopējais platums.

Tagad iekšējais konteiners ir pietiekami plats. Tīrā JS tas tiek darīts aptuveni tādā pašā veidā:

// Pilna platuma slaidrāde 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 platums var winWidth = logs .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"; }, //... };

Izbalēšanas efekti Izbalēšanas efektus bieži izmanto slaidrādēs. Pašreizējais slaids pazūd un tiek parādīts nākamais. jQuery ir fadeIn() un fadeOut() metodes, kas darbojas gan ar necaurredzamības, gan displeja īpašībām, tāpēc elements tiek noņemts no lapas, kad animācija ir pabeigta (display:none).

Tīrā JS versijā vislabāk ir strādāt ar necaurredzamības rekvizītu un izmantot CSS pozicionēšanas steku. Tad sākotnēji slaids būs redzams (necaurredzamība: 1), bet pārējie tiks paslēpti (necaurredzamība: 0).

Šo metodi parāda šāds stilu kopums:

Slīdnis ( platums: 100%; pārplūde: slēpts; pozīcija: relatīvs; augstums: 400 pikseļi; ) .slīdnis-iesaiņotājs ( platums: 100%; augstums: 100%; pozīcija: relatīvs; ) .slaids ( pozīcija: absolūts; platums: 100 %; augstums: 100%; necaurredzamība: 0; ) .slider-wrapper > .slide:first-child (necaurredzamība: 1; )

Tīrā JS jums jāreģistrē katra slaida CSS pāreja:

Slaids (pludiņš: pa kreisi; pozīcija: absolūts; platums: 100%; augstums: 100%; necaurredzamība: 0; pāreja: necaurredzamība 500 ms lineāra; )

Izmantojot jQuery, lai izmantotu fadeIn() un fadeOut() metodes, ir jāmaina necaurredzamība un displejs:

Slaids ( pludiņš: pa kreisi; pozīcija: absolūts; platums: 100%; augstums: 100%; displejs: nav; ) .slider-wrapper > .slide:first-child ( displejs: bloks; )

JQuery kods ir šāds:

(function($) ( $.fn.slideshow = function(options) ( opcijas = $.extend(( wrapper: ".slider-wrapper", iepriekšējais: ".slider-previous", nākamais: ".slider-next") , slaidi: ".slide", nav: ".slider-nav", ātrums: 500, atvieglošana: "lineārs" ), opcijas); var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides , elements).eq(slide); $currentSlide. animēt((necaurredzamība: 1 ), opcijas.ātrums, opcijas.vieglināšana). siblings(options.slides). css("necaurredzamība", 0); ); //. .. ); ))(jQuery);

Animējot necaurredzamību, jums ir jāmaina arī šī īpašuma vērtības atlikušajiem slaidiem.

JavaScript valodā tas būtu:

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

Multivides elementi: Video Mēs varam iekļaut video slaidrādē. Šeit ir Vimeo video slaidrādes piemērs:

Videoklipi tiek iekļauti, izmantojot iframe. Šis ir tāds pats nomaināms iekļautais bloks kā attēlā. Nomaināms – jo saturs ir ņemts no ārēja avota.

Lai izveidotu pilnas lapas slaidrādi, jums ir jāmaina stili šādi:

Html, pamatteksts ( piemale: 0; polsterējums: 0; augstums: 100%; minimālais augstums: 100%; /* Augstumam jābūt visai lapai */ ) .slider ( platums: 100%; pārplūde: paslēpts; augstums: 100 %; min-augstums: 100%; /* Augstums un platums līdz pilnam */ pozīcija: absolūta; /* Absolūtā pozicionēšana */ ) .slīdnis-wrapper (platums: 100%; augstums: 100%; /* Augstums un platums līdz pilns */ pozīcija: relatīvs; ) .slide ( peldēt: pa kreisi; pozīcija: absolūts; platums: 100%; augstums: 100%; ) .slide iframe ( displejs: bloks; /* Bloka elements */ pozīcija: absolūts; /* Absolūtā pozicionēšana */ platums: 100%; augstums: 100%; /* Pilns augstums un platums */ )

Automātiskās slaidrādes Automātiskās slaidrādes izmanto taimerus. Katru reizi, kad tiek izsaukta taimera funkcija setInterval(), kursors tiks palielināts par 1 un tādējādi tiks atlasīts nākamais slaids.

Kad kursors sasniedz maksimālo slaidu skaitu, tas ir jāatiestata.

Bezgalīgas slaidrādes lietotājiem ātri kļūst garlaicīgas. Labākā prakse ir apturēt animāciju, kad lietotājs virza kursoru virs tās, un atsākt, kad kursors attālinās.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slaidi: ".slide", ātrums: 3000, atvieglošana: "lineārs" ), opcijas); var taimeris = null; // Taimeris var indekss = 0; // Kursors var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides, elements).eq(slide); $currentSlide.stop(true, true). animēt (( necaurredzamība: 1 ), opcijas.ātrums, opcijas. atvieglošana). siblings(options.slides). css("necaurredzamība", 0); ); var autoSlide = function(element) ( // Inicializēt secības taimeri = setInterval ( function() ( index++; // Palieliniet kursoru par 1 if(index == $(options.slides, element).length) ( index = 0; // Atiestatīt kursoru ) slideTo(index, element); ), options.speed ); // Tas pats intervāls, kas metodē.animate() ); var startStop = function(element) ( element.hover(function() ( // Apturēt animāciju clearInterval(timer); taimeris = null); ), funkcija () ( autoSlide(element); // Atsākt animāciju )); ); return this.each(function() ( var $element = $(this); autoSlide($elements); startStop($elements); )); ); ))(jQuery);

Abi .stop() metodes parametri ir iestatīti uz True, jo mums nav jāizveido animācijas rinda no mūsu secības.

Tīrā JS kods kļūst vienkāršāks. Mēs reģistrējam CSS pāreju katram slaidam ar noteiktu ilgumu:

Slaids (pāreja: necaurredzamība 3 s lineāra; /* 3 sekundes = 3000 milisekundes */ )

Un kods būs šāds:

Tastatūras navigācija Uzlabotās slīdrādes piedāvā tastatūras navigāciju, t.i. Ritiniet slaidus, nospiežot taustiņus. Mums tas vienkārši nozīmē, ka mums ir jāreģistrē taustiņu nospiešanas notikuma apstrāde.

Lai to izdarītu, mēs piekļūsim notikuma objekta rekvizītam keyCode. Tas atgriež nospiestā taustiņa kodu (kodu sarakstu).

Tos notikumus, kurus pievienojām pogām “Iepriekšējais” un “Nākamais”, tagad var pievienot taustiņiem “kreisais” un “labais”. jQuery:

$("body").on("keydown", function(e) ( var kods = e.keyCode; if(kods == 39) ( // Kreisā bultiņa $next.trigger("klikšķis"); ) if( kods == 37) ( // Labā bultiņa $previous.trigger("klikšķis"); ) ));

Tīrā JS formātā vienkāršās .trigger() metodes vietā būs jāizmanto dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var kods = e.keyCode; var evt = new MouseEvent("klikšķis"); // peles klikšķis if(kods == 39) ( // Kreisā bultiņa self .next.dispatchEvent(evt); ) if(code == 37) ( // Labā bultiņa self.previous.dispatchEvent(evt); ) ), false);

Pienācīgos projektos to nav pieņemts darīt. Mums būtu jādefinē funkcionalitāte, kas nodrošina apvēršanu publiskajā metodē, un pēc tam tā jāizsauc, kad tiek noklikšķināts uz pogas. Tad, ja citai programmas daļai būtu nepieciešams ieviest šo funkcionalitāti, nebūtu nepieciešams emulēt DOM notikumus, bet varētu vienkārši izsaukt šo metodi.

Atzvani Būtu jauki, ja jebkurai slaidrādes darbībai, kas tiktu izpildīta, kad šī darbība tiktu veikta, varētu pievienot kodu. Tas ir atzvanīšanas funkciju mērķis – tās tiek izpildītas tikai tad, kad notiek noteikta darbība. Pieņemsim, ka mūsu slaidrādei ir paraksti, un tie pēc noklusējuma ir paslēpti. Animācijas laikā mums ir jāparāda pašreizējā slaida paraksts vai pat kaut kas ar to jādara.

Programmā jQuery varat izveidot šādu atzvanīšanu:

(function($) ( $.fn.slideshow = funkcija(opcijas) ( opcijas = $.extend(( //... callback: function() () ), ), opcijas); var slideTo = funkcija(slaids, elements) ( var $currentSlide = $(options.slides, elements).eq(slide); $currentSlide. animate((necaurredzamība: 1 ), options.speed, options.easing, // Atzvans pašreizējam slaidam options.callback($ currentSlide)). siblings(options.slides). css("necaurredzamība", 0); ); //... ); ))(jQuery);

Šajā gadījumā atzvanīšana ir funkcija no .animate(), kas izmanto pašreizējo slaidu kā argumentu. Lūk, kā to varat izmantot:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent();); // Parāda pašreizējo parakstu un paslēpj pārējos $wrapper.find (" .slide-caption").hide(); slide.find(.slide-caption").show("slow"); ) )); ));

Tīrā JS formātā:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Mūsu atzvanīšana this.el = document.querySelector(element); this.init(); ) Slaidrāde. prototips = ( init: function() ( //... this.slides = this.el.querySelectorAll(.slide"); //... //... ), _slideTo: function(slide) ( var self = šis; var currentSlide = self.slides; currentSlide.style.capacity = 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); // Вызывает функцию по окончанию перехода } }; // })();

Atzvanīšanas funkcija ir definēta kā otrais konstruktora parametrs. Varat to izmantot šādi:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Parāda pašreizējo parakstu un paslēpj pārējos var allSlides = wrapper. querySelectorAll(.slide"); var caption = slide.querySelector(.slide-caption"); caption.classList.add("redzams"); 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"); } } }); });

Ārējās API Līdz šim mūsu darba scenārijs ir vienkāršs: visi slaidi jau ir dokumentā. Ja mums tajā jāievieto dati no ārpuses (YouTube, Vimeo, Flickr), mums ir jāaizpilda slaidi, saņemot ārēju saturu.

Tā kā atbilde no trešās puses servera var nebūt tūlītēja, jums ir jāievieto ielādes animācija, lai parādītu, ka process notiek:

Iepriekšējais Nākamais

Tas var būt gif vai tīra CSS animācija:

#spinner (apmales rādiuss: 50%; apmale: 2px solid #000; augstums: 80px; platums: 80px; pozīcija: absolūtā; augšā: 50%; pa kreisi: 50%; mala: -40px 0 0 -40px; ) # spinner:after ( saturs: ""; pozīcija: absolūta; fona krāsa: #000; augšpusē: 2 pikseļi; pa kreisi: 48%; augstums: 38 pikseļi; platums: 2 pikseļi; apmales rādiuss: 5 pikseļi; -webkit-transform-origin: 50% 97%; transformācijas izcelsme: 50% 97%; -webkit-animācija: leņķiskais 1s lineārs bezgalīgs; animācija: leņķiskais 1s lineārs bezgalīgs; ) @-webkit-keyframes leņķiskais ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360de);) ) @keyframes leņķiskais ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360de);) ) #spinner:before ( saturs: ""; pozīcija: absolūta; fona krāsa: #000; augšdaļa: 6 pikseļi; pa kreisi: 48%; augstums: 35 pikseļi; platums: 2 pikseļi; apmales rādiuss: 5 pikseļi; -webkit-transform-origin: 50% 94% ; transformācijas izcelsme: 50% 94%; -webkit-animācija: ptangular 6s lineāra bezgalīga; animācija: ptangular 6s lineāra bezgalīga; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360de);) ) @keyframes ptangular (0%(transform:rotate(0deg);) 100%(transform:rotate(360de);) )

Darbības būs šādas:
- pieprasīt datus no ārpuses
- paslēpt sāknēšanas programmu
- parsēt datus
- veidot HTML
- parādīt slaidrādi
- apstrādāt slaidrādes

Pieņemsim, ka mēs atlasām lietotāja jaunākos videoklipus no pakalpojuma YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limits: 5, lietotājvārds: "learncodeacademy" ), opcijas); //... var getVideos = function() ( // Iegūstiet videoklipus no YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Iegūstiet videoklipu kā JSON objektu $(options.loader). hide( ); // Ielādētāja slēpšana 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);

Tīrā JavaScript ir papildu darbība — izveidojiet metodi JSON iegūšanai:

Tad procedūras ir līdzīgas:

(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) ( atzvanīšana = atzvanīšana || funkcija (); var pieprasījums = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); pieprasījums .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON objekta atzvanīšana(dati); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Iegūt 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) ( // Iegūstiet videoklipu kā JSON objektu var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "nav"; // Iekrāvēja slēpšana 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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки