Skapa ett bildspel med javascript-mallar. Fotolabb. Slidr kontroller

Översikt över program för att skapa bildspel Skapa ett bildspel för en webbplats

När du skapar ett bildspel för inlägg på en webbplats är det bäst att använda färdiga mjukvarulösningar. Enligt min mening är det bästa och enklaste alternativet att använda jQuery, ett speciellt gratisbibliotek med skript (små JavaScript-program). Tidigare artiklar har redan pratat om detta underbara webbutvecklingsverktyg. Se till exempel artikeln Fotogalleri jQuery– enkelt och vackert! . Låt oss nu använda jQuery för att skapa ett bildspel på sajten, den så kallade slidern.

För att göra detta kommer vi att använda insticksprogrammet Slides, skapat av programmeraren Nathan Searles, teknisk chef för designstudion "The Brigade" i Portland, Oregon, USA. En annan av hans utvecklingar beskrevs i artikeln Fotogalleri för en onlinebutik.

Insticksprogrammet Slides är lätt att installera, har flera alternativ för att ändra bilder i ett bildspel och används ofta för sajthuvudet. Ett exempel på hur detta reglage fungerar med standardinställningar visas i figuren:

Installera ett bildspel Bilder

Som alltid, skapa först en skriptmapp på webbplatsen. Sedan måste du ladda ner arkivet och packa upp det i den skapade mappen. Den kommer att innehålla två skript jquery-1.8.3.min.js och jquery.cycle.all.min.js.

Därefter, i sidrubriken inuti taggen... infogar vi följande rader, som anger sökvägen till skripten och ett litet javascript som definierar parametrarna för bildspelet:

$(".bildspel").cycle((
fx: "blekna"
});
});

.bildspel(
bredd: 200px;
höjd: 135px;
marginal: auto;
}

Som du kan se finns det också en enkel CSS-regel där du måste ange storleken på fönstret för bilderna av det framtida bildspelet (bredd - höjd). Naturligtvis måste alla bilder ha samma storlek. Om du vill kan du utöka CSS-alternativen genom att lägga till exempelvis kanter, bakgrunder, utfyllnad och andra element för dina bildspelsbilder. I det här fallet måste du ange den totala storleken, det vill säga bilden plus indragen och kanterna längs den längd och bredd som du ställer in.

Viktig notering: Om din webbplats använder flera jQuery-plugin-program är det bekvämare att flytta filen jquery.js (helst den senaste versionen) till rotmappen för att inte ladda ner den flera gånger. I det här fallet kommer raden för åtkomst till den att se likadan ut för alla plugins. I synnerhet för vårt exempel ser det ut så här:

Det rekommenderas inte att använda flera olika versioner av jQuery på samma sida så att de inte kommer i konflikt med varandra. Se samtidigt till att kontrollera att plugins fungerar med den installerade versionen av jQuery, eftersom inte alla versioner är utbytbara.

Det sista steget är att placera bilderna på sidan. Allt är enkelt även här. Placera bilderna i en tagg eller annan tagg som låter dig ställa in bredd och höjd, och ange dess class="slideshow" . För vårt exempel ser HTML-koden för skjutreglaget ut så här:

Vid det här laget är skapandet av bildspelet nästan klart, och du kan se det genom att öppna din sida i webbläsaren.

Ställa in alternativ för bildspel Bilder

I det skapade bildspelet kan du ställa in olika typer av övergångar mellan bildrutor genom att ändra javascriptet i sidhuvudet. Genom att ersätta raden sync:false i skriptet med sync:true kan du dessutom ta bort utrymmet när du byter bilder.

Varaktigheten av att visa bilder styrs av timeout-parametern och hastigheten av hastighetsparametern. Som ett exempel, här är flera vanliga bildspelsalternativ och motsvarande skript som bör infogas i sidhuvudet.

1. Upplösning (vårt exempel): $(document).ready(function() ( $(".bildspel").cycle(( fx: "fade", //övergångstyp hastighet: 1000 , //bildändringshastighet timeout: 1000 //bildrutelängd }); });
2. Blandar: $(document).ready(function() ( $(".bildspel").cycle(( fx: "blanda", sync: false, hastighet: 500 Timeout: 5000 }); });
3. Zooma: $(document).ready(function() ( $(".bildspel").cycle(( fx: "zoom", synk: falskt }); });
4. Vänd in X- eller Y-axeln: $(document).ready(function() ( $(".bildspel").cycle(( fx: "gardinX", // för rotation längs Y-axeln - curtainY synk: falskt }); });
5. Dra ihop vertikalt: $(document).ready(function() ( $(".bildspel").cycle(( fx: "turnDown", // riktning kan ställas in turnUp, turnLeft, turnRight synk: sant }); });
6. Rulla (offset): $(document).ready(function() ( $(".bildspel").cycle(( fx:"scrollDown", // offset riktning kan ställas in scrollUp, scrollLeft, scrollHöger synk: sant }); });
7. Tona till höger: $(document).ready(function() ( $(".bildspel").cycle(( fx: "omslag }); });

Ibland behöver du placera flera bildspelsalternativ på en sida på webbplatsen, som görs i den här artikeln. För att göra detta behöver du bara ange olika klasser för varje alternativ på raden $(".slideshow").cycle(( (se koden i tabellen ovan), och glöm inte att ange fönsterstorlekarna för varje klass i CSS.

Om bilderna bara innehåller bilder kan du ändra strukturen något:

Föregående Nästa

Glöm inte att lägga till ett meningsfullt värde till alt-attributet.

För att använda sidlänkar kan du göra följande:

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

Föregående Nästa 1 2 3

Observera användningen av "data"-attribut - vissa bildspel kan infoga bilder som bakgrund, och dessa attribut kommer att användas i skriptet som platser för att koppla ihop bakgrunden och bilden.

Använda listor Ett semantiskt korrekt tillvägagångssätt skulle vara att använda listobjekt som diabilder. I det här fallet kommer strukturen att se ut så här:

Om ordningen på bilderna är väl definierad (till exempel i en presentation) kan du använda numrerade listor

CSS Låt oss börja med följande struktur:

Föregående Nästa

Därför att Eftersom bildspelet kommer att köras från höger till vänster, kommer den yttre behållaren att ha en fast storlek, och den inre kommer att vara bredare eftersom den innehåller alla bilder. Den första bilden kommer att synas. Detta ställs in via spill:

Slider ( bredd: 1024px; overflow: hidden; ) .slider-wrapper ( bredd: 9999px; höjd: 683px; position: relativ; övergång: vänster 500ms linjär; )

Stilar för inre omslag inkluderar:

Stor bredd
- fast höjd, maximal glidhöjd
- position: relativ, vilket gör att du kan skapa glidrörelse
- CSS-övergång vänster, vilket gör rörelsen smidig. För enkelhetens skull har vi inte tagit med alla prefix. Du kan också använda CSS-transformationer (tillsammans med översättning) för detta.

Slides har ett float-attribut för att få dem att radas upp. De är placerade relativt så att du kan få deras vänster offset i JS. Vi använder den för att skapa en glidande effekt.

Skjut (flytande: vänster; position: relativ; bredd: 1024px; höjd: 683px;)

Även om vi har ställt in en viss bredd kan vi i skriptet ändra den genom att multiplicera antalet bilder med bildens bredd. Du vet aldrig vilken bredd du kan behöva.

Navigering utförs med knapparna "Föregående" och "Nästa". Vi återställer deras standardstilar och tilldelar våra egna:

Slider-nav (höjd: 40px; bredd: 100%; margin-top: 1,5em; ) .slider-nav-knapp (kant: ingen; display: block; bredd: 40px; höjd: 40px; markör: pekare; text-indrag : -9999em; bakgrundsfärg: genomskinlig; bakgrundsupprepning: ingen upprepad; ) .slider-nav button.slider-previous ( flytande: vänster; bakgrundsbild: url(previous.png); ) .slider-nav-knapp .slider-next ( float: höger; bakgrundsbild: url(next.png); )

När du använder sidlänkar istället för knappar kan du skapa följande stilar:

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; )

Dessa klasser kommer att tilldelas dynamiskt från skriptet.

Detta tillvägagångssätt är lämpligt för glideffekten. Om vi vill uppnå fade-in-effekten måste vi ändra stilarna, eftersom float lägger till horisontell stoppning mellan bilderna. Det vill säga, vi behöver inte bilder på en rad - vi behöver ett "paket" med bilder:

Skjutreglage ( bredd: 1024px; marginal: 2em auto; ) .slider-wrapper ( bredd: 100%; höjd: 683px; position: relativ; /* Skapar en kontext för absolut positionering */ ) .slide ( position: absolut; /* Absolut positionering av alla bilder */ bredd: 100%; höjd: 100%; opacitet: 0; /* Alla bilder är dolda */ övergång: opacitet 500ms linjär; ) /* Inledningsvis är endast den första synlig */ .slider- omslag >
Vi använder opacitetsegenskapen för att dölja bilder eftersom skärmläsare hoppar över innehållet i element som har visning: ingen (se CSS in Action: Invisible Content Just for Screen Reader Users).

Tack vare CSS-kontextuell positionering skapade vi en "stack" av bilder, där den sista bilden i källan låg framför de andra. Men det är inte vad vi behöver. För att behålla ordningen på bilderna måste vi dölja alla bilder utom den första.

JS använder CSS-övergång, ändrar värdet på opacitetsegenskapen för den aktuella bilden och nollställer detta värde till noll för alla andra.

JavaScript-kod Bildspel utan paginering Bildspel utan paginering fungerar genom att klicka på knapparna "Nästa" och "Föregående". De kan ses som inkrement- och dekrementoperatorer. Det finns alltid en pekare (eller markör) som kommer att ökas eller minskas varje gång du trycker på knapparna. Dess initiala värde är 0, och målet är att välja den aktuella bilden på samma sätt som arrayelement väljs.

Så när vi klickar på Nästa första gången ökar pekaren med 1 och vi får en andra bild. Genom att klicka på Föregående minskar vi pekaren och får den första bilden. Etc.

Tillsammans med pekaren använder vi jQuerys .eq()-metod för att få den aktuella bilden. I ren JS ser det ut så här:

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

Kom ihåg - NodeList använder index precis som en array. Ett annat sätt att välja den aktuella bilden är med CSS3-väljare:

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

CSS3:nth-child()-väljaren räknar element från 1, så du måste lägga till en 1 till pekaren. När du har valt en bild måste dess överordnade behållare flyttas från höger till vänster. I jQuery kan du använda metoden .animate():

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

Det finns ingen .animate()-metod i vanlig JS, så vi använder CSS-övergångar:

Slider-wrapper (position: relativ; // nödvändig övergång: vänster 500ms linjär;)

Nu kan du ändra den vänstra egenskapen dynamiskt genom stilobjektet:

Nu måste vi skapa en klickhändelse för varje kontroll. I jQuery kan du använda metoden .on() och i ren JS kan du använda metoden addEventListener().

Du måste också kontrollera om pekaren har nått listgränserna - 0 för "Föregående" och det totala antalet bilder för "Nästa". I varje fall måste du dölja motsvarande knapp:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", föregående: ".slider-föregående", nästa : ".slider-next", //... hastighet: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( vänster: - $currentSlide.position().left ), options.speed, options.easing); ); returnera this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("klicka", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klick", function() (index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

Och i ren JS ser det ut så här:

Funktion 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"; ), actions: function() ( var self = this; self.next.addEventListener("klick", 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 ); ), false); self.previous.addEventListener("klick", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self. .index = 0;self.previous.style.display = "ingen"; ) self._slideTo(self.index); ), falskt); ) );

Paginerat bildspel I den här typen av bildspel är varje länk ansvarig för en bild, så det finns inget behov av ett index. Animationerna förändras inte, hur användaren rör sig genom bilderna gör det. För jQuery kommer vi att ha följande kod:

(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(( vänster: - $currentSlide.position().left ), options.speed, options.easing); ); returnera this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("klick", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

I det här fallet motsvarar varje ankare ID:t för en specifik bild. I ren JS kan du använda både det och dataattributet, som lagrar det numeriska indexet för bilderna i NodeList:

Funktion 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(); ), navigera: function() (för (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 = ""; } } } };

Sedan IE10 kan du hantera klasser via classList:

Link.classList.add("current");

Och med IE11 kan dataattribut erhållas via datauppsättningsegenskapen:

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

Sidade bildspel med kontroller Dessa bildspel presenterar en viss komplexitet i koden - du måste kombinera användningen av index och sidhashar. Det vill säga att den aktuella bilden måste väljas baserat på både pekarens position och bilden som valts via länkar.

Detta kan synkroniseras genom nummerindexet för varje länk i DOM. En länk - en bild, så deras index blir 0, 1, 2, etc.

I jQuery blir koden så här:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... paginering: ".slider-pagetion", //... ), options); $. fn.slideshow.index = 0; returnera this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("klick", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numeriskt index $.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. index, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

Du kan omedelbart se att markörens synlighet har ändrats - indexet deklareras nu som en egenskap för bildspelsobjektet. På så sätt undviker vi räckviddsproblem som kan skapas av callbacks i jQuery. Markören är nu tillgänglig överallt, även utanför plugin-namnrymden, eftersom den är deklarerad som en allmän egendom för bildspelsobjektet.

Metoden .index() ger det numeriska indexet för varje länk.

Det finns ingen sådan metod i ren JS, så det är lättare att använda dataattribut:

Nu kan vi koppla våra procedurer med referenser och använda de dataattribut vi just skapade:

Actions: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "ingen "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(detta); ), falskt); ) )

Förstå dimensioner Låt oss återgå till följande CSS-regel:

Slider-wrapper (bredd: 9999px; höjd: 683px; position: relativ; övergång: vänster 500ms linjär;)

Om vi har många bilder så kanske 9999 inte räcker. Du måste justera storlekarna för bilderna i farten baserat på bredden på varje bild och antalet bilder.

I jQuery är det enkelt:

// Full width bildspel returnerar 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å fönstret och ställ in bredden på varje bild. Den totala bredden på det inre omslaget erhålls genom att multiplicera bredden på fönstret och antalet diabilder.

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

Här ställs den initiala bredden in på bredden på varje bild. Du behöver bara ställa in den totala bredden på omslaget.

Den inre behållaren är nu tillräckligt bred. I ren JS görs detta ungefär på samma sätt:

// Full width slideshow 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"; }, //... };

Toningseffekter Toningseffekter används ofta i bildspel. Den aktuella bilden försvinner och nästa visas. jQuery har metoderna fadeIn() och fadeOut() som fungerar med både opacitets- och visningsegenskaperna, så elementet tas bort från sidan när animeringen är klar (display:none).

I ren JS är det bäst att arbeta med opacitetsegenskapen och använda CSS-positioneringsstacken. Sedan kommer bilden initialt att vara synlig (opacitet: 1), och de andra kommer att vara dolda (opacitet: 0).

Följande uppsättning stilar demonstrerar denna metod:

Skjutreglage ( bredd: 100 %; bräddavlopp: dold; position: relativ; höjd: 400px; ) .slider-wrapper ( bredd: 100 %; höjd: 100 %; position: relativ; ) .slide ( position: absolut; bredd: 100 %; höjd: 100%; opacitet: 0; ) .slider-wrapper > .slide:first-child ( opacitet: 1; )

I ren JS måste du registrera CSS-övergången för varje bild:

Skjut (flytande: vänster; position: absolut; bredd: 100 %; höjd: 100 %; opacitet: 0; övergång: opacitet 500 ms linjär; )

Med jQuery, för att använda metoderna fadeIn() och fadeOut() måste du ändra opaciteten och visa:

Skjut ( flytande: vänster; position: absolut; bredd: 100%; höjd: 100%; display: ingen; ) .slider-wrapper > .slide:first-child (display: block; )

I jQuery är koden som följer:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", föregående: ".slider-previous", next: ".slider-next" , slides: ".slide", nav: ".slider-nav", hastighet: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide. animate(( opacitet: 1 ), options.speed, options.easing). siblings(options.slides). css("opacitet", 0); ); //. ..); ))(jQuery);

När du animerar opacitet måste du också ändra värdena för den här egenskapen för de återstående bilderna.

I JavaScript skulle det vara:

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

Medieelement: Video Vi kan inkludera video i ett bildspel. Här är ett exempel på ett videobildspel från Vimeo:

Videor ingår via iframe. Detta är samma utbytbara inline-block som bilden. Utbytbar – eftersom innehållet är hämtat från en extern källa.

För att skapa ett helsidesbildspel måste du ändra stilarna enligt följande:

Html, body ( marginal: 0; utfyllnad: 0; höjd: 100 %; min-höjd: 100 %; /* Höjd bör vara hela sidan */ ) .slider ( bredd: 100 %; overflow: dold; höjd: 100 %; min-höjd: 100%; /* Höjd och bredd till full */ position: absolut; /* Absolut positionering */ ) .slider-wrapper ( bredd: 100%; höjd: 100%; /* Höjd och bredd till full */ position: relativ; ) .slide ( flytande: vänster; position: absolut; bredd: 100%; höjd: 100%; ) .slide iframe ( display: block; /* Blockelement */ position: absolut; /* Absolut positionering */ bredd: 100%; höjd: 100%; /* Full höjd och bredd */ )

Automatiska bildspel Automatiska bildspel använder timers. Varje gång timerfunktionen setInterval() anropas tillbaka, kommer markören att ökas med 1 och därmed kommer nästa bild att väljas.

När markören når maximalt antal bilder måste den återställas.

Oändliga bildspel blir snabbt tråkiga för användarna. Det bästa är att stoppa animeringen när användaren håller muspekaren över den och återuppta när markören flyttas 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). animera (( opacitet: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Initiera sekvenstimern = setInterval ( function() ( index++; // Öka markören med 1 if(index == $(options.slides, element).length) ( index = 0; // Återställ markören ) slideTo(index, element); ), options.speed ); // Samma intervall som i method.animate() ); var startStop = function(element) ( element.hover(function() ( // Stoppa animeringen clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Återuppta animeringen )); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Båda parametrarna för metoden .stop() är satta till true, eftersom vi behöver inte skapa en animeringskö från vår sekvens.

I ren JS blir koden enklare. Vi registrerar en CSS-övergång för varje bild med en viss varaktighet:

Slide ( övergång: opacitet 3s linjär; /* 3 sekunder = 3000 millisekunder */ )

Och koden blir så här:

Tangentbordsnavigering Avancerade bildspel erbjuder tangentbordsnavigering, d.v.s. Bläddra genom bilderna genom att trycka på tangenterna. För oss innebär detta helt enkelt att vi behöver registrera hanteringen av tangenttryckningshändelsen.

För att göra detta kommer vi åt händelseobjektets keyCode-egenskap. Den returnerar koden för den nedtryckta knappen (lista med koder).

De händelser som vi kopplade till knapparna "Föregående" och "Nästa" kan nu kopplas till tangenterna "vänster" och "höger". jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Vänsterpil $next.trigger("klick"); ) if( code == 37) ( // Högerpil $previous.trigger("klicka"); ) ));

I ren JS, istället för den enkla .trigger()-metoden, måste du använda dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("klick"); // musklick if(kod == 39) ( // Vänsterpil själv .next.dispatchEvent(evt); ) if(kod == 37) ( // Högerpil self.previous.dispatchEvent(evt); ) ), false);

I anständiga projekt är det inte vanligt att göra detta. Vi skulle behöva definiera funktionen som ger vändning i en offentlig metod, och sedan anropa den när knappen klickas. Om en annan del av programmet sedan behövde implementera denna funktionalitet, skulle det inte finnas något behov av att emulera DOM-händelser, utan kunde helt enkelt anropa denna metod.

Återuppringningar Det skulle vara trevligt att kunna bifoga lite kod till alla bildspelsåtgärder som skulle exekveras när den åtgärden utförs. Detta är syftet med återuppringningsfunktioner - de exekveras endast när en viss åtgärd inträffar. Låt oss säga att vårt bildspel har bildtexter och att de är dolda som standard. Vid tidpunkten för animeringen måste vi visa en bildtext för den aktuella bilden eller till och med göra något med den.

I jQuery kan du skapa en återuppringning så här:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacitet: 1), options.speed, options.easing, // Återuppringning för den aktuella bilden options.callback($ currentSlide)). siblings(options.slides). css("opacitet", 0); ); //... ); ))(jQuery);

I det här fallet är återuppringningen en funktion från .animate() som tar den aktuella bilden som ett argument. Så här kan du använda den:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Visar den aktuella bildtexten och döljer de andra $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 callback this.el = document.querySelector(element); this.init(); ) Bildspel. prototyp = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = detta; 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); // Вызывает функцию по окончанию перехода } }; // })();

Callback-funktionen definieras som den andra parametern för konstruktorn. Du kan använda det så här:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Visar den aktuella bildtexten och döljer de andra 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"); } } }); });

Externa API:er Hittills är vårt arbetsscenario enkelt: alla bilder finns redan i dokumentet. Om vi behöver infoga data i den utifrån (YouTube, Vimeo, Flickr), måste vi fylla i bilderna i farten när vi tar emot externt innehåll.

Eftersom svaret från tredje parts server kanske inte är omedelbart måste du infoga en laddningsanimering för att visa att processen pågår:

Föregående Nästa

Det kan vara en gif eller en ren CSS-animation:

#spinnare (kantradie: 50%; kant: 2px fast #000; höjd: 80px; bredd: 80px; position: absolut; topp: 50%; vänster: 50%; marginal: -40px 0 0 -40px; ) # spinner:after ( innehåll: ""; position: absolut; bakgrundsfärg: #000; top:2px; vänster: 48%; höjd: 38px; bredd: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linjär oändlig; animation: angular 1s linjär oändlig; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes vinkel ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinnare:före ( innehåll: ""; position: absolut; bakgrundsfärg: #000; topp: 6px; vänster: 48%; höjd: 35px; bredd: 2px; border-radie: 5px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linjär oändlig; animation: ptangular 6s linjär oändlig; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Stegen kommer att vara så här:
- begära data utifrån
- dölj bootloader
- analysera data
- bygga HTML
- visa ett bildspel
- bearbeta bildspel

Låt oss säga att vi väljer en användares senaste videor från YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Få videor från YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Hämta videon som ett JSON-objekt $(options.loader). hide( ); // Döljer loader 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 finns det ett extra steg - att skapa en metod för att få JSON:

Då är procedurerna liknande:

(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 callback(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Hämta 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) ( // Hämta videon som ett JSON-objekt var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "ingen"; // Döljer laddaren för(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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки