Lag en lysbildefremvisning ved å bruke javascript-maler. Fotolab. Slidr-kontroller

Oversikt over programmer for oppretting av lysbildefremvisning Opprette en lysbildefremvisning for et nettsted

Når du lager en lysbildefremvisning for publisering på en nettside, er det best å bruke ferdige programvareløsninger. Etter min mening er det beste og enkleste alternativet å bruke jQuery, et spesielt gratis bibliotek med skript (små JavaScript-programmer). Tidligere artikler har allerede snakket om dette fantastiske webutviklingsverktøyet. Se for eksempel artikkelen Fotogalleri jQuery– enkelt og vakkert! . La oss nå bruke jQuery til å lage en lysbildefremvisning på siden, den såkalte glideren.

For å gjøre dette vil vi bruke Slides-pluginen, laget av programmereren Nathan Searles, teknisk direktør for designstudioet «The Brigade» i Portland, Oregon, USA. En annen av utviklingen hans ble beskrevet i artikkelen Fotogalleri for en nettbutikk.

Slides-plugin-modulen er enkel å installere, har flere alternativer for å endre bilder i en lysbildefremvisning og brukes ofte for sideoverskriften. Et eksempel på hvordan denne glidebryteren fungerer med standardinnstillinger er vist i figuren:

Installere en lysbildefremvisning Lysbilder

Som alltid, opprett først en skriptmappe på nettstedet. Deretter må du laste ned arkivet og pakke det ut i den opprettede mappen. Den vil inneholde to skript jquery-1.8.3.min.js og jquery.cycle.all.min.js.

Deretter, i sidetittelen inne i taggen... setter vi inn følgende linjer, som indikerer banen til skriptene og et lite javascript som definerer parametrene til lysbildefremvisningen:

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

.lysbildefremvisning(
bredde: 200px;
høyde: 135px;
margin: auto;
}

Som du kan se, er det også en enkel CSS-regel der du må spesifisere størrelsen på vinduet for bildene av den fremtidige lysbildefremvisningen (bredde - høyde). Naturligvis må alle bilder ha samme størrelse. Hvis du ønsker det, kan du utvide CSS-alternativene ved å legge til for eksempel rammer, bakgrunner, polstring og andre elementer for lysbildefremvisningsbildene dine. I dette tilfellet må du angi den totale størrelsen, det vil si bildet pluss innrykk og kantlinjer langs lengden og bredden du angir.

Viktig notat: Hvis nettstedet ditt bruker flere jQuery-plugins, er det mer praktisk å flytte filen jquery.js (helst den nyeste versjonen) til rotmappen for ikke å laste den ned flere ganger. I dette tilfellet vil linjen for tilgang til den se lik ut for alle plugins. Spesielt for vårt eksempel viser det seg slik:

Det anbefales ikke å bruke flere forskjellige versjoner av jQuery på samme side slik at de ikke kommer i konflikt med hverandre. Sørg samtidig for å sjekke at pluginene fungerer med den installerte versjonen av jQuery, siden ikke alle versjoner er utskiftbare.

Det siste trinnet er å plassere bildene på siden. Alt er enkelt her også. Plasser bildene i en merkelapp eller annen kode som lar deg angi bredde og høyde, og spesifisere dens class="slideshow" . For vårt eksempel ser HTML-koden for glidebryteren slik ut:

På dette tidspunktet er opprettelsen av lysbildefremvisningen nesten fullført, og du kan se den ved å åpne siden din i nettleseren.

Angi alternativer for lysbildefremvisning Lysbilder

I den opprettede lysbildefremvisningen kan du angi forskjellige typer overganger mellom rammer ved å endre javascriptet plassert i sidehodet. I tillegg, ved å erstatte linjen sync:false i skriptet med sync:true , kan du fjerne mellomrommet når du endrer bilder.

Varigheten av å vise bilder styres av timeout-parameteren, og hastigheten av hastighetsparameteren. Som et eksempel, her er flere vanlige og tilsvarende skript som bør settes inn i sideoverskriften.

1. Oppløsning (vårt eksempel): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //transition type hastighet: 1000 , //bilde endringshastighet timeout: 1000 //frame varighet }); });
2. Blanding: $(document).ready(function() ( $(".slideshow").cycle(( fx: "shuffle", sync: false, hastighet: 500 timeout: 5000 }); });
3. Zoom: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zoom", synkronisering: falsk }); });
4. Vend inn X- eller Y-aksen: $(document).ready(function() ( $(".slideshow").cycle(( fx: "gardinX", // for rotasjon langs Y-aksen - curtainY synkronisering: falsk }); });
5. Skjul sammen vertikalt: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // retning kan settes turnUp, turnLeft, turnRight synkronisering: sant }); });
6. Rulling (offset): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // forskyvningsretning kan settes scrollUp, scrollLeft, scrollHøyre synkronisering: sant }); });
7. Fade til høyre: $(document).ready(function() ( $(".slideshow").cycle(( fx: "cover }); });

Noen ganger må du plassere flere på én side av nettstedet, slik det er gjort i denne artikkelen. For å gjøre dette trenger du bare å spesifisere forskjellige klasser for hvert alternativ på linjen $(".slideshow").cycle(((se koden i tabellen ovenfor), og ikke glem å spesifisere vindusstørrelsene for hver klasse i CSS.

Hvis lysbildene bare inneholder bilder, kan du endre strukturen litt:

forrige neste

Ikke glem å legge til en meningsfull verdi til alt-attributtet.

For å bruke sidelenker kan du gjøre følgende:

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

Forrige Neste 1 2 3

Legg merke til bruken av "data"-attributter - noen lysbildefremvisninger kan sette inn bilder som bakgrunn, og disse attributtene vil bli brukt i skriptet som steder for å koble bakgrunnen og lysbildet.

Bruke lister En semantisk korrekt tilnærming vil være å bruke listeelementer som lysbilder. I dette tilfellet vil strukturen være slik:

Hvis rekkefølgen på lysbildene er godt definert (for eksempel i en presentasjon), kan du bruke nummererte lister

CSS La oss starte med følgende struktur:

forrige neste

Fordi Siden lysbildefremvisningen vil gå fra høyre til venstre, vil den ytre beholderen ha en fast størrelse, og den indre vil være bredere siden den inneholder alle lysbildene. Det første lysbildet vil være synlig. Dette settes via overløp:

Skyveknapp ( bredde: 1024px; overløp: skjult; ) .slider-wrapper ( bredde: 9999px; høyde: 683px; posisjon: relativ; overgang: venstre 500 ms lineær; )

Inneromslagsstiler inkluderer:

Stor bredde
- fast høyde, maksimal glidehøyde
- posisjon: relativ, som lar deg lage skyvebevegelser
- CSS-overgang til venstre, som vil gjøre bevegelsen jevn. For enkelhets skyld har vi ikke inkludert alle prefikser. Du kan også bruke CSS-transformasjoner (sammen med oversettelse) til dette.

Lysbilder har en flyte-attributt for å få dem til å stille opp. De er plassert relativt slik at du kan få venstre offset i JS. Vi bruker den til å lage en glidende effekt.

Skyv ( flyte: venstre; posisjon: relativ; bredde: 1024px; høyde: 683px; )

Selv om vi har satt en viss bredde, kan vi i skriptet endre den ved å multiplisere antall lysbilder med lysbildebredden. Du vet aldri hvilken bredde du trenger.

Navigering utføres med knappene "Forrige" og "Neste". Vi tilbakestiller standardstilene deres og tildeler våre egne:

Slider-nav ( høyde: 40px; bredde: 100 %; margin-top: 1,5em; ) .slider-nav-knapp ( kantlinje: ingen; display: blokk; bredde: 40px; høyde: 40px; markør: peker; tekstinnrykk : -9999em; bakgrunnsfarge: gjennomsiktig; bakgrunns-repeat: ingen gjentakelse; ) .slider-nav button.slider-previous ( flyte: venstre; bakgrunnsbilde: url(previous.png); ) .slider-nav-knapp .slider-next ( flyte: høyre; bakgrunnsbilde: url(neste.png); )

Når du bruker sidekoblinger i stedet for knapper, kan du lage følgende stiler:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )

Disse klassene vil bli tildelt dynamisk fra skriptet.

Denne tilnærmingen er egnet for glideeffekten. Hvis vi ønsker å oppnå fade-in-effekten, må vi endre stilene, siden float legger til horisontal polstring mellom lysbildene. Det vil si at vi ikke trenger lysbilder på én linje - vi trenger en "pakke" med lysbilder:

Slider ( width: 1024px; margin: 2em auto; ) .slider-wrapper ( width: 100%; height: 683px; position: relative; /* Oppretter en kontekst for absolutt posisjonering */ ) .slide (posisjon: absolutt; /* Absolutt plassering av alle lysbilder */ bredde: 100%; høyde: 100%; opasitet: 0; /* Alle lysbilder er skjult */ overgang: opasitet 500ms lineær; ) /* Til å begynne med er bare den første synlig */ .slider- innpakning >
Vi bruker egenskapen opacity for å skjule lysbilder fordi skjermlesere vil hoppe over innholdet i elementer som har visning: ingen (se CSS in Action: Invisible Content Just for Screen Reader Users).

Takket være CSS kontekstuell posisjonering opprettet vi en "stabel" med lysbilder, med det siste lysbildet i kilden foran de andre. Men det er ikke det vi trenger. For å opprettholde rekkefølgen på lysbildene, må vi skjule alle lysbilder bortsett fra det første.

JS bruker CSS-overgang, endrer verdien til opacitetsegenskapen til gjeldende lysbilde, og tilbakestiller denne verdien til null for alle andre.

JavaScript-kode Lysbildefremvisning uten paginering Lysbildefremvisning uten paginering fungerer ved å klikke på "Neste" og "Forrige"-knappene. De kan betraktes som inkrement- og dekrementoperatorer. Det er alltid en peker (eller markør) som vil økes eller reduseres hver gang du trykker på knappene. Startverdien er 0, og målet er å velge gjeldende lysbilde på samme måte som matriseelementer er valgt.

Så når vi klikker Neste første gang, øker pekeren med 1 og vi får et andre lysbilde. Ved å klikke på Forrige reduserer vi pekeren og får det første lysbildet. Etc.

Sammen med pekeren bruker vi jQuerys .eq()-metode for å få det gjeldende lysbildet. I ren JS ser det slik ut:

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

Husk - NodeList bruker indekser akkurat som en matrise. En annen måte å velge gjeldende lysbilde på er med CSS3-velgere:

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

CSS3:nth-child()-velgeren teller elementer fra 1, så du må legge til en 1 til pekeren. Etter at du har valgt et lysbilde, må dens overordnede beholder flyttes fra høyre til venstre. I jQuery kan du bruke .animate()-metoden:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( venstre) : - $currentSlide.position().venstre ), options.speed, options.easing); //... ); ))(jQuery);

Det er ingen .animate()-metode i vanlig JS, så vi bruker CSS-overganger:

Slider-wrapper (posisjon: relativ; // nødvendig overgang: venstre 500ms lineær;)

Nå kan du endre den venstre egenskapen dynamisk gjennom stilobjektet:

Nå må vi lage en klikkhendelse for hver kontroll. I jQuery kan du bruke .on()-metoden, og i ren JS kan du bruke addEventListener()-metoden.

Du må også sjekke om pekeren har nådd listegrensene - 0 for "Forrige" og totalt antall lysbilder for "Neste". I hvert tilfelle må du skjule den tilsvarende knappen:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", forrige: ".slider-previous", next : ".slider-next", //... speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( venstre: - $currentSlide.position().left ), options.speed, options.easing); ); returner this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("klikk", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klikk", function() ( index--; $next.show(); if(index == 0) (indeks = 0; $previous.hide(); ) slideTo(indeks, $element); )); )); ); ))(jQuery);

Og i ren JS ser det slik ut:

Funksjon 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 -neste"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), actions: function() ( var self = this; self.next.addEventListener("klikk", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "ingen"; ) self._slideTo(self.index ); ), falsk); self.previous.addEventListener("klikk", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self. .index = 0;self.previous.style.display = "ingen"; ) self._slideTo(self.index); ), falsk); ) );

Paginert lysbildefremvisning I denne typen lysbildefremvisning er hver lenke ansvarlig for ett lysbilde, så det er ikke behov for en indeks. Animasjonene endres ikke; måten brukeren beveger seg gjennom lysbildene gjør. For jQuery vil vi ha følgende kode:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", hastighet : 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("klikk", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

I dette tilfellet tilsvarer hvert anker IDen til et spesifikt lysbilde. I ren JS kan du bruke både det og dataattributtet, som lagrer den numeriske indeksen til lysbildene inne i NodeList:

Funksjon 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(); ), naviger: 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 = ""; } } } };

Siden IE10 kan du administrere klasser via classList:

Link.classList.add("current");

Og med IE11 kan dataattributter fås gjennom datasettegenskapen:

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

Sideførte lysbildefremvisninger med kontroller Disse lysbildefremvisningene presenterer noe kompleksitet til koden - du må kombinere bruken av indeks og side-hasher. Det vil si at gjeldende lysbilde må velges basert på både pekerposisjonen og lysbildet valgt gjennom lenker.

Dette kan synkroniseres gjennom nummerindeksen til hver lenke i DOM. En lenke - ett lysbilde, så deres indekser vil være 0, 1, 2, etc.

I jQuery vil koden være slik:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... paginering: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; returner this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("klikk", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerisk indeks $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == totalt - 1) ( $.fn.slideshow.index = totalt - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indeks, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

Du kan umiddelbart se at synligheten til markøren har endret seg - indeksen er nå erklært som en egenskap for lysbildefremvisningsobjektet. På denne måten unngår vi omfangsproblemer som kan skapes av tilbakeringinger i jQuery. Markøren er nå tilgjengelig overalt, også utenfor plugin-navneområdet, siden den er erklært som en offentlig eiendom for lysbildefremvisningsobjektet.

.index()-metoden gir den numeriske indeksen for hver lenke.

Det er ingen slik metode i ren JS, så det er lettere å bruke dataattributter:

Nå kan vi koble prosedyrene våre med referanser og bruke dataattributtene vi nettopp opprettet:

Handlinger: function() ( var self = dette; //... 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 = "blokk"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "ingen "; ) else ( self.next.style.display = "blokk"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), falsk); ) )

Forstå dimensjoner La oss gå tilbake til følgende CSS-regel:

Slider-wrapper (bredde: 9999px; høyde: 683px; posisjon: relativ; overgang: venstre 500ms lineær;)

Hvis vi har mange lysbilder, kan det hende at 9999 ikke er nok. Du må justere størrelsene for lysbildene i farten basert på bredden på hvert lysbilde og antall lysbilder.

I jQuery er det enkelt:

// Lysbildefremvisning i full bredde returnerer this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * totalt); //... ));

Ta bredden på vinduet og still inn bredden på hvert lysbilde. Den totale bredden på den innvendige innpakningen oppnås ved å multiplisere bredden på vinduet og antall lysbilder.

// Lysbildefremvisning med fast bredde returnerer this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * totalt); //... ));

Her er startbredden satt til bredden på hvert lysbilde. Du trenger bare å stille inn den totale bredden på omslaget.

Den indre beholderen er nå bred nok. I ren JS gjøres dette omtrent på samme måte:

// Slideshow i full bredde 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; // Viewports width var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Fade-effekter Fade-effekter brukes ofte i lysbildefremvisninger. Det gjeldende lysbildet forsvinner og det neste vises. jQuery har metodene fadeIn() og fadeOut() som fungerer med både opasitets- og visningsegenskapene, så elementet fjernes fra siden når animasjonen er fullført (display:none).

I ren JS er det best å jobbe med opacitetsegenskapen og bruke CSS-posisjoneringsstakken. Deretter vil først lysbildet være synlig (opasitet: 1), og de andre vil være skjult (opasitet: 0).

Følgende sett med stiler demonstrerer denne metoden:

Slider ( bredde: 100 %; overløp: skjult; posisjon: relativ; høyde: 400px; ) .slider-wrapper ( bredde: 100 %; høyde: 100 %; posisjon: relativ; ) .slide (posisjon: absolutt; bredde: 100 %; høyde: 100%; opasitet: 0; ) .slider-wrapper > .slide:first-child ( opasitet: 1; )

I ren JS må du registrere CSS-overgangen for hvert lysbilde:

Skyv ( flyte: venstre; posisjon: absolutt; bredde: 100 %; høyde: 100 %; opasitet: 0; overgang: opasitet 500 ms lineær; )

Med jQuery, for å bruke metodene fadeIn() og fadeOut(), må du endre opasiteten og visningen:

Slide ( flyte: venstre; posisjon: absolutt; bredde: 100 %; høyde: 100 %; display: ingen; ) .slider-wrapper > .slide:first-child (display: block; )

I jQuery er koden som følger:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", forrige: ".slider-previous", next: ".slider-next" , lysbilder: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide. animate(( opasitet: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

Når du animerer opasitet, må du også endre verdiene til denne egenskapen for de gjenværende lysbildene.

I JavaScript vil det være:

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

Medieelementer: Video Vi kan inkludere video i en lysbildefremvisning. Her er et eksempel på en videolysbildefremvisning fra Vimeo:

Videoer er inkludert via iframe. Dette er den samme utskiftbare inline-blokken som bildet. Erstattbar – fordi innholdet er hentet fra en ekstern kilde.

For å lage en helsides lysbildefremvisning, må du endre stilene som følger:

Html, body ( margin: 0; utfylling: 0; høyde: 100 %; min-høyde: 100 %; /* Høyde skal være hele siden */ ) .slider ( bredde: 100 %; overløp: skjult; høyde: 100 %; min-høyde: 100%; /* Høyde og bredde til full */ posisjon: absolutt; /* Absolutt posisjonering */ ) .slider-wrapper (bredde: 100%; høyde: 100%; /* Høyde og bredde til full */ posisjon: relativ; ) .slide ( flyte: venstre; posisjon: absolutt; bredde: 100%; høyde: 100%; ) .slide iframe ( visning: blokk; /* Blokkelement */ posisjon: absolutt; /* Absolutt posisjonering */ bredde: 100 %; høyde: 100 %; /* Full høyde og bredde */ )

Automatiske lysbildefremvisninger Automatiske lysbildefremvisninger bruker tidtakere. Hver gang setInterval()-timerfunksjonen kalles tilbake, vil markøren økes med 1 og dermed vil neste lysbilde bli valgt.

Når markøren når maksimalt antall lysbilder, må den tilbakestilles.

Uendelige lysbildefremvisninger blir raskt kjedelige for brukere. Den beste praksisen er å stoppe animasjonen når brukeren holder musepekeren over den og fortsette når markøren beveger seg bort.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", hastighet: 3000, easing: "linear" ), options); var timer = null; // Timer var index = 0; // Cursor var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animere (( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Initialiser sekvenstimeren = setInterval ( function() ( index++; // Øk markøren med 1 if(index == $(options.slides, element).length) ( index = 0; // Tilbakestill markøren ) slideTo(index, element); ), options.speed ); // Samme intervall som i method.animate() ); var startStop = function(element) ( element.hover(function() ( // Stopp animasjonen clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Fortsett animasjonen )); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Begge parameterne til .stop()-metoden er satt til true, fordi vi trenger ikke lage en animasjonskø fra sekvensen vår.

I ren JS blir koden enklere. Vi registrerer en CSS-overgang for hvert lysbilde med en viss varighet:

Lysbilde ( overgang: opasitet 3s lineær; /* 3 sekunder = 3000 millisekunder */ )

Og koden vil være slik:

Tastaturnavigering Avanserte lysbildeserier tilbyr tastaturnavigering, dvs. Bla gjennom lysbildene ved å trykke på tastene. For oss betyr dette ganske enkelt at vi må registrere håndteringen av tastetrykkhendelsen.

For å gjøre dette får vi tilgang til keyCode-egenskapen til hendelsesobjektet. Den returnerer koden til den trykket tasten (liste over koder).

De hendelsene som vi har knyttet til "Forrige" og "Neste"-knappene kan nå kobles til "venstre" og "høyre"-tastene. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Venstre pil $next.trigger("click"); ) if( kode == 37) ( // Høyre pil $previous.trigger("klikk"); ) ));

I ren JS, i stedet for den enkle .trigger()-metoden, må du bruke dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // museklikk if(kode == 39) ( // Venstre pil selv .next.dispatchEvent(evt); ) if(kode == 37) ( // Høyre pil self.previous.dispatchEvent(evt); ) ), false);

I anstendige prosjekter er det ikke vanlig å gjøre dette. Vi må definere funksjonaliteten som gir flipping i en offentlig metode, og deretter kalle den når knappen klikkes. Så hvis en annen del av programmet trengte å implementere denne funksjonaliteten, ville det ikke være behov for å emulere DOM-hendelser, men kunne ganske enkelt kalle denne metoden.

Tilbakeringinger Det ville være fint å kunne legge ved en kode til en hvilken som helst lysbildefremvisningshandling som vil bli utført når den handlingen utføres. Dette er hensikten med tilbakeringingsfunksjoner - de utføres bare når en bestemt handling skjer. La oss si at lysbildefremvisningen vår har bildetekster og at de er skjult som standard. På tidspunktet for animasjonen må vi vise en bildetekst for det gjeldende lysbildet eller til og med gjøre noe med det.

I jQuery kan du opprette en tilbakeringing slik:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Tilbakeringing for gjeldende lysbilde options.callback($ currentSlide)). søsken(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

I dette tilfellet er tilbakeringingen en funksjon fra .animate() som tar det gjeldende lysbildet som et argument. Slik kan du bruke det:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Viser gjeldende bildetekst og skjuler de andre $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

I ren JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Vår tilbakeringing this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = dette; 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); // Вызывает функцию по окончанию перехода } }; // })();

Tilbakeringingsfunksjonen er definert som den andre parameteren til konstruktøren. Du kan bruke det slik:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Viser gjeldende bildetekst og skjuler de andre var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Eksterne APIer Så langt er arbeidsscenarioet vårt enkelt: alle lysbildene er allerede i dokumentet. Hvis vi trenger å sette inn data fra utsiden (YouTube, Vimeo, Flickr), må vi fylle ut lysbildene når vi mottar eksternt innhold.

Siden responsen fra tredjepartsserveren kanskje ikke er umiddelbar, må du sette inn en lasteanimasjon for å vise at prosessen pågår:

forrige neste

Det kan være en gif eller en ren CSS-animasjon:

#spinner ( kantradius: 50 %; kantlinje: 2px solid #000; høyde: 80px; bredde: 80px; posisjon: absolutt; topp: 50 %; venstre: 50 %; margin: -40px 0 0 -40px; ) # spinner:after ( innhold: ""; posisjon: absolutt; bakgrunnsfarge: #000; topp:2px; venstre: 48%; høyde: 38px; bredde: 2px; border-radius: 5px; -webkit-transform-origin: 50 % 97 %; transformasjonsopprinnelse: 50 % 97 %; -webkit-animasjon: vinkel 1s lineær uendelig; animasjon: vinkel 1s lineær uendelig; ) @-webkit-keyframes vinkel ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:før ( innhold: ""; posisjon: absolutt; bakgrunnsfarge: #000; topp: 6px; venstre: 48%; høyde: 35px; bredde: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Trinnene vil være slik:
- be om data utenfra
- skjul bootloader
- analysere data
- Bygg HTML
- Vis en lysbildefremvisning
- behandle lysbildefremvisninger

La oss si at vi velger en brukers nyeste videoer fra YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... grense: 5, brukernavn: "learncodeacademy" ), options); //... var getVideos = function() ( // Få videoer fra YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Få videoen som et JSON-objekt $(options.loader). hide( ); // Skjuler lasteren 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);

I ren JavaScript er det et ekstra trinn - å lage en metode for å få JSON:

Da er prosedyrene de samme:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON-objekt tilbakeringing(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Få 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) ( // Hent videoen som et JSON-objekt var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "ingen"; // Skjuler lasteren 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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки