Lag en karusell med prikker i jquery. jQuery-plugin for en ren og kraftig karusell
Men siden vi går gjennom det grunnleggende om JS, vil jeg for å studere basen beskrive hvordan du lager en enkel skyveknapp ved å bruke bare JavaScript-språk. Vel, la oss begynne å analysere materialet!
Hvilke typer glidere finnes og hvor kan de være nødvendige?Det kreves å lage praktiske gallerier for visning av bilder på alle webtjenester som inneholder minst noen fotografier. Dette kan være nettbutikker, porteføljesider, nyhets- og utdanningstjenester, nettsider til selskaper og underholdningsbedrifter med fotoreportasjer, etc.
Dette er imidlertid en standard bruk av glidere. Slike teknologier brukes også for å tiltrekke kunder til salgsfremmende varer, tjenester eller for å beskrive fordelene til bedrifter.
Kunder ber for det meste om å implementere det på gallerier av typen "Carousel". Dette hendig verktøy for å se bilder i stor størrelse med mulighet for brukeren til å bytte lysbilder forover og bakover. I dette tilfellet bytter selve bildene vanligvis automatisk etter en viss tid. Denne mekanismen fikk kallenavnet på grunn av at visningen av bilder gjentas i en sirkel.
I dag, hvis du ønsker det, kan du finne de mest uvanlige og attraktive pluginene på Internett for å se et sett med bilder.
Selvstendig aktivitetVel, la oss nå begynne å lage vår egen glidebryter. På sånn som det er nå lære å implementere det, foreslår jeg at du bruker ren . Dette vil automatisk bytte bilder i en sirkel.
Nedenfor har jeg lagt ved programkode din søknad. Jeg la igjen kommentarer til deg mens jeg kodet.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Automatisk bildebytter /*Beskriv utseende ramme, grunnlaget for den fremtidige glidebryteren */ #slides( posisjon: relativ; høyde: 415px; bredde: 100%; polstring: 0px; listestil-type: ingen; box-shadow: 0 0 7px #010, 0 0 10px blå , 0 0 15px #010, 0 0 35px #010; ) /* Jeg redigerer visningen av bilder*/ img ( bredde: auto; høyde: 390px; utfylling: 13px; ) /* Jeg angir at innholdet i listeelementer vil vises i midten av element-overordnet, dvs. V i dette tilfellet i midten av ul-elementet - grunnlaget for lysbildene */ li ( text-align: center; ) /* Jeg beskriver utseendet til selve lysbildene */ .slide( posisjon: absolutt; opasitet: 0; topp: 0px ; venstre: 0px; høyde: 100 %; z-indeks: 3; bredde: 100 %; bakgrunn: blå; -moz-overgang: opasitet 1.5s; overgang: opasitet 1.5s; -webkit-overgang: opasitet 1.5s; ) /*Når det vises, blir objektet synlig og beveger seg foran*/ .showing( opacity: 1; z-index: 4; )
Jeg håper du ikke hadde noen problemer med css- og html-koden. Men jeg anser det som nødvendig å demontere arbeidet med manuset. Så la oss gå videre til å tyde hva som ble skrevet.
Så først, ved å bruke querySelectorAll-metoden, tildeler jeg MySlider-variabelen en liste over alle elementer innenfor det angitte området. Indikerer denne oppføringen
document.querySelectorAll("#slides .slide")
Dermed lagrer MySlider en samling av fire elementer.
Deretter spesifiserer jeg hvilket bilde som skal vises ved å sette currentPicture-variabelen til null. Deretter indikerer jeg at lysbildeendringen skjer om 2,7 sekunder og nextSlide-behandlingsfunksjonen må kalles opp.
La oss gå videre til selve funksjonen.
Til å begynne med, for det gjeldende listeelementet, endrer jeg beskrivelsen av klassene, dvs. Jeg omskriver «lysbildefremvisning» til «lysbilde». Følgelig blir bildet usynlig.
Nå definerer jeg nytt element samling, som vises på skjermen. For å gjøre dette tar jeg gjeldende posisjon +1. Du har kanskje lagt merke til at jeg også bruker divisjon med en rest (%) etter antall tilgjengelige lysbilder. Dette trikset med ørene er nødvendig for å starte showet i en ny sirkel. Slik vil det bokstavelig talt se ut.
jQuery karusell-plugins lar deg vise nettstedinnhold på en mer attraktiv måte. Ved hjelp av slike plugins kan du lage vakre presentasjoner direkte på nettsider og tiltrekke deg oppmerksomheten til besøkende.
1. Bootstrap Ambilight SliderBootstrap Ambilight Slider er en plugin for å lage skyveknapper/karuseller med en ambient glødeffekt og Bootstrap-funksjonalitet.
2. jQuery TouchSwipe Carousel
jQuery TouchSwipe Carousel-pluginen lar deg oppdage berøringer på berøringsskjermen og simulere et museknapptrykk.
3.ItemSlide
ItemSlide.js er en jquery-plugin for å lage en karusell som fungerer på både skrivebord og mobil berøringsenheter.
4.
– jquery-plugin for å lage adaptive karuseller/glidere.
5.
Fullt responsiv og mobiloptimalisert jquery karusell-plugin. For animasjon brukes CSS3-overganger her, men det er også et reservealternativ i jQuery. Programtillegget støtter et ubegrenset antall lysbilder med alle typer innhold. kan samhandle med tastaturet, og fungerer samtidig godt i de fleste nettlesere, inkludert mobile.
6. SilverTrack
SilverTrack er en utvidbar jQuery-plugin. Den består av en liten kjerne som du kan koble praktiske plugins til.
7. Uglekarusell 2
Owl Carousel 2 er en fullstendig responsiv jQuery/Zepto-karusell med støtte for berøringsskjerm.
8. UtilCarousel
UtilCarousel – jQuery karusell-plugin med myke overganger, realisert gjennom maskinvareakselerasjon. Den er fullstendig tilpasningsdyktig. Plugin-en støtter berøringsskjermer og bruker maskinvareakselerert 3D CSS3-animasjon. Takket være dette vil plugin-en se bra ut på både stasjonære PC-er og mobile enheter. Du kan kontrollere UtilCarousel ved hjelp av berøringer, navigasjon eller musehjulet.
9. Glat
Slick er en responsiv jQuery-karusell som har alt du trenger.
10. CodingJack 3D-karusell
Denne karusellen støttes av iOS- og Android-enheter og er utstyrt med berøringssveip-funksjonalitet. Ser bra ut på nettbrett og smarttelefoner.
11. jQuery Slideshow
jQuery Slideshow er en karusell og glidebryter med geststøtte for berøringsenheter. Plugin-arkivet veier bare 2 kilobyte.
12. FlimRoll
FlimRoll er en miniatyr jQuery-karusell som fokuserer brukerens oppmerksomhet på et spesifikt objekt, og plasserer det i midten av skjermen.
13. Tikslus
Tikslus er en fullstendig responsiv jQuery-karusell med mange funksjoner og egenskaper. Og pluginens høye tilpasningsevne lar deg ikke spesifisere bildestørrelser. I tillegg er det verdt å merke seg støtten for tilpassede animasjoner basert på CSS3-klasser. Tikslus kan brukes med Jquery Mobile-plugin.
14.Scrollboks
Scrollbox er en enkel jQuery-plugin i miniatyr som gjør lister til en karusell eller ticker.
15. Sky Touch Carousel
Sky Touch Carousel er en jQuery karusell-plugin med et rikt sett med funksjoner. Pluginen er adaptiv, støtter berøringsskjermer, og fungerer samtidig raskt og smidig. Innstillinger lar deg endre utseendet på karusellen ved hjelp av CSS.
16.
– fleksibel jQuery-plugin for lage lysbildefremvisninger eller karuseller. Den har mange innstillinger, inkludert overgangstyper, bildejustering og rammebyttehastighet.
/* Det er her karusellen vår begynner. Block.carousel-wrapper er plassert relativt, wrapper.carousel-element er plassert absolutt. . */ .carousel-wrapper( position:relative; /* Absolutt plasserte bokser får høyden og bredden sin fra overordnet. Vi gjorde dem gjennomsiktige som standard, og så vil de vises jevnt når du klikker på links.arrow-prev og.arrow- neste. * / .carousel-item( posisjon:absolutt; topp:0; bunn:0; venstre:0; høyre:0; polstring:25px50px; opasitet:0; overgang:all0.5sease-in-out; /* lagt merke til polstringen til venstre og 50px til høyre? På denne måten kan vi plassere lenkene våre! Hver av dem vil være 50px bred. Jeg bruker også tomme lenker med bakgrunnsbilde slik at lenkene ser ut som piler. Sjekk om du har endret Koble nettadresser med den opprinnelige nettadressen slik at koblingene dine ikke bare er gjennomsiktige rektangler. */ .arrow( posisjon:absolutt; topp:0; display:blokk; bredde:50px; høyde:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); bakgrunn:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* La oss returnere pilen vår til venstre. */ &.arrow-prev( left:0; ) /* Og den andre til høyre. Fordi jeg bruker samme bilde for pilen, roterer jeg det 180 grader. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Jeg liker veldig godt hvordan karusellen ser ut mørk bakgrunn, og hvis block.carousel-item har klassen "light", vil vi endre teksten til hvit og bruke hvite piler i stedet for grå. Dobbeltsjekk at banen til pilbildet er riktig */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* La oss skrive en mediespørring for å endre størrelsen på pilene på enheter med mindre størrelse skjerm.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50%; ) ) ) /* Sett koblingsmålene til å vise: ingen; På denne måten slipper vi at nettleseren stadig hopper helt til toppen av karusellen hver gang vi klikker på pilene. Denne egenskapen er effektiv for alle elementer hvis ID begynner med "målelement". */ ( display:none; ) /* Ovenfor har vi gjort alle karusellene våre gjennomsiktige, noe som betyr at når karusellen lastes, får vi en stor tom boks i stedet. La oss endre gjennomsiktighetsverdien for det første lysbildet til 1 for visning. Vi setter også z-indeksen til 2, og plasserer den høyere enn de andre lysbildene. */ .item-1( z-index:2; opasitet:1; ) /* Men vi vil ikke at det første lysbildet alltid skal ha en opasitetsverdi på opasitet: 1; ellers må vi jobbe oss gjennom dette lysbildet mens vi roterer de andre. */ *:target~.item-1( opacity:0; ) /* ..men hvis #target-item-1 er i fokus og vi vil vise det første lysbildet, velg det ved å bruke ~-ikonet og still inn gjennomsiktighet igjen til 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Hvis andre mål-item-# er i fokus, velg dem ved hjelp av ~-velgeren, vis jevnt dem, og plasser dem på toppen ved hjelp av z-index: 3. Her kan du legge til flere spenn med target-item-identifikatoren hvis du har mer enn tre av dem. Kan legge til 10 stykker samtidig.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
Noen ganger må jeg løse problemer knyttet til frontend, til tross for at jeg ikke liker det :)
Faktisk kan du anslå holdningen min til alt relatert til "vakkert" fra utformingen av denne siden, som ble utviklet av meg alene :)
Men relativt nylig ble jeg møtt med behovet for å implementere en skyveknapp i JavaScript, og dette måtte gjøres uten noen ferdige biblioteker og til og med uten alles favoritt jQuery.
Dette behovet var forårsaket av at resultatet skulle ha vært et JS-skript, som t.o.m tredjepartstjeneste Jeg ville koblet til siden. Følgelig var det ikke lenger behov for ferdige karuseller i JavaScript, pga For å integrere dem var det nødvendig å legge til en bibliotekforbindelse til nettstedets HTML-kode via en script-tag og kopiere selve filene enten til serveren eller trekke dem via cdn, men dette ville igjen kreve redigering av ressurskoden.
Hvordan lage en JavaScript-glidebryter: begynnelsenI dag tror jeg at alle som befant seg i en lignende situasjon begynte med å søke etter eksisterende utviklinger, fordi... når oppgaven med å lage en JS-karusell er innenfor rammen av arbeidet, skal det alltid gjøres så raskt som mulig. Og under slike forhold vil ingen tillate deg å sitte og finne opp dine egne sykler.
Kunder bryr seg alltid ikke om hvordan koden er skrevet, hva dens arkitektur er, det viktigste er å se resultatet!
Som et resultat, som du forstår, før jeg skrev en glidebryter i JavaScript uten jQuery, bestemte jeg meg for å finne en ferdig og endre den for å passe mine behov. Hvorfor ingen jQuery? Ja, fordi på målressursen, der jeg planla å koble glidebryteren min gjennom tjenesten, ble jQuery-kallet i koden lokalisert senere enn skriptet koblet til av tjenesten. Derfor ble jQuery-konstruksjoner i koden min rett og slett ikke oppfattet.
Som grunnlag tok jeg denne JavaScript-bildeglideren - https://codepen.io/gabrieleromanato/pen/pIfoD.
Jeg bestemte meg for å stoppe der, fordi... dens JS-kode ble skrevet ved hjelp av OOP-prinsipper og dens klasser er basert på prototyper, ikke på banale funksjoner.
For å være ærlig forstår jeg dypt ikke og gjenkjenner ikke den nåværende hypen rundt JavaScript ved å bruke OOP, rammer og andre arkitektoniske ting på et språk som opprinnelig var ment å være et enkelt dynamisk skriptspråk. Akkurat som JS selv, misliker jeg den ærlig med sin syntaktiske vinaigrette, som gjør at de samme konstruksjonene kan skrives på flere måter.
Men, dessverre, i moderne verden Få mennesker deler holdningene mine, fordi... dette språket utvikler seg i et vanvittig tempo og gjør til og med forsøk på å vinne sinnet til backend-utviklere som bruker Node.js som et alternativ til Java, PHP, C#, Ruby og andre monstre.
Som et resultat, for ikke bare å stå uten arbeid, må du stille ut av JavaScript. Og i skyveimplementeringen jeg valgte, ren JavaScript Jeg kom over noe som du forstår, jeg forakter på dette språket. Det er derfor jeg valgte det, slik at det i det minste skulle være en grunn til å jobbe og forstå JavaScript OOP og prototypeklasser - ellers ville jeg aldri ha rørt dem frivillig i mitt liv :)
Basert på koden jeg fant, trengte jeg å utvikle en skyveknapp i ren JS i et popup-vindu (dette kalles også en popup, popup, etc.), som ville ha knapper for å bytte lysbilder og klikkbare indikatorer for gjeldende lysbilde. Det var også nødvendig å lage en knapp for å lukke dette vinduet.
Dette er hva jeg endte opp med.
Lage et glidebryter JS-bibliotekFørst bestemte jeg meg for å implementere alt klokt og lage en JavaScript-glidebryter for nettstedet i form av et bibliotek som kan kobles til nettstedet med et enkelt skript, der skyvekomponentene, delt inn i underkataloger, kalles. Jeg bestemte meg for å kalle det popupSlider.js til ære for dets opprinnelige formål.
Koden kan bli funnet på GitHub på denne adressen - https://github.com/Pashaster12/popupSlider.js
Bibliotekets struktur er som følger:
Slides-mappen er for lysbildebilder. Kontroller inneholder bilder av JS-karusellkontroller (knapper for å lukke glidebryteren og bytte lysbilde). Og i eiendeler - statiske elementer JS-glidebryter: HTML-markering og fil med CSS-stiler.
Vel, popupSlider.js-filen er hjertet i selve biblioteket, der JavaScript-handlingene til karusellen er skrevet og en forbindelse opprettes med andre filer. Det er denne vi skal koble til på siden, og den vil kalle de andre.
Jeg bestemte meg for å starte med HTML-markeringen av JS-bildekarusellen vår, som i mitt tilfelle ser slik ut:
Tekst 1 
Tekst 2 
Tekst 3
For å designe glidebryteren i JavaScript som en popup, brukte jeg følgende stiler:
#slider ( margin: auto; width: 600px !important; overflow: hidden; ) #slider-wrapper ( width: 9999px; height: 343px; posisjon: relativ; overgang: venstre 400ms lineær; ) .slide ( flyte: venstre; width : 600px; posisjon: relativ; overløp: skjult; ) .caption ( width: 600px; height: 110px; line-height: 1,5; font-size: 15px; font-weight: 300; text-align: center; color: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; polstring: 0 20px; ) #slider-nav ( posisjon: absolutt; bunn: -36px; tekstjustering: center; venstre: 50%; transform: translateX(-50%); ) #slider-nav a ( width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50 %; margin: 0 5px; bakgrunnsfarge: #fafafa; ) #slider-nav a.current (bakgrunnsfarge: #337ab7; ) .horizontal-controls (posisjon: absolutt; display: inline-block; width: 12px ; høyde: 20px; topp: 50%; margin-top: -10px; ) #prev ( bakgrunn: url(../controls/arrow_left_inactive.png); venstre: -40px; ) #prev:hover ( bakgrunn: url(../controls/arrow_left_active.png); ) #neste (bakgrunn: url(../controls/arrow_right_inactive.png); høyre: -40px; ) #neste:hover (bakgrunn : url(../controls/arrow_right_active.png); ) #cq-popup (bredde: 600px; z-indeks: 23; venstre: calc(50%); topp: calc(50%); posisjon: fast !viktig ; background-repeat: no-repeat; bakgrunnsposisjon: høyre; bakgrunnsfarge: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; transform: translate(-50%, -50%) scale(1); ) #cq-popup .header (display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( width: 500px; font-size: 22px; line-height: 36px; ) #cq-popup-btclose ( tekstdekorasjon: ingen; posisjon: absolutt; høyre: -40px; topp: 0; bakgrunn: url(. ./controls/btn_delete_inactive.png); høyde: 16px; bredde: 16px; ) #cq-popup-btclose:hover ( bakgrunn: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( posisjon : fast; topp: 0; bredde: 100 %; høyde: 100%; bakgrunn: rgba(51,51,51,0.8); z-indeks: 22; )
Som et resultat av å bruke disse JS-stilene, ser karusellen slik ut:
Og HTML-oppmerking, og CSS-stiler jeg tok inn separate filer popupSlider.html og popupSlider.css, som er plassert i aktivakatalogen til JavaScript-skyvebiblioteket. Jeg gjorde dette med vilje slik at brukere ved bruk av denne koden enkelt kunne justere markup og design uten å rote rundt i JS-koden, der det som måtte skrives ut måtte skrives direkte.
I tillegg liker mange fortsatt å minimere JS for å øke hastigheten på lasting av nettstedet. Så tilpass denne avgjørelsen under disse forholdene ville det være svært vanskelig.
Som et resultat bestemte jeg meg for å bare inkludere ferdige filer i hovedbiblioteksfilen popupSlider.js, som for min oppgave tok følgende form:
Funksjon Slider(element) ( this.loadStatic(); 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.nextBtn = this.el.querySelector("#next"); this.prevBtn = dette. el.querySelector("#prev"); this.navigate(); ), navigate: function () ( var self = this; for (var i = 0; i)< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blokk"; else if (indeks == 1) this.prevBtn.style.display = "ingen"; ), setCurrentLink: function (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Noen kommentarer om koden ovenfor. Innholdet i popupSlider.js-filen er en enkelt JavaScript Slider-klasse, som, som i PHP, inneholder en konstruktør og klassemetoder. Bare i JS er definisjonen av en konstruktør, i motsetning til PHP, obligatorisk.
Konstruktøren er definert ved å bruke følgende konstruksjon:
Funksjon Slider(element) ( //konstruktørkode)
Inne i konstruktøren må handlingene som skal utføres når du oppretter et klasseobjekt spesifiseres.
Selve klassemetodene vil være plassert inne i prototypen og vil være tilgjengelige for alle forekomster av denne JavaScript-klassen. JS-prototypen i mitt tilfelle er beskrevet av følgende design:
Slider.prototype = ( //metoder )
De vil bli oppringt utenfor klasseorganet som følger:
Var-glidebryter = new Slider(); slider.class_method();
Og inne i selve klassekoden er følgende metode tilgjengelig:
This.class_method();
Det viktigste er ikke å glemme det JavaScript betydning dette avhenger av konteksten til samtalen, så i kroppen til noen metoder der det var nødvendig å kalle metoder og egenskaper til klassen, er det en slik konstruksjon:
Var selv = dette; self.class_method(); //for å få tilgang til en metode som er ett nivå høyere enn koden til den beskrevne metoden
Det virker som jeg snakket om alle nyansene ved å skrive kode. Nå noen få ord om metodene til JavaScript-klassen vår, som inneholder beskrivelser av JS-handlingene til bildekarusellen.
loadStatic()
Den aller første metoden som kalles når du oppretter en forekomst av en klasse i konstruktøren. Ansvarlig for å legge til skyvemarkering og en fil med stiler til HTML-koden til nettsiden.
Først opprettes en ny link-tag i minnet med bruker JavaScript funksjon document.createElement() og den tildeles verdiene til alle nødvendige attributter, inkludert banen til CSS-filen med JS-skyvestilene. Og til slutt legges den til HTML-siden ved hjelp av JavaScript-metoden appendChild() til slutten av head-delen, der stilene skal være.
Deretter gjør vi det samme for filen med HTML-oppmerking skyveknappen vår i ren JavaScript. Det er bare en liten nyanse her: du kan ikke bare inkludere en HTML-fil i den samme, som vi gjorde med en CSS-fil. Det finnes spesielle biblioteker for dette, for eksempel, for å inkludere HTML i HTML, er lib fra w3.org utmerket - https://www.w3schools.com/howto/howto_html_include.asp
Men da må det enten inkluderes i selve skyvebiblioteket, eller be brukere om å installere det selv. Men alt dette er suboptimalt, fordi... krever mange kroppsbevegelser og senker lastehastigheten på siden på grunn av ekstra skript.
Som et resultat bestemte jeg meg for å motta innholdet HTML-fil inne i JavaScript-koden og last den inn i et nytt div-element opprettet i minnet, som jeg gjorde tidligere for CSS-tilkoblinger fil i JavaScript. Det genererte elementet er inkludert helt på slutten av hoveddelen av HTML-koden til nettstedsiden.
Hvis du vil sette inn en div med glidebrytermarkering ikke bare på slutten av brødteksten, men i en bestemt beholder, kan du bruke følgende kode i stedet:
Var div = document.createElement("div"); div.innerHTML = skyveknappHTML; document.body.appendChild(div);
Skriv inn følgende, og spesifiser ønsket identifikator for målbeholderen (i mitt tilfelle vil HTML JS-glidebryteren være plassert i elementet med id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Metoden, som kalles i konstruktøren etter loadStatic(), er nødvendig for å initialisere klasseegenskapene som tilsvarer de viktigste HTML-elementer, som vi får tilgang til i følgende kode.
På slutten kalles navigate()-metoden.
navigere()
I denne metoden er handlingene som skjer når du klikker på skyvebryterknappene og navigasjonselementene under selve glidebryteren indikert i form av sirkler.
For enkelhets skyld flyttet jeg JavaScript-koden for å endre lysbilder til en egen slide()-metode, men i denne legger jeg den bare ved klikkhendelsen for hver runde-knapp i loopen.
Når du klikker på knappene "forrige lysbilde" / "neste lysbilde", som du kan se, bestemte jeg meg for å bare etterligne et klikk på den tilsvarende sirkelen, og definere ønsket i forhold til den nåværende, som har en CSS-klassestrøm.
slide(element)
Metoden "ansvarlig for magien" til selve JavaScript-karusellen, som inneholder koden som endrer plasseringen av lysbildene. Helt i begynnelsen kalles setCurrentLink()-metoden, som vi skal snakke om litt senere.
Som inndataparameter JS-glidebryterens navigasjonsknappobjekt i form av en sirkel sendes til det.
Selve skyvebryteren fungerer slik:
På slutten av metoden beskrives virkemåten for knappene "forrige lysbilde"/"neste lysbilde", utformet som henholdsvis venstre/høyre piler. Hvis gjeldende lysbilde er det første av hele listen, er knappen for å gå til forrige lysbilde skjult. Hvis sistnevnte, fjern deretter knappen for å gå til neste lysbilde.
setCurrentLink(link)
Denne metoden i JavaScript-skyveklassen vår er ansvarlig for å markere navigasjonsrundeknappen som tilsvarer det gjeldende elementet. De. hvis vi har valgt det andre lysbildet, vil den andre knappen bli uthevet.
Objektet til knappen som skal velges som gjeldende sendes som en inngangsparameter til funksjonen.
Logikken for å fremheve det nåværende elementet er enkel:
Den aller siste metoden i klassen, som definerer handlingen når du klikker på lukkeknappen på glidebryteren i form av et kryss. Her er faktisk koden den mest forståelige av alle som finnes i JS-skyveklassen.
Når du klikker på lukkeknappen, som er tilgjengelig med identifikatoren, fjernes skyveelementet og elementet som definerer det fra siden. gjennomskinnelig bakgrunn. De er også på sin side oppnådd av unike identifikatorer.
Selve metoden kalles inne i den tidligere beskrevne navigate(), som inneholder alle scenariene med handlinger som finner sted på vår JavaScript-glidebryter.
Forresten, hvis du vil lukke glidebryteren når du klikker utenfor den, er det bare å legge til følgende kode til denne metoden:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
JavaScript-lysbildefremvisning basert på det utviklede biblioteketNoen ganger i praksis kan det hende du må lage en JS rullekarusell, som ofte kalles en lysbildefremvisning. I mitt tilfelle var dette ikke nødvendig, men jeg bestemte meg likevel for å lage en basert på den endelige bibliotekkoden for et tilfelle der det kan være nyttig.
Faktisk, JavaScript-implementering Lysbildefremvisningen skiller seg litt fra en vanlig skyveknapp. Den eneste forskjellen er at i en lysbildefremvisning bytter lysbildene automatisk ved et gitt tidsintervall, mens i tilfellet med en vanlig JS-karusell endres de manuelt ved hjelp av navigasjonselementer.
SlideShow: function (timeout) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
Jeg synes det er klart hva som skjer her. For å skape denne metoden Jeg kopierte koden fra klikkhendelsen på de manuelle skyvebryterknappene og plasserte den inni JavaScript-anrop setInterval()-funksjonen, som utfører en spesifisert handling etter en spesifisert tidsperiode.
Handlingsskriptet sendes som det første argumentet som en anonym funksjon, og tidsintervallet sendes som det andre, som jeg bestemte meg for å lage som en variabel hvis verdi sendes når slideShow() kalles.
Den eneste modifikasjonen av koden i setInterval() som var nødvendig var å bestemme antall lysbilder og sammenligne indeksen til gjeldende lysbilde med den for å sløyfe den automatiske vekslingen.
Vel, og for å denne koden opptjent, må selve metoden kalles. Jeg bestemte meg for å gjøre alt dette i samme navigate(), som nettopp er en samling av alle slags skript. Jeg plasserte samtalen helt på slutten, og ga som et argument verdien av tidsintervallet for automatisk endring lysbilder i vår JS-lysbildefremvisning (jeg valgte 2000 millisekunder eller 2 sekunder, du kan endre dette tallet etter behov):
Self.slideShow(2000);
Etter den sjekken JavaScript fungerer skyveknappen, uten å glemme å rense nettleseren din.
I teorien skal alt fungere. Hvis ikke, studer feilene i nettleserkonsollen og del dem i kommentarene.
Som et resultat fikk vi en JS lysbildefremvisning der lysbildene bytter automatisk og i en sirkel, dvs. når det siste lysbildet er nådd, går showet inn i en ny loop og showet starter på nytt fra det aller første elementet.
Mens jeg jobbet med forskjellige JS-biblioteker for bildekaruseller og anmeldelser, la jeg merke til det denne praksisen utviklere bruker aktivt, men med noen tillegg. I alle løsningene jeg har sett blir den automatiske lysbildefremvisningen avbrutt dersom brukeren har gjort det manuell veksling. Så jeg bestemte meg for å gjøre det samme i biblioteket mitt.
For å avbryte automatisk visning JavaScript-lysbilder karusell, bestemte jeg meg for å bruke standard JS-funksjonen clearInterval(), som jeg sender som et argument identifikatoren til tidsintervallet som returneres av setInterval()-funksjonen når den er satt.
Som et resultat fikk jeg følgende kode, som jeg bestemte meg for ikke å skrive som en egen metode:
ClearInterval(self.slideCycle);
Og plasserte den på de stedene hvor handlingene er beskrevet når du klikker videre ulike elementer navigasjon, dvs. i de neste:
Link.addEventListener("klikk", funksjon (e) (...)); self.prevBtn.addEventListener("klikk", funksjon (e) (...)); self.nextBtn.addEventListener("klikk", funksjon (e) (...));
Det er bedre å kalle clearInterval() nærmere selve klikkhendelsen, det viktigste er før den, og ikke etter den.
Integrasjon av JavaScript-glidebryteren på nettstedetSå vår skyveknapp i ren JS er klar. Nå gjenstår det bare å koble den til siden.
For å gjøre dette, må du følge følgende trinn sekvensielt, som er standard handlinger ved integrering av tredjeparts JavaScript-biblioteker generelt.
Trinn 1 . Vi kopierer bibliotekfilene til nettsiden vår i en egen katalog.
Steg 2. Legg til følgende kode i HTML-en til sidene der glidebryteren må vises, og plasser den før den avsluttende body-taggen:
Trinn 3. Vi plasserer følgende kode for å kalle JS-karusellen i noen eksisterende JavaScript fil som er inkludert på siden etter å ha koblet til selve glidebryteren:
Var aSlider = new Slider("#slider");
Som du kan se, skaper denne koden i hovedsak et objekt av Slider-klassen, som er inneholdt i popupSlider.js. Det er grunnen til at den skal kalles først etter å ha koblet selve klassefilen til siden.
Legger til nye lysbilder i en JavaScript-karusellAlt er veldig enkelt her. Siden lysbildene våre er hentet fra en egen katalog i lysbildebiblioteket, når du legger til nye bilder trenger du bare å slippe dem inn i den nødvendige filer, etter å ha gitt dem samme størrelse som de andre.
Og så i koden til filen assets/popupSlider.html legg til en ny blokk i beholderen med id slider-wrapper:
Tekst
I prinsippet kan du ganske enkelt kopiere en lignende eksisterende og endre banen til bildefilen og teksten til signaturen (hvis det er nødvendig i det hele tatt).
Du må også legge til et nytt navigasjonselement i form av en sirkel, fordi... på dette øyeblikket dens automatiske tillegg er ennå ikke implementert. For å gjøre dette, må du legge til følgende kode til beholderen med slider-nav id, og skrive den helt til slutt:
Verdien av data-slide-attributtet må være større enn den største verdien av de andre elementene. Det er nok bare å øke den maksimale strømmen med en.
Pakker JS-karusellen i ett enkelt skriptDet er det, JavaScript-glidebryteren er klar og tilkoblet. Jeg personlig anbefaler å bruke dette alternativet i praksis, hvis du i det hele tatt trenger det :)
For å fremskynde driften kan du forresten komprimere statiske komponenter ytterligere: CSS, HTML og JavaScript-filer. Jeg gjorde ikke dette og tilbyr deg minifisert kode, fordi det er mange frontend-byggesystemer nå: Gulp, Grunt, Webpack og andre. Og hver av dem har sine egne algoritmer for komprimering og tilkobling av filer.
I tillegg kan forminskede resultater fungere annerledes på forskjellige operativsystemer. Generelt er det mange grunner.
Og selve kildekodene tror jeg ikke er så tunge at de trenger denne prosedyren. Men hvis du trenger dem, konfigurer minifikasjonen selv, ta hensyn til operativsystemet og samleren.
Som jeg skrev helt i begynnelsen, for å løse oppgaven som opprinnelig ble satt for meg, trengte jeg å få en enkelt JS-fil for riktig bruk av glidebryteren min gjennom en tredjepartstjeneste på nettstedet. Av denne grunn brukte jeg strengt tatt ikke ferdige tredjepartsbiblioteker.
Så alternativet enkelt skript JavaScript-karusell vil komme godt med for deg, fordi... alt innhold vil være inneholdt direkte i det, inkludert HTML/CSS-kode, som i tilfelle av et bibliotek er lagret i separate filer.
Manuset i mitt tilfelle består av to deler. Den første delen inneholdt innholdet i popupSlider.js-filen, som jeg ikke vil presentere en gang til. Sett den inn selv, fjern beskrivelsen av loadStatic()-metoden og dens kall fra klassekoden, fordi vi trenger dem ikke.
Den andre delen av samme JavaScript-skript Skyveknappen for nettstedet er en behandler for DOMContentLoaded-hendelsen, som oppstår når sideinnholdet lastes.
Der vil vi legge til karusellen JS-koden til HTML/CSS-siden og lage et objekt av Slider-klassen, som tilsvarer å aktivere selve glideren.
Skjematisk ser koden slik ut:
/* innholdet i popupSlider.js uten å beskrive loadStatic()-metoden og dens kall */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css-kode*/ \ /* html-kode*/ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Siden i mitt tilfelle var muligheten til å laste opp filer til serveren helt stengt, måtte jeg laste opp bildefilene til JavaScript-karusellkontrollene til skyen og i stedet for banene til dem i HTML- og CSS-koden, skrive lenkene som ble generert under sparing.
Hvis du ikke har slike problemer, trenger du ikke å endre noe, men ikke glem å kopiere lysbildene og kontrollbibliotekene til serveren og spesifisere de riktige banene til dem.
Egendefinert JS-glidebryter - utviklingsutsikterFor å være ærlig, så har jeg ikke tenkt å engasjere meg i målrettet støtte og utvikling av løsningen jeg har laget :) For øyeblikket er det en haug med lignende glidere og en liten vogn, som i motsetning til min har sin egen historie, er grundig testet og støttes av et stort fellesskap av brukere og utviklere.
Det er liksom ikke interessant for meg å starte hele reisen fra bunnen av alene og lage en annen sykkel, og jeg har egentlig ikke tid til det. Men gitt JavaScript skyveknappen er en utmerket mulighet til å øve på utvikling ved å omstrukturere koden og implementere nye interessante funksjoner, som kanskje ikke eksisterer ennå.
Så hvis du, som meg, trenger en kodebase for eksperimenter og du har i det minste litt ekstra fritid— kopier koden til JavaScript-glidebryteren jeg beskrev eller bli med bidragsyterne på GitHub. Depotet er åpent, og jeg ga en lenke til det i begynnelsen av artikkelen.
Hvis du ønsker å forbedre front-end-ferdighetene dine på opprettelsen min, kan jeg til og med gi deg en liten liste over redigeringer og forbedringer som koden trenger og som kan være av interesse for deg når det gjelder implementeringen:
Listen over redigeringer jeg har gitt er selvfølgelig ikke endelig og kan suppleres. Skriv om dine forslag, tanker og ønsker i kommentarfeltet under artikkelen og del med vennene dine via sosiale medierå også involvere dem i utviklingen.
Jeg ber deg om å ikke dømme koden min strengt, fordi jeg, som jeg allerede har sagt, ikke anser meg selv som en Frontend-spesialist og er ikke det. Jeg er også åpen for alle dine kommentarer om kodestil og håper at jeg kan lære noe av deg, og deg av meg, dvs. oppfylle hovedformålet med å utvikle og støtte OpenSource-produkter.
Bli med i prosjektmiljøene, abonner på oppdateringer, og du kan til og med hjelpe meg økonomisk ved å bruke skjemaet rett under selve artikkelen, hvis jeg kunne hjelpe deg med noe eller du bare liker det jeg gjør :)
Det var alt jeg ville si! Beste ønsker! 🙂
P.S. : hvis du trenger en nettside eller trenger å gjøre endringer på en eksisterende, men det er ikke tid eller lyst til dette, kan jeg tilby mine tjenester.
Mer enn 5 års erfaring med profesjonell nettsideutvikling. Jobber med PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular og andre nettutviklingsteknologier.
Erfaring med prosjektutvikling ulike nivåer: landingssider, bedriftsnettsteder, nettbutikker, CRM, portaler. Inkludert støtte og utvikling av HighLoad-prosjekter. Send søknadene dine på e-post [e-postbeskyttet].
En dag bestemte vennene mine seg for å gi meg en hyggelig overraskelse. Selve overraskelsen var veldig enkel; den krevde en helt vanlig T-skjorte uten noen design.
Og så fikk de et problem - alle T-skjortene i butikkene hadde bilder på seg. De kunne ikke finne den enkleste T-skjorten uten noen bilder. Jeg tror du også har møtt lignende problem når du ikke finner det enkleste.
Og det er den samme historien med karuseller; nesten alle karuseller har allerede et design. Og du trenger nesten alltid en ren karusell, som du så kan designe slik designeren har tenkt.
Derfor, for å umiddelbart nyte å jobbe med karuseller, og for å lage dem raskt, foreslår jeg at du bruker følgende plugin.
jQuery-plugin ren og kraftig karusellDet kule med dette pluginet er at det ikke har noe design og er mye enklere å jobbe med enn andre vakre plugins.
Den kan dekoreres på hvilken som helst måte du vil.
Og så, her er denne plugin: Owl Carousel.
Installerer plugin1. Koble til jQuery hvis den ikke allerede er tilkoblet, for eksempel som dette
2. Kopier plugin-filene til sidemappen
- Pakker ut
- Kopier uglekarusellmappen til nettstedet
3. Koble disse filene til nettstedet:
4. Legg til kode på siden
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Start programtillegget
$(document).ready(function())( // Finn karusellblokken var carousel = $("#carousel"); // Start karusellplugin carousel.owlCarousel(); ));
6. Vi arrangerer
/* Hovedblokk */ .owl-wrapper-outer ( border: 1px solid #777; border-radius: 5px; overflow: hidden; background: white; ) /* 1 carousel square */ .carousel-element ( padding: 30px ; tekstjustering: senter; skriftstørrelse: 300 %; kantlinje til høyre: 1px solid #777; )
Tilbake- og Forover-knapperI dette eksemplet vil jeg ikke vise den raskeste, men den mest universelle metoden.
1. Legg til selve knappene
Tilbake fremover
2. Feste knapper til karusell-plugin
Etter å ha startet plugin-en, legg til koden
// Tilbake // Når du klikker på "Tilbake" $("#js-prev").click(function () ( // Start spole venstre carousel.trigger("owl.prev"); return false; )); // Forward // Når du klikker på "Forward" $("#js-next").click(function () ( // Begynn å spole tilbake til høyre carousel.trigger("owl.next"); return false; ) );
Nå, når du klikker på "Tilbake" og "Forover", vil tilbakespoling utløses.
MarkørerDette er punktene som viser hvor vi er nå.
De kan aktiveres når du kjører plugin ved å legge til neste parameter
// Start karusell-plugin-modulen carousel.owlCarousel(( // Poeng under karusellpagineringen: true ));
/* Blokk med prikker */ .owl-paginering ( tekstjustering: midtstilt; /* Juster prikkene i midten */ ) /* 1 punkt */ .owl-page ( bredde: 10px; høyde: 10px; kantlinje: 1px solid #777; skjerm: inline-block; bakgrunn: hvit; margin: 10px; kantradius: 5px; ) /* Aktivt punkt */ .owl-page.active ( bakgrunn: #777; )
For å vise bare 1 blokkDette er ganske ofte nødvendig, for dette legger vi til følgende parameter
// Start karusell-plugin-modulen carousel.owlCarousel(( singleItem: true, // Vis kun 1 blokk i full bredde ));
Ulikt antall blokker på forskjellige enheterEn veldig nyttig funksjon som lar deg lage en adaptiv karusell for mobile enheter.
// Start karusell-plugin-modulen carousel.owlCarousel(( // Antall viste blokker // avhengig av enheten (skjermbredde) // Antall blokker på store skjermelementer: 10, // 5 blokker på datamaskiner (skjerm fra 1400px til 901px) itemsDesktop : , // 3 blokker på små datamaskiner (skjerm fra 900px til 601px) itemsDesktopSmall: , // 2 elementer på nettbrett (skjerm fra 600 til 480 piksler) itemsNettbrett: , // Telefoninnstillinger er deaktivert, i dette tilfellet vil // bli brukt nettbrettinnstillinger itemsMobil: false ));
Hva slags overraskelse er det?Venner kommer til bursdagen min, de smiler glad, gleden renner over. De gir meg høytidelig en gave.
Jeg åpner den og ser på t-skjorten. Jeg bretter det ut. Jammen, hvilken dumhet. Jeg ser 3 bilder av meg selv på denne t-skjorten. Jeg tok på meg en t-skjorte og alle begynner å le, det ble dumt og morsomt.