Sukurkite skaidrių demonstraciją naudodami javascript šablonus. Fotolaboratorija. Slidr valdikliai

Skaidrių demonstravimo kūrimo programų apžvalga Svetainės skaidrių demonstracijos kūrimas

Kuriant skaidrių demonstraciją, skirtą paskelbti svetainėje, geriausia naudoti paruoštus programinės įrangos sprendimus. Mano nuomone, geriausias ir lengviausias variantas yra naudoti jQuery – specialią nemokamą scenarijų biblioteką (mažas JavaScript programas). Ankstesniuose straipsniuose jau buvo kalbama apie šį nuostabų žiniatinklio kūrimo įrankį. Pavyzdžiui, žiūrėkite straipsnį Nuotraukų galerija jQuery- paprasta ir gražu! . Dabar naudodami jQuery sukurkime skaidrių demonstraciją svetainėje, vadinamąjį slankiklį.

Tam naudosime įskiepį Slides, sukurtą programuotojo Nathano Searleso, dizaino studijos „The Brigade“ Portlande, Oregone, JAV techninio direktoriaus. Kitas jo pasiekimas buvo aprašytas straipsnyje Internetinės parduotuvės nuotraukų galerija.

Skaidrių papildinį lengva įdiegti, jis turi keletą vaizdų keitimo skaidrių demonstravimo parinkčių ir dažnai naudojamas svetainės antraštei. Pavyzdys, kaip šis slankiklis veikia su numatytaisiais nustatymais, parodytas paveikslėlyje:

Skaidrių demonstravimo diegimas Skaidrės

Kaip visada, pirmiausia svetainėje sukurkite scenarijų aplanką. Tada turite atsisiųsti archyvą ir išpakuoti jį į sukurtą aplanką. Jame bus du scenarijai jquery-1.8.3.min.js ir jquery.cycle.all.min.js.

Toliau į puslapio pavadinimą žymos viduje įterpiame šias eilutes, kurios nurodo scenarijų kelią ir nedidelį javascript, kuris apibrėžia skaidrių demonstravimo parametrus:

$(".skaidrių demonstracija").cycle((
fx: "išnykti"
});
});

.slideshow(
plotis: 200 pikselių;
aukštis: 135px;
paraštė: auto;
}

Kaip matote, yra ir paprasta CSS taisyklė, kurioje reikia nurodyti būsimos skaidrių demonstracijos vaizdų lango dydį (plotis – aukštis). Natūralu, kad visi vaizdai turi būti vienodo dydžio. Jei norite, galite išplėsti CSS parinktis pridėdami, pavyzdžiui, kraštinių, fonų, užpildymo ir kitų skaidrių demonstravimo vaizdų elementų. Tokiu atveju turite nurodyti bendrą dydį, ty vaizdą, pridėjus įtraukas ir kraštines išilgai jūsų nustatyto ilgio ir pločio.

Svarbi pastaba: Jei jūsų svetainėje naudojami keli jQuery įskiepiai, patogiau perkelti failą jquery.js (geriausia naujausią versiją) į šakninį aplanką, kad nebūtų atsisiunčiama kelis kartus. Tokiu atveju prieigos prie jos eilutė visiems papildiniams atrodys vienoda. Visų pirma, mūsų pavyzdyje tai atrodo taip:

Tame pačiame puslapyje nerekomenduojama naudoti kelių skirtingų jQuery versijų, kad jos neprieštarautų viena kitai. Tuo pačiu metu būtinai patikrinkite, ar papildiniai veikia su įdiegta jQuery versija, nes ne visas versijas galima pakeisti.

Paskutinis veiksmas yra įdėti paveikslėlius puslapyje. Čia taip pat viskas paprasta. Įdėkite vaizdus į žymą ar kitą žymą, kuri leidžia nustatyti plotį ir aukštį, ir nurodykite jo class="slideshow" . Mūsų pavyzdyje slankiklio HTML kodas atrodo taip:

Šiuo metu skaidrių demonstravimas yra beveik baigtas ir galite jį peržiūrėti atidarę puslapį naršyklėje.

Skaidrių demonstravimo parinkčių nustatymas Skaidrės

Sukurtoje skaidrių demonstracijoje galite nustatyti įvairių tipų perėjimus tarp kadrų, pakeisdami puslapio antraštėje esantį javascript. Be to, scenarijuje pakeitę eilutę sync:false į sync:true , keisdami vaizdus galite pašalinti tarpą.

Vaizdų rodymo trukmę valdo skirtojo laiko parametras, o greitį – greičio parametrą. Pavyzdžiui, čia pateikiamos kelios įprastos skaidrių demonstravimo parinktys ir atitinkami scenarijai, kurie turėtų būti įterpti į puslapio antraštę.

1. Ištirpinimas (mūsų pavyzdys): $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "išnyks", //perėjimo tipas greitis: 1000 , //vaizdo keitimo greitis skirtasis laikas: 1000 //kadro trukmė }); });
2. Maišymas: $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "maišyti", sinchronizavimas: klaidingas, greitis: 500 skirtasis laikas: 5000 }); });
3. Mastelio keitimas: $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "didinti", sinchronizavimas: klaidingas }); });
4. Apverskite X arba Y ašį: $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "curtainX", // sukimui išilgai Y ašies - uždangaY sinchronizavimas: klaidingas }); });
5. Sutraukti vertikaliai: $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "turnDown", // kryptį galima nustatyti turnUp, turn Left, turnRight sinchronizavimas: tiesa }); });
6. Slinkimas (poslinkis): $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx:"scrollDown", // galima nustatyti poslinkio kryptį scrollUp, scrollLeft, scrollRight sinchronizavimas: tiesa }); });
7. Išblukti į dešinę: $(document).ready(function() ( $(".skaidrių demonstracija").cycle(( fx: "viršelis }); });

Kartais viename svetainės puslapyje reikia įdėti kelias skaidrių demonstravimo parinktis, kaip tai daroma šiame straipsnyje. Norėdami tai padaryti, jums tereikia nurodyti skirtingas klases kiekvienai parinkčiai eilutėje $(.slideshow").cycle(( (žr. kodą aukščiau esančioje lentelėje), ir nepamirškite nurodyti kiekvienos klasės langų dydžių CSS.

Jei skaidrėse yra tik nuotraukos, galite šiek tiek pakeisti struktūrą:

Ankstesnis Kitas

Nepamirškite pridėti reikšmingos vertės alt atributui.

Norėdami naudoti puslapio nuorodas, galite atlikti šiuos veiksmus:

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

Ankstesnis Kitas 1 2 3

Atkreipkite dėmesį į „duomenų“ atributų naudojimą – kai kurios skaidrių demonstracijos gali įterpti paveikslėlius kaip foną, o šie atributai scenarijuje bus naudojami kaip fono ir skaidrės sujungimo vietos.

Sąrašų naudojimas Semantiškai teisingas būdas būtų naudoti sąrašo elementus kaip skaidres. Šiuo atveju struktūra bus tokia:

Jei skaidrių tvarka yra gerai apibrėžta (pavyzdžiui, pristatyme), galite naudoti sunumeruotus sąrašus

CSS Pradėkime nuo tokios struktūros:

Ankstesnis Kitas

Nes Kadangi skaidrių demonstravimas bus rodomas iš dešinės į kairę, išorinis konteineris bus fiksuoto dydžio, o vidinis bus platesnis, nes jame yra visos skaidrės. Bus matoma pirmoji skaidrė. Tai nustatoma per perpildymą:

Slankiklis ( plotis: 1024 pikseliai; perpildymas: paslėptas; ) .slankiklis-apvyniotuvas ( plotis: 9999 pikseliai; aukštis: 683 pikseliai; padėtis: santykinis; perėjimas: kairėn 500 ms linijinis; )

Vidinio įvyniojimo stiliai apima:

Didelis plotis
- fiksuotas aukštis, maksimalus čiuožimo aukštis
- padėtis: santykinė, kuri leis sukurti slydimo judesį
- CSS perėjimas į kairę, todėl judėjimas bus sklandus. Paprastumo dėlei neįtraukėme visų priešdėlių. Tam taip pat galite naudoti CSS transformacijas (kartu su vertimu).

Skaidrės turi plūduriavimo atributą, kad jos išsirikiuotų. Jie yra išdėstyti santykinai taip, kad galėtumėte gauti jų kairįjį poslinkį JS. Mes naudojame jį slydimo efektui sukurti.

Skaidrė (slankioji: kairė; padėtis: santykinė; plotis: 1024 pikseliai; aukštis: 683 pikseliai; )

Nors nustatėme tam tikrą plotį, scenarijuje galime jį pakeisti skaidres padauginę iš skaidrės pločio. Niekada nežinote, kokio pločio jums gali prireikti.

Naršymas vykdomas mygtukais „Ankstesnis“ ir „Kitas“. Iš naujo nustatome jų numatytuosius stilius ir priskiriame savo:

Slankiklis-nav ( aukštis: 40 piks.; plotis: 100 %; paraštės viršuje: 1,5 em; ) .slankiklio-nav mygtukas ( kraštinė: nėra; ekranas: blokas; plotis: 40 piks.; aukštis: 40 piks.; žymeklis: žymeklis; teksto įtrauka : -9999em; fono spalva: skaidrus; fono kartojimas: nesikartoti; ) .slider-nav button.slider-previous ( float: left; background-image: url(previous.png); ) .slider-nav mygtukas .slider-next ( float: dešinėn; background-image: url(next.png); )

Vietoj mygtukų naudodami puslapių nuorodas galite sukurti šiuos stilius:

Slankiklis-nav (teksto lygiavimas: centre; paraštės viršus: 1,5 em; ) .slider-nav a ( ekranas: eilutinis blokas; teksto dekoravimas: nėra; kraštinė: 1 piks. vientisas #ddd; spalva: #444; plotis: 2em; aukštis: 2em; linijos aukštis: 2; teksto lygiavimas: centre; ) .slider-nav a.current (kraštinės spalva: #000; spalva: #000; šrifto svoris: paryškintas; )

Šios klasės bus dinamiškai priskiriamos pagal scenarijų.

Šis metodas tinka slydimo efektui. Jei norime pasiekti išblukimo efektą, turime pakeisti stilius, nes float prideda horizontalų užpildymą tarp skaidrių. Tai reiškia, kad mums nereikia skaidrių vienoje eilutėje - mums reikia skaidrių „paketo“:

Slankiklis ( plotis: 1024 pikseliai; paraštė: 2em automatinis; ) .slider-wrapper ( plotis: 100 %; aukštis: 683 pikseliai; padėtis: santykinis; /* Sukuria absoliučios padėties nustatymo kontekstą */ ) .slide ( padėtis: absoliuti; /* Absoliuti visų skaidrių padėtis */ plotis: 100%; aukštis: 100%; neskaidrumas: 0; /* Visos skaidrės paslėptos */ perėjimas: neskaidrumas 500 ms linijinis; ) /* Iš pradžių matoma tik pirmoji */ .slider- įvynioklis>
Skaidrėms paslėpti naudojame nepermatomumo ypatybę, nes ekrano skaitytuvai praleis elementų, kuriuose yra ekranas: nėra, turinį (žr. CSS veikia: nematomas turinys tik ekrano skaitytuvo naudotojams).

CSS kontekstinės padėties nustatymo dėka sukūrėme skaidrių „krūvą“, o paskutinė šaltinio skaidrė buvo prieš kitas. Bet ne to mums reikia. Norėdami išlaikyti skaidrių tvarką, turime paslėpti visas skaidres, išskyrus pirmąją.

JS naudoja CSS perėjimą, pakeisdamas dabartinės skaidrės neskaidrumo ypatybės vertę ir iš naujo nustatydamas šią vertę į nulį visoms kitoms.

„JavaScript“ kodo skaidrių demonstracija be puslapių numeravimo Skaidrių demonstracija be puslapių numeravimo veikia paspaudus mygtukus „Kitas“ ir „Ankstesnis“. Jie gali būti laikomi didinimo ir mažinimo operatoriais. Visada yra žymeklis (arba žymeklis), kuris bus padidintas arba sumažintas kiekvieną kartą paspaudus mygtukus. Pradinė jo reikšmė yra 0, o tikslas yra pasirinkti dabartinę skaidrę taip pat, kaip pasirenkami masyvo elementai.

Taigi, kai pirmą kartą spustelėjame Next, žymeklis padidėja 1 ir gauname antrą skaidrę. Spustelėję Ankstesnis, sumažiname žymeklį ir gauname pirmąją skaidrę. ir kt.

Kartu su žymekliu naudojame jQuery .eq() metodą, kad gautume dabartinę skaidrę. Grynajame JS tai atrodo taip:

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

Atminkite – NodeList indeksus naudoja kaip masyvą. Kitas būdas pasirinkti dabartinę skaidrę yra CSS3 parinkikliai:

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

CSS3:nth-child() parinkiklis skaičiuoja elementus nuo 1, todėl prie žymeklio reikia pridėti 1. Pasirinkus skaidrę, jos pirminis konteineris turi būti perkeltas iš dešinės į kairę. JQuery galite naudoti .animate() metodą:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", skaidrės: ".slide", //... greitis: 500, palengvinimas) : "linijinis" ), parinktys); var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left) : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Įprastame JS nėra .animate() metodo, todėl naudojame CSS perėjimus:

Slankiklis-apvyniotuvas ( padėtis: santykinė; // reikalingas perėjimas: kairėn 500 ms linijinis; )

Dabar galite dinamiškai pakeisti kairiąją ypatybę naudodami stiliaus objektą:

Dabar turime sukurti kiekvieno valdiklio paspaudimo įvykį. JQuery galite naudoti .on() metodą, o gryname JS galite naudoti addEventListener() metodą.

Taip pat turite patikrinti, ar žymeklis pasiekė sąrašo ribas – 0 „Ankstesnis“ ir bendras skaidrių skaičius „Kitas“. Kiekvienu atveju turite paslėpti atitinkamą mygtuką:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", skaidrės: ".slide", ankstesnis: ".slider-previous", kitas) : ".slider-next", //... greitis: 500, palengvinimas: "linijinis" ), parinktys); var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing; ); return this.each(function() ( var $element = $(šis), $ankstesnis = $(parinktys.ankstesnis, $elementas), $kitas = $(parinktys.next, $elementas), indeksas = 0, iš viso = $(parinktys.skaidriai).ilgis; $next.on("paspaudimas", funkcija() ( index++; $previous.show(); if(indeksas == iš viso - 1) ( indeksas = iš viso - 1; $next.hide(); ) slideTo(index, $elementas); )); $ankstesnis.on("paspaudimas", funkcija() ( index--; $next.show(); if(index == 0) (indeksas = 0; $ankstesnis.slėpti(); ) slideTo(indeksas, $elementas); )); )); ); ))(jQuery);

Ir gryname JS tai atrodo taip:

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"; ), veiksmai: function() ( var self = this; self.next.addEventListener("click", function()) ( self.index++; self.previous.style. display = "blokuoti"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "nėra"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("spustelėti", funkcija() ( self.index--; self.next.style.display = "blokuoti"; if(self.index == 0) ( self. .index = 0;self.previous.style.display = "nėra"; ) self._slideTo(self.index); ), klaidingas); ) );

Puslapių skaidrių demonstravimas Šio tipo skaidrių demonstracijoje kiekviena nuoroda yra atsakinga už vieną skaidrę, todėl rodyklės nereikia. Animacijos nesikeičia; tai, kaip vartotojas juda skaidrėse, keičiasi. „jQuery“ turės šį kodą:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", skaidrės: ".slide", nav: ".slider-nav", greitis) : 500, palengvinimas: "linijinis" ), parinktys); var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides, element).eq(skaidrė); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing; ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($skaidr, $elementas); $a.addClass("current").siblings(). removeClass("dabartinis"); )); )); ))(jQuery);

Šiuo atveju kiekvienas inkaras atitinka konkrečios skaidrės ID. Grynajame JS galite naudoti ir jį, ir duomenų atributą, kuris išsaugo skaitinį skaidrės indeksą 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(); ), naršyti: 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 = ""; } } } };

Nuo IE10 galite valdyti klases per classList:

Link.classList.add("dabartinis");

O naudojant IE11 duomenų atributus galima gauti naudojant duomenų rinkinio nuosavybę:

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

Puslapių skaidrių demonstracijos su valdikliais Šios skaidrių demonstracijos suteikia kodui tam tikro sudėtingumo – turite derinti indekso ir puslapio maišos naudojimą. Tai reiškia, kad dabartinė skaidrė turi būti pasirinkta pagal žymeklio padėtį ir skaidrę, pasirinktą per nuorodas.

Tai galima sinchronizuoti naudojant kiekvienos DOM nuorodos skaičių indeksą. Viena nuoroda – viena skaidrė, todėl jų indeksai bus 0, 1, 2 ir t.t.

„jQuery“ kodas bus toks:

(function($) ( $.fn.slideshow = function(parinktys) ( options = $.extend(( //... puslapių skaičius: ".slider-pagination", //... ), parinktys); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("paspaudimas", funkcija(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM skaitmeninis indeksas $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == iš viso - 1) ( $.fn.slideshow.index = iš viso - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indeksas, $elementas); $a.addClass("dabartinis"). siblings().removeClass("dabartinis"); )); )); ); //... ))(jQuery);

Iš karto matosi, kad pasikeitė žymeklio matomumas – indeksas dabar deklaruojamas kaip skaidrių demonstravimo objekto savybė. Taip išvengiame apimties problemų, kurias gali sukurti jQuery atgaliniai skambučiai. Dabar žymeklis pasiekiamas visur, net ir už papildinio vardų erdvės ribų, nes jis deklaruojamas kaip viešoji skaidrių demonstravimo objekto nuosavybė.

.index() metodas pateikia kiekvienos nuorodos skaitinę indeksą.

Grynajame JS tokio metodo nėra, todėl lengviau naudoti duomenų atributus:

Dabar galime susieti procedūras su nuorodomis ir naudoti ką tik sukurtus duomenų atributus:

Veiksmai: function() ( var self = tai; //... 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 = "blokuoti"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "nėra "; ) else ( self.next.style.display = "blokuoti"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), klaidingas); ) )

Matmenų supratimas Grįžkime prie šios CSS taisyklės:

Slankiklis-apvyniotuvas (plotis: 9999 pikseliai; aukštis: 683 pikseliai; padėtis: santykinė; perėjimas: kairėn 500 ms linijinis; )

Jei turime daug skaidrių, 9999 gali nepakakti. Turite koreguoti skaidrių dydžius, atsižvelgdami į kiekvienos skaidrės plotį ir skaidrių skaičių.

„jQuery“ tai paprasta:

// Viso pločio skaidrių demonstracija grąžina this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(langas).width()); $(options.wrapper, $element).width($(window).width() * viso); //... ));

Paimkite lango plotį ir nustatykite kiekvienos skaidrės plotį. Bendras vidinio apvalkalo plotis gaunamas padauginus lango plotį ir skaidrių skaičių.

// Fiksuoto pločio skaidrių demonstracija grąžina this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * iš viso); //... ));

Čia pradinis plotis nustatomas pagal kiekvienos skaidrės plotį. Jums tereikia nustatyti bendrą apvalkalo plotį.

Dabar vidinis konteineris yra pakankamai platus. Grynajame JS tai daroma maždaug taip pat:

// Viso pločio skaidrių demonstracija 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; // Peržiūros srities plotis var winWidth = langas .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"; }, //... };

Išblukimo efektai Išblukimo efektai dažnai naudojami skaidrių demonstravimo metu. Dabartinė skaidrė išnyksta ir atsiranda kita. „jQuery“ turi fadeIn() ir fadeOut() metodus, kurie veikia su neskaidrumo ir rodymo savybėmis, todėl elementas pašalinamas iš puslapio, kai animacija baigta (display:none).

Naudojant gryną JS, geriausia dirbti su neskaidrumo ypatybe ir naudoti CSS padėties nustatymo krūvą. Tada iš pradžių skaidrė bus matoma (neskaidrumas: 1), o kitos bus paslėptos (neskaidrumas: 0).

Šis stilių rinkinys demonstruoja šį metodą:

Slankiklis ( plotis: 100 %; perpildymas: paslėptas; padėtis: santykinis; aukštis: 400 pikselių; ) .slankiklis-apvyniotuvas ( plotis: 100 %; aukštis: 100 %; padėtis: santykinis; ) .slinkis ( padėtis: absoliuti; plotis: 100 %; aukštis: 100 %; nepermatomumas: 0; ) .slankiklis-vyniotuvas > .skaidrė:pirmasis vaikas ( neskaidrumas: 1; )

Grynajame JS turite užregistruoti kiekvienos skaidrės CSS perėjimą:

Skaidrė (slankioji: kairė; padėtis: absoliuti; plotis: 100 %; aukštis: 100 %; neskaidrumas: 0; perėjimas: neskaidrumas 500 ms linijinis; )

Naudodami jQuery, norėdami naudoti fadeIn() ir fadeOut() metodus, turite pakeisti neskaidrumą ir ekraną:

Skaidrė ( plūduriuoti: kairėje; padėtis: absoliuti; plotis: 100 %; aukštis: 100 %; ekranas: nėra; ) .slankiklis-įvynioklis > .slide:first-child (rodymas: blokas; )

„jQuery“ kodas yra toks:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", ankstesnis: ".slider-previous", next: ".slider-next") , skaidrės: ".slide", nav: ".slider-nav", greitis: 500, palengvinimas: "linijinis" ), parinktys); var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides) , elementas).eq(skaidr.); $currentSlide. animate((nepermatomumas: 1 ), parinktys.greitis, parinktys.lengvinimas). broliai ir seserys(options.slides). css("nepermatomumas", 0); ); //. .. ); ))(jQuery);

Animuojant neskaidrumą, taip pat turite pakeisti likusių skaidrių šios savybės reikšmes.

„JavaScript“ tai būtų:

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

Medijos elementai: Vaizdo įrašas Galime įtraukti vaizdo įrašą į skaidrių demonstraciją. Štai „Vimeo“ vaizdo skaidrių demonstravimo pavyzdys:

Vaizdo įrašai įtraukiami per „iframe“. Tai tas pats keičiamas eilutinis blokas, kaip ir paveikslėlyje. Keičiamas – nes turinys paimtas iš išorinio šaltinio.

Norėdami sukurti viso puslapio skaidrių demonstraciją, turite pakeisti stilius taip:

Html, tekstas ( paraštė: 0; užpildymas: 0; aukštis: 100 %; min. aukštis: 100 %; /* Aukštis turi būti visas puslapis */ ) .slankiklis ( plotis: 100 %; perpildymas: paslėptas; aukštis: 100 %; minimalus aukštis: 100 %; /* Aukštis ir plotis iki galo */ padėtis: absoliuti; /* Absoliuti padėtis */ ) .slankiklis-vyniotuvas (plotis: 100 %; aukštis: 100 %; /* Aukštis ir plotis iki pilna */ padėtis: santykinė; ) .slide ( plūduriuoti: kairėn; padėtis: absoliuti; plotis: 100 %; aukštis: 100 %; ) .slide iframe ( ekranas: blokas; /* Blokuoti elementą */ padėtis: absoliuti; /* Absoliuti padėtis */ plotis: 100%; aukštis: 100%; /* Visas aukštis ir plotis */ )

Automatinės skaidrių demonstracijos Automatinės skaidrių demonstracijos naudoja laikmačius. Kiekvieną kartą, kai iškviečiama setInterval() laikmačio funkcija, žymeklis bus padidintas 1 ir taip bus pasirinkta kita skaidrė.

Kai žymeklis pasiekia maksimalų skaidrių skaičių, jį reikia nustatyti iš naujo.

Begalinės skaidrių demonstracijos vartotojams greitai tampa nuobodžios. Geriausia praktika yra sustabdyti animaciją, kai vartotojas užveda virš jos, ir tęsti, kai žymeklis pasislenka.

(function($) ( $.fn.slideshow = function(parinktys) ( options = $.extend(( skaidrės: ".slide", greitis: 3000, palengvinimas: "linijinis" ), parinktys); var laikmatis = null; // Laikmatis var index = 0; // Žymeklis var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animuoti (( neskaidrumas: 1 ), options.speed, options.easing). broliai ir seserys(options.slides). css("nepermatomumas", 0); ); var autoSlide = function(element) ( // Inicijuoti sekos laikmatį = setInterval ( function() ( index++; // Padidinkite žymeklį 1 if(index == $(options.slides, element).length) ( index = 0; // Iš naujo nustatykite žymeklį ) slideTo(index, element); ), options.speed ); // Tas pats intervalas kaip ir metodika.animate() ); var startStop = function(element) ( element.hover(function() ( // Sustabdyti animaciją clearInterval(timer); laikmatis = null; ), funkcija () ( autoSlide(element); // Tęsti animaciją )); ); return this.each(function() ( var $element = $(this); autoSlide($elementas); startStop($elementas); )); ); ))(jQuery);

Abu .stop() metodo parametrai nustatomi kaip true, nes mums nereikia kurti animacijos eilės iš mūsų sekos.

Grynajame JS kodas tampa paprastesnis. Kiekvienai skaidrei registruojame tam tikros trukmės CSS perėjimą:

Skaidrė ( perėjimas: neskaidrumas 3 s linijinis; /* 3 sekundės = 3000 milisekundžių */ )

O kodas bus toks:

Klaviatūros navigacija Išplėstinės skaidrių demonstracijos siūlo klaviatūros navigaciją, t.y. Slinkite per skaidres spausdami klavišus. Mums tai tiesiog reiškia, kad turime užregistruoti klavišo paspaudimo įvykio tvarkymą.

Norėdami tai padaryti, pasieksime įvykio objekto ypatybę KeyCode. Jis grąžina paspausto klavišo kodą (kodų sąrašą).

Tie įvykiai, kuriuos prijungėme prie mygtukų „Ankstesnis“ ir „Kitas“, dabar gali būti pritvirtinti prie „kairiojo“ ir „dešinio“ klavišų. jQuery:

$("body").on("keydown", function(e) ( var kodas = e.keyCode; if(kodas == 39) ( // Rodyklė kairėn $next.trigger("click"); ) if( kodas == 37) ( // Rodyklė dešinėn $previous.trigger("spustelėkite"); ) ));

Grynajame JS vietoj paprasto .trigger() metodo turėsite naudoti dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var kodas = e.keyCode; var evt = new MouseEvent("click"); // pelės paspaudimas if(kodas == 39) ( // Rodyklė kairėn savarankiškai .next.dispatchEvent(evt); ) if(kodas == 37) ( // Rodyklė dešinėn self.previous.dispatchEvent(evt); ) ), false);

Padoriuose projektuose to daryti nėra įprasta. Turėtume apibrėžti funkcionalumą, kuris suteikia viešąjį metodą apversti, o tada iškviesti jį spustelėjus mygtuką. Tada, jei kitai programos daliai reikėtų įdiegti šią funkciją, nereikėtų emuliuoti DOM įvykių, o būtų galima tiesiog iškviesti šį metodą.

Atšaukimai Būtų puiku, jei prie bet kurio skaidrių demonstravimo veiksmo, kuris būtų vykdomas, kai šis veiksmas būtų atliktas, galėtumėte pridėti kodą. Tokia ir yra atšaukimo funkcijų paskirtis – jos vykdomos tik įvykus tam tikram veiksmui. Tarkime, kad mūsų skaidrių demonstracijoje yra antraščių ir jie pagal numatytuosius nustatymus yra paslėpti. Animacijos metu turime parodyti dabartinės skaidrės antraštę arba net ką nors su ja padaryti.

„jQuery“ galite sukurti tokį atgalinį skambutį:

(function($) ( $.fn.slideshow = funkcija(parinktys) ( Options = $.extend(( //... callback: function() () ), ), parinktys); var slideTo = funkcija(skaidrė, elementas) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( neskaidrumas: 1 ), options.speed, options.easing, // Dabartinės skaidrės atšaukimas options.callback($ currentSlide)). siblings(options.slides). css("nepermatomumas", 0); ); //... ); ))(jQuery);

Šiuo atveju atgalinis skambutis yra funkcija iš .animate(), kuri dabartinę skaidrę priima kaip argumentą. Štai kaip galite jį naudoti:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent();) // Rodo esamą antraštę ir paslepia kitus $wrapper.find (" .slide-caption").hide(); slide.find(.slide-caption").show("slow"); ) )); ));

Grynajame JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Mūsų atgalinis skambutis this.el = document.querySelector(element); this.init(); ) Skaidrių demonstracija. prototipas = ( init: function() ( //... this.slides = this.el.querySelectorAll(.slide"); //... //... ), _slideTo: function(slide) ( var self = tai; var currentSlide = self.slides; currentSlide.style.nepermatomumas = 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); // Вызывает функцию по окончанию перехода } }; // })();

Atšaukimo funkcija apibrėžiama kaip antrasis konstruktoriaus parametras. Galite naudoti taip:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Rodo esamą antraštę ir paslepia kitus var allSlides = wrapper. querySelectorAll(.slide"); var caption = slide.querySelector(.slide-caption"); caption.classList.add("matomas"); 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"); } } }); });

Išorinės API Kol kas mūsų darbo scenarijus paprastas: visos skaidrės jau yra dokumente. Jei mums reikia įterpti duomenis iš išorės („YouTube“, „Vimeo“, „Flickr“), turime užpildyti skaidres, kai gauname išorinį turinį.

Kadangi atsakymas iš trečiosios šalies serverio gali būti ne iš karto, turite įterpti įkėlimo animaciją, kad parodytumėte, jog procesas vyksta:

Ankstesnis Kitas

Tai gali būti gif arba gryna CSS animacija:

#suktukas (kraštinės spindulys: 50 %; kraštinė: 2 tšk. vientisas # 000; aukštis: 80 piks.; plotis: 80 piks.; padėtis: absoliuti; viršuje: 50 %; kairė: 50 %; paraštė: -40 piks. 0 0 -40 piks.; ) # suktukas: po ( turinys: ""; padėtis: absoliuti; fono spalva: # 000; viršuje: 2 piks.; kairėje: 48 %; aukštis: 38 piks.; plotis: 2 piks.; kraštinės spindulys: 5 piks.; -webkit-transform-origin: 50 % 97 %; transformacijos kilmė: 50 % 97 %; -žiniatinklio rinkinio animacija: kampinis 1s linijinis begalinis; animacija: kampinis 1s linijinis begalinis; ) @-webkit-keyframes kampinis ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:pasukti(360 laipsnių);) ) @keyframes kampinis ( 0%(transform:pasukti(0deg);) 100%(transform:pasukti(360de);) ) #spinner:before ( turinys: ""; padėtis: absoliuti; fono spalva: # 000; viršuje: 6 piks.; kairėje: 48%; aukštis: 35 piks.; plotis: 2 piks.; kraštinės spindulys: 5 piks.; -webkit-transform-origin: 50% 94% ; transformacijos kilmė: 50 % 94 %; -žiniatinklio rinkinio animacija: stačiakampis 6s linijinis begalinis; animacija: keturių 6s linijinis begalinis; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) %(-webkit-transform:pasukti(360de);) ) @keyframes stačiakampiai (0%(transformuoti:pasukti(0deg);) 100%(transform:pasukti(360deg);) )

Veiksmai bus tokie:
- prašyti duomenų iš išorės
- paslėpti įkrovos tvarkyklę
- analizuoti duomenis
- kurti HTML
- rodyti skaidrių demonstraciją
- apdoroti skaidrių demonstravimą

Tarkime, kad pasirenkame naujausius naudotojo vaizdo įrašus iš „YouTube“. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limitas: 5, naudotojo vardas: "learncodeacademy" ), parinktys); //... var getVideos = function() ( // Gaukite vaizdo įrašus iš „YouTube“ var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Gaukite vaizdo įrašą kaip JSON objektą $(options.loader). hide( ); // Slėpti įkroviklį 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);

Grynajame „JavaScript“ yra papildomas veiksmas – JSON gavimo metodo sukūrimas:

Tada procedūros yra panašios:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "Learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); užklausa .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON objekto skambutis(duomenys); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Gaukite „YouTube“ vaizdo įrašą var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Gaukite vaizdo įrašą kaip JSON objektą var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "nėra"; // Slėpti įkroviklį 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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки