Skyveknapp med klikk for å zoome. SlidesJS, responsiv jQuery-plugin
Tiden står ikke stille og går med den. Dette påvirket også Internett. Du kan allerede se hvordan det endrer seg utseende nettsteder, er spesielt populær adaptiv design. Og i denne forbindelse har det dukket opp ganske mange nye adaptive jquery-glidere, gallerier, karuseller eller lignende plugins.
1. Skyveknapp for responsive horisontale innlegg
Adaptiv horisontal karusell med detaljerte monteringsanvisninger. Den ble fullført i enkel stil, men du kan style den slik at den passer deg selv.
2. Skyv på Glide.js
Denne glidebryteren passer for alle nettsider. Den bruker Glide.js med åpen kilde. Skyveknappens farger kan enkelt endres.
3. Lysbildefremvisning med skråstilt innhold
Skyveknapp for responsivt innhold. Høydepunktet på denne glidebryteren er 3D-effekten til bildene, samt forskjellige animasjoner av tilfeldig utseende.
4. Glidebryter med HTML5-lerret
En veldig vakker og imponerende glidebryter med interaktive partikler. Den ble laget med HTML5-lerret,
5. Glidebryter for bildeforvandling
Glidebryter med en morphing-effekt (Glatt transformasjon fra ett objekt til et annet). I i dette eksemplet Glideren egner seg godt for porteføljen til en webutvikler eller webstudio i form av en portefølje.
6. Sirkulær glidebryter
Skyveknapp i form av en sirkel med effekten av å snu bildet.
7. Glidebryter med uskarp bakgrunn
Adaptiv glidebryter med veksling og bakgrunnsuskarphet.
8. Responsiv mote-glidebryter
Enkel, lett og responsiv glidebryter for nettsiden.
9. Slicebox - jQuery 3D bildeglidebryter (OPPDATERT)
Oppdatert versjon av Slicebox-glidebryteren med rettelser og nye funksjoner.
10.Gratis animert responsivt bilderutenett
JQuery-plugin for å lage et fleksibelt bilderutenett som vil bytte bilder ved hjelp av ulike animasjoner og tidspunkter. Dette kan se bra ut som bakgrunn eller dekorativt element på nettstedet, siden vi kan konfigurere det selektive utseendet til nye bilder og deres overganger. Plugin kommer i flere versjoner.
11.Fleksibel glider
Universell gratis plugin for nettstedet ditt. Denne plugin-en kommer i flere skyve- og karusellalternativer.
12. Fotoramme
Fotorama er en universell plugin. Den har mange innstillinger, alt fungerer raskt og enkelt, og du kan se lysbilder i fullskjerm. Glideren kan brukes både i fast størrelse og adaptiv, med eller uten miniatyrbilder, med eller uten sirkulær rulling, og mye mer.
P.S. Jeg installerte skyveknappen flere ganger, og jeg tror at den er en av de beste
13. Gratis og adaptivt 3D-glidegalleri med miniatyrbilder.
Eksperimentelt skyvegalleri 3DPanelLayout med et rutenett og interessante animasjonseffekter.
14. Skyveknapp på css3
Den adaptive glidebryteren er laget ved hjelp av css3 med jevn utseende av innhold og lett animasjon.
15. WOW Slider
WOW Slider er en bildeglidebryter med fantastiske visuelle effekter.
17. Strikk
Elastisk skyveknapp med full respons og lysbildeminiatyrbilder.
18. Spalte
Dette er en responsiv glidebryter på full skjerm som bruker css3-animasjon. Glideren er laget i to versjoner. Animasjonen er gjort ganske uvanlig og vakkert.
19. Adaptivt bildegalleri pluss
Enkel gratis glidebryter-galleri med bildelasting.
20. Responsive Slider for WordPress
Adaptiv gratis skyveknapp for WP.
21. Parallax Content Slider
Skyveknapp med parallakseeffekt og kontroll av hvert element ved hjelp av CSS3.
22. Glidebryter med musikklenke
Glidebryteren bruker JPlayer åpen kildekode. Denne glidebryteren ligner en presentasjon med musikk.
23. Skyveknapp med jmpress.js
Den responsive glidebryteren er basert på jmpress.js og vil derfor tillate deg å legge til noen interessante 3D-effekter til lysbildene dine.
24. Raskt hover lysbildefremvisning
Lysbildefremvisning med raskt bytte lysbilder. Lysbildebryter på sveving.
25. Bildetrekkspill med CSS3
Bilde trekkspill ved hjelp av css3.
26. En Touch Optimized Gallery Plugin
Dette responsivt galleri som er optimalisert for berøringsenheter.
27. 3D-galleri
3D Wall Gallery - laget for Safari-nettleseren, hvor 3D-effekten vil være synlig. Hvis du ser på det i en annen nettleser, vil funksjonaliteten være fin, men 3D-effekten vil ikke være synlig.
28. Glidebryter med paginering
Responsiv glidebryter med paginering ved hjelp av JQuery UI-glidebryteren. Tanken er å bruke et enkelt navigasjonskonsept. Det er mulig å spole tilbake alle bilder eller lysbilde-for-lysbilde.
29. Bildemontering med jQuery
Ordne bilder automatisk avhengig av skjermbredden. En veldig nyttig ting når du utvikler et porteføljenettsted.
30. 3D-galleri
En enkel 3D sirkulær glidebryter ved hjelp av css3 og jQuery.
31. Fullskjerm-modus med 3D-effekt ved hjelp av css3 og jQuery
En glidebryter med muligheten til å vise fullskjermbilder med en vakker overgang.
1. Utmerket jQuery SlideshowStort spektakulært lysbildefremvisning med bruker jQuery teknologier.
2. jQuery-plugin "Scale Carousel"
Skalerbar lysbildefremvisning med jQuery. Du kan stille inn lysbildefremvisningsstørrelsene som passer deg best.
3. jQuery-plugin «slideJS»
Bildeglidebryter med tekstbeskrivelse.
4. Plugin "JSliderNews"
Når du holder musepekeren over navigasjonspilene, vises et sirkulært miniatyrbilde av neste lysbilde.
6. Fin jQuery "Presentation Cycle"-glidebryter
jQuery-glidebryter med bildelastingsindikator. sørget for automatisk endring lysbilder.
7. jQuery-plugin "Parallax Slider"
Skyveknapp med volumetrisk bakgrunnseffekt. Høydepunktet på denne glidebryteren er bevegelsen av bakgrunnen, som består av flere lag, som hver ruller med forskjellig hastighet. Resultatet er en imitasjon av den volumetriske effekten. Det ser veldig vakkert ut, kan du se selv. Effekten vises jevnere i nettlesere som Opera, Google Chrome,DVS.
8. Frisk, lett jQuery-glidebryter "bxSlider 3.0"
På demosiden i "eksempler"-delen kan du finne lenker til alle mulige alternativer bruker denne plugin-en.
9. jQuery bildeglidebryter, "slideJS" plugin
En stilig jQuery-glidebryter kan absolutt dekorere prosjektet ditt.
10. jQuery slideshow-plugin "Easy Slides" v1.1
En enkel å bruke jQuery-plugin for å lage lysbildefremvisninger.
11. jQuery Slidy-plugin
Lettvekts jQuery-plugin i ulike versjoner. Automatisk lysbildebytte er gitt.
12. jQuery CSS galleri med automatisk lysbildebytte
Hvis den besøkende ikke klikker på "Forover" eller "Tilbake"-pilene innen en viss tid, vil galleriet begynne å rulle automatisk.
13. jQuery-glidebryteren "Nivo Slider"
Veldig profesjonell lettvekts plugin av høy kvalitet med gyldig kode. Det er mange forskjellige lysbildeovergangseffekter tilgjengelig.
14. jQuery-glidebryteren "MobilySlider"
Frisk glidebryter. jQuery-glidebryteren med forskjellige bildeendrende effekter.
15. jQuery-plugin "Slider²"
Lett skyveknapp med automatisk glideveksler.
16. Frisk javascript-glidebryter
Skyveknapp med automatisk bildeendring.
Plugin for implementering av lysbildefremvisninger med automatisk lysbildebytte. Det er mulig å kontrollere visningen ved hjelp av miniatyrbilder.
jQuery CSS-glidebryteren bilder ved hjelp av NivoSlider-plugin.
19. jQuery-glidebryteren "jShowOff"
Plugin for innholdsrotasjon. Tre alternativer for bruk: uten navigasjon (med automatisk endring i lysbildefremvisningsformat), med navigering i form av knapper, med navigering i form av miniatyrbilder.
20. «Shutter Effect Portfolio»-plugin
Frisk jQuery-plugin for å designe en fotografs portefølje. Galleriet har en interessant effekt av å endre bilder. Bilder følger hverandre med en effekt som ligner på bruken av en linselukker.
21. Lys javascript css glidebryter "TinySlider 2"
Implementering av bildeglider ved hjelp av javascript og CSS.
22. Fantastisk glidebryter «Tinycircleslider»
Stilig rund glider. Overgangen mellom bilder utføres ved å dra glidebryteren i form av en rød sirkel rundt omkretsen. Det vil passe perfekt inn på nettstedet ditt hvis du bruker runde elementer i designet.
23. Bildeglidebryter med jQuery
Lett skyveknapp "Slider Kit". Glideren er tilgjengelig i forskjellige design: vertikal og horisontal. Også implementert forskjellige typer navigering mellom bilder: bruk "Forover" og "Tilbake"-knappene, bruk musehjulet, bruk museklikk på lysbildet.
24. Galleri med miniatyrer «Slider Kit»
Galleri "Slider Kit". Rulling av miniatyrbilder utføres både vertikalt og horisontalt. Overgangen mellom bilder utføres ved å bruke: musehjulet, museklikk eller å holde markøren over miniatyrbildet.
25. jQuery-innholdsglidebryteren «Slider Kit»
Vertikal og horisontal innholdsglidebryter ved hjelp av jQuery.
26. jQuery lysbildefremvisning "Slider Kit"
Lysbildefremvisning med automatisk lysbildebytte.
27. Lys profesjonelt javascript CSS3-glidebryter
En pen jQuery og CSS3-glidebryter opprettet i 2011.
jQuery lysbildefremvisning med miniatyrbilder.
29. Enkel jQuery-lysbildefremvisning
Lysbildefremvisning med navigasjonsknapper.
30. Fantastisk jQuery lysbildefremvisning"Skitter"
jQuery Skitter-plugin for å lage fantastiske lysbildefremvisninger. Plugin-en støtter 22 (!) typer forskjellige animasjonseffekter når du bytter bilder. Kan arbeide med to lysbilde-navigasjonsalternativer: ved hjelp av lysbildetall og bruk av miniatyrbilder. Sørg for å se demoen, et funn av veldig høy kvalitet. Teknologier som brukes: CSS, HTML, jQuery, PHP.
31. Lysbildefremvisning "Awkward"
Funksjonell lysbildefremvisning. Lysbilder kan være: enkle bilder, bilder med bildetekst, bilder med verktøytips, videoer. Du kan bruke piler, lysbildenummerkoblinger og venstre/høyre-taster på tastaturet for å navigere. Lysbildefremvisningen kommer i flere versjoner: med og uten miniatyrbilder. For å se alle alternativene, følg lenkene Demo #1 - Demo #6 øverst på demosiden.
En veldig original design for bildeglidebryteren, som minner om en vifte. Animert lysbildeovergang. Navigering mellom bilder utføres ved hjelp av piler. Det er også et automatisk skifte som kan slås av og på ved hjelp av Play/Pause-knappen på toppen.
Animert jQuery-glidebryter. Bakgrunnsbilder skaleres automatisk når nettleservinduet endres. For hvert bilde vises en blokk med en beskrivelse.
34. "Flux Slider"-glidebryter ved hjelp av jQuery og CSS3
Ny jQuery-glidebryter. Flere kule animerte effekter når du bytter lysbilder.
35. jQuery-plugin "jSwitch"
Animert jQuery-galleri.
En enkel jQuery-lysbildefremvisning med automatisk lysbildebytte.
37. En ny versjon plugin "SlideDeck 1.2.2"
Profesjonell innholdsglidebryter. Det finnes alternativer med automatisk lysbildebytte, samt et alternativ ved å bruke musehjulet for å flytte mellom lysbildene.
38. jQuery-glidebryteren "Sudo Slider"
Lett bildeglidebryter ved hjelp av jQuery. Det er mange implementeringsalternativer: horisontal og vertikal endring av bilder, med og uten lenker til lysbildenummeret, med og uten bildetekster, ulike effekter skiftende bilder. Det er en automatisk lysbildebyttefunksjon. Lenker til alle implementeringseksempler finner du på demosiden.
39. jQuery CSS3 lysbildefremvisning
Lysbildefremvisning med miniatyrbilder støtter automatisk lysbildebyttemodus.
40. jQuery-glidebryteren “Flux Slider”
Skyveknapp med mange bildeendrende effekter.
41. Enkel jQuery skyveknappen
Stilig bildeglidebryter ved hjelp av jQuery.
42. «Craftyslide» jQuery lysbildefremvisning
jQuery HTML5 lysbildefremvisning som strekker seg over hele bredden av skjermen med lyd.
En enkel jQuery-lysbildefremvisning.
Jeg begynner med det faktum denne artikkelen er skrevet for å snakke om hvordan du lager en skyveknapp for bilder for nettsider. Denne artikkelen er på ingen måte pedagogisk i sin natur, den tjener bare som et eksempel på hvordan vår gjenstand for vurdering kan implementeres. Du kan bruke koden gitt i denne artikkelen som en slags mal for lignende utviklinger; Jeg håper at jeg vil være i stand til å formidle til leseren essensen av det jeg har skrevet i tilstrekkelig detalj og på en tilgjengelig måte.
Og nå til poenget, for ikke så lenge siden trengte jeg å installere en glidebryter på ett nettsted, men etter å ha søkt på Internett etter ferdige skript, fant jeg ikke noe nyttig, fordi noen fungerte ikke som jeg trengte, mens andre ikke startet i det hele tatt uten feil i konsollen. Det virket for meg for uinteressant å bruke jQuery-plugins for glidebryteren, fordi... Selv om dette vil løse problemet, vil jeg ikke ha noen forståelse for hvordan denne mekanismen fungerer, og å bruke en plugin for kun én skyveknapp er ikke særlig optimalt. Jeg hadde heller ikke så lyst til å forstå skjeve manus, så jeg bestemte meg for å skrive mitt eget manus til glidebryteren, som jeg selv ville markere etter behov.
Først må vi bestemme logikken til selve glidebryteren, og deretter fortsette til implementering. På dette stadiet er en klar forståelse av driften av denne mekanismen veldig viktig, for uten den kan vi ikke skrive kode som fungerer akkurat slik vi ønsker.
Hovedobjektet vårt vil være viewport, det vil si en blokk der vi vil se hvordan bildene våre snurrer, i den vil vi ha en slide wrapper, dette vil være blokken vår som inneholder alle bildene på en linje, og som vil endre seg sin plassering inne i selve viewporten. 
Deretter, på sidene inne i visningsporten, vertikalt i midten, vil det være tilbake- og forover-knapper, når de klikkes vil vi også endre posisjonen til lysbildeomslaget vårt i forhold til visningsporten, og dermed forårsake effekten av å rulle gjennom bildene. Og til slutt vil det siste objektet være navigasjonsknappene våre, plassert nederst i visningsporten. 
Når vi klikker på dem, vil vi ganske enkelt se på serienummeret til denne knappen og flytte det til lysbildet vi trenger, igjen ved å flytte slide-wrapperen (skiftet vil bli gjort ved å endre transform css-egenskapen, hvis verdi vil være beregnes hele tiden).
Jeg tror logikken i hvordan hele denne greia fungerer bør være klar etter det jeg har uttalt ovenfor, men hvis det fortsatt oppstår misforståelser et sted, så vil alt bli klarere i koden nedenfor, du trenger bare litt tålmodighet.
La oss nå skrive! Først av alt, la oss åpne indeksfilen vår og skrive markeringen vi trenger der:
Som du kan se, er det ikke noe komplisert, blokk-for-glidebryter fungerer som bare blokken som glidebryteren vår skal plasseres i, inne i den er selve visningsporten, der skyveinnpakningen vår er plassert, også en nestet liste, her er lysbilder, og img er bilder inne i dem. Vær oppmerksom på at alle bilder må ha samme størrelse eller i det minste proporsjoner, ellers vil glidebryteren se skjev ut, fordi dens dimensjoner avhenger direkte av proporsjonene til bildet.
Nå må vi stilisere hele greia; vanligvis blir ikke stiler spesielt kommentert, men jeg bestemte meg for å trekke oppmerksomhet til dette slik at det ikke skulle oppstå misforståelser i fremtiden.
body ( margin: 0; polstring: 0; ) #block-for-slider (bredde: 800px; margin: 0 auto; margin-top: 100px; ) #viewport (bredde: 100%; display: tabell; posisjon: relativ; overflyt: skjult; -webkit-user-select: ingen; -moz-user-select: ingen; -ms-user-select: ingen; -o-user-select: ingen; brukervalg: ingen; ) #slidewrapper ( posisjon: relativ; bredde: beregnet(100 % * 4); topp: 0; venstre: 0; margin: 0; polstring: 0; -webkit-overgang: 1s; -o-overgang: 1s; overgang: 1s; -webkit -transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; ) #slidewrapper ul, #slidewrapper li ( margin : 0; polstring: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )
La oss starte med blokk-for-glidebryter , dette er igjen blokken vår på siden, som vi vil tildele glidebryteren, høyden vil avhenge av bredden og proporsjonene til bildet vårt, fordi viewport opptar hele bredden av blokk-for-glidebryteren, så har selve lysbildet samme bredde, og følgelig endrer bildet inni høyden avhengig av bredden (proporsjonene er bevart). Jeg plasserte dette elementet på siden min horisontalt i midten, med 100 px innrykket fra toppen, noe som gjorde posisjonen mer praktisk for eksempelet.
Viewport-elementet, som allerede nevnt, opptar hele bredden av blokk-for-glidebryteren vår, den har egenskapen overflow:hidden, dette vil tillate oss å skjule bildefeeden vår, som strekker seg utover viewporten. 
Den neste css-egenskapen er user-select:none , som lar deg bli kvitt det blå høydepunktet individuelle elementer skyveknapp med mange klikk på knapper.
For å gå videre til lysbildeinnpakningen, hvorfor posisjon:relativ og ikke absolutt? Alt er veldig enkelt, fordi... hvis vi velger det andre alternativet, vil absolutt ingenting vises for oss med egenskapen viewport overflow:hidden, fordi selve visningsporten vil ikke tilpasse seg høyden til glidebryteren, og derfor vil den ha høyde:0 . Hvorfor er bredden viktig og hvorfor setter vi den i det hele tatt? Poenget er at lysbildene våre vil ha en bredde som tilsvarer 100 % av visningsporten , og for å sette dem på linje trenger vi et sted de skal stå, så bredden på skjermbildet bør være lik 100 % av visningsportens bredde multiplisert med antall lysbilder (i mitt tilfelle 4). Når det gjelder overgang og overgang-timing-funksjon , betyr her 1s at endringen i posisjonen til lysbildebryteren vil skje innen 1 sekund og vi vil observere den, og ease-in-out er en type animasjon der den først går sakte og øker hastigheten til midten, og deretter bremser ned igjen, her kan du stille inn verdiene etter eget skjønn.
Den neste blokken med egenskaper angir at slidewrapperen og dens barn skal ha null polstring, ingen kommentarer er nødvendig her.
Deretter styler vi lysbildene våre, bredden deres skal være lik bredden på visningsporten, men siden... de er i en lysbildeinnpakning hvis bredde er lik viewport-bredden multiplisert med antall lysbilder, så for å få viewport-bredden igjen, må vi dele 100 % av lysbildeomslagsbredden på antall lysbilder (i mitt tilfelle, igjen, innen 4). Så gjør vi dem til innebygde elementer ved å bruke display:inline og sett float til venstre ved å legge til float:left-egenskapen. Om list-style:none kan jeg si at jeg bruker den til å fjerne standardmarkøren fra li , i de fleste tilfeller er det en slags standard.
Med slide-img er alt enkelt, bildet vil ta opp hele bredden av lysbildet, slide vil justere til høyden, slidewrapper vil justere til høyden på lysbildet, og høyden på visningsporten vil igjen ta verdien av høyden av slidewrapper , så høyden på glidebryteren vår vil avhenge av proporsjonene til bildet og størrelsen på blokken , gitt for glidebryteren, som jeg allerede skrev om ovenfor.
Jeg tror på dette tidspunktet vi har funnet ut stilene, la oss lage en enkel lysbildefremvisning uten knapper foreløpig, og etter at vi har forsikret oss om at den fungerer som den skal, legger vi til og stiler dem.
La oss åpne js-filen vår, som vil inneholde skyvekoden, ikke glem å koble til jQuery, fordi Vi vil skrive ved hjelp av dette rammeverket. Forresten, når jeg skriver denne artikkelen, bruker jeg jQuery versjon 3.1.0. Filen med selve skriptet må inkluderes helt på slutten av body-taggen, fordi vi vil jobbe med DOM-elementer som må initialiseres først.
For nå må vi deklarere et par variabler, en vil lagre nummeret på lysbildet vi ser i bestemt øyeblikk gang i viewporten, kalte jeg det slideNow, og den andre vil lagre antallet av de samme lysbildene, dette er slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
SlideNow-variabelen må settes til en startverdi på 1 fordi Når siden laster, basert på markeringen vår, vil vi se det første lysbildet i visningsporten.
I slideCount vil vi plassere antall underordnede elementer til slidewrapperen, alt er logisk her.
Deretter må du lage en funksjon som vil være ansvarlig for å bytte lysbilder fra høyre til venstre, la oss erklære det:
funksjon nextSlide() ( )
Vi vil kalle det i hovedblokken til koden vår, som vi kommer til senere, men foreløpig vil vi fortelle funksjonen vår hva den trenger å gjøre:
function nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )
Først sjekker vi om vi for øyeblikket er på det siste lysbildet av feeden vår? For å gjøre dette tar vi nummeret på alle lysbildene våre ved å bruke $("#slidewrapper").children().length og sjekker det med nummeret på lysbildet vårt, hvis de er like, betyr dette at vi må begynne å vise feeden igjen, fra 1 lysbilde , noe som betyr at vi endrer CSS-transformeringsegenskapen til slidewrapperen til translate(0, 0) , og dermed flytter den til sin opprinnelige posisjon slik at det første lysbildet er i vårt synsfelt, la oss heller ikke glemme about –webkit og –ms for tilstrekkelig visning på tvers av nettlesere (se referanse for .css-egenskaper). Etter dette, ikke glem å oppdatere verdien til slideNow-variabelen, og fortelle den at lysbilde nummer 1 er synlig: slideNow = 1;
Den samme betingelsen inkluderer å sjekke at nummeret på lysbildet vi ser er innenfor antallet på lysbildene våre, men hvis dette på en eller annen måte ikke er oppfylt, vil vi gå tilbake til det første lysbildet igjen.
Hvis den første betingelsen ikke er oppfylt, betyr dette at vi for øyeblikket verken er på det siste lysbildet eller på et ikke-eksisterende, noe som betyr at vi må bytte til det neste, vi vil gjøre dette ved å flytte lysbildet til venstre med verdien lik viewport-bredden, vil skiftet igjen skje gjennom den kjente translate-egenskapen, hvis verdi vil være lik "translate(" + translateWidth + "px, 0)" , der translateWidth er avstanden som vår glidebrettet er forskjøvet. La oss forresten erklære denne variabelen i begynnelsen av koden vår:
var translateWidth = 0;
Etter å ha flyttet til neste lysbilde, la oss fortelle vårt lysbildeNå at vi ser neste lysbilde: slideNow++;
På dette tidspunktet lurer kanskje noen lesere på: hvorfor erstattet vi ikke $("#viewport").width() med en variabel som slideWidth for alltid å ha bredden på lysbildet vårt for hånden? Svaret er veldig enkelt, hvis nettstedet vårt er adaptivt, så er blokken som er tildelt glidebryteren også adaptiv, basert på dette kan vi forstå at når du endrer størrelse på vindusbredden uten å laste inn siden på nytt (for eksempel å slå på telefonen på siden), vil bredden på visningsporten endres, og følgelig vil bredden på ett lysbilde endres. I dette tilfellet vil glidebryteren vår flyttes til verdien av bredden som opprinnelig var, noe som betyr at bildene vil vises i deler eller ikke vises i det hele tatt i visningsporten. Ved å skrive $("#viewport").width() i stedet for slideWidth i funksjonen vår, tvinger vi den til å beregne bredden på visningsporten hver gang vi bytter lysbilde, og dermed sikre at når skjermbredden endres kraftig, vil den rulle til lysbildet vi trenger.
Vi har imidlertid skrevet en funksjon, nå må vi kalle den etter et visst tidsintervall, vi kan også lagre intervallet i en variabel slik at hvis vi ønsker å endre det, kan vi bare endre en verdi i koden:
var slideInterval = 2000;
Tid i js er angitt i millisekunder.
La oss nå skrive følgende konstruksjon:
$(document).ready(function () (setInterval(nesteSlide, slideInterval); ));
Alt kunne ikke vært enklere her; gjennom $(document).ready(function () ())-konstruksjonen sier vi at følgende handlinger må utføres etter at dokumentet er fullstendig lastet. Deretter kaller vi bare nextSlide-funksjonen med et intervall lik slideInterval ved å bruke den innebygde setInterval-funksjonen.
Etter alle trinnene vi utførte ovenfor, skal glidebryteren vår snurre perfekt, men hvis noe går galt, kan problemet være enten i jQuery-versjonen eller i feil tilkobling av filer. Det er heller ikke nødvendig å utelukke at du kan ha gjort en feil et sted i koden, så jeg kan bare råde deg til å dobbeltsjekke alt. 
I mellomtiden, la oss gå videre, legg til glidebryteren vår en funksjon som å stoppe rulling når du holder markøren. For å gjøre dette må vi skrive følgende ting i hovedblokken med kode (inne i $(dokumentet).ready( funksjon () ()) struktur:
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nesteSlide, slideInterval); ));
For å begynne å analysere denne koden, må vi vite hva switchInterval er. For det første er dette en variabel som lagrer det periodiske kallet til nextSlide-funksjonen, enkelt sagt, vi har denne kodelinjen: setInterval(nextSlide, slideInterval); , omgjort til dette: switchInterval = setInterval(nesteSlide, slideInterval); . Etter disse manipulasjonene tok vår hovedkodeblokk følgende form:
$(document).ready(function () ( var switchInterval = setInterval(nesteSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( neste Slide, slideInterval); )); ));
Her bruker jeg hover-hendelsen, som betyr "på hover", denne hendelsen lar meg spore øyeblikket når jeg holder markøren over et objekt, i dette tilfellet viewporten.
Etter å ha svevet, sletter jeg intervallet, som jeg angir i parentes (dette er vårt switchInterval ), så, atskilt med kommaer, skriver jeg hva jeg skal gjøre når jeg flytter markøren tilbake, i denne blokken tilordner jeg igjen switchInterval til en periodisk kall til nextSlide-funksjonen.
Nå, hvis vi tester, kan vi se hvordan glidebryteren vår reagerer på å sveve, og stopper lysbildet fra å bytte.
Nå er det på tide å legge til knapper til glidebryteren vår, la oss starte med frem- og tilbakeknappene.
Først av alt, la oss merke dem:
Først denne markeringen kan være uforståelig, jeg vil si med en gang at jeg pakket disse to knappene i en div med prev-next-btns-klassen bare for enkelhets skyld, du trenger ikke å gjøre dette, resultatet vil ikke endre seg, nå vi' vil legge til stiler til dem og alt vil bli klart:
#prev-btn, #next-btn (posisjon: absolutt; bredde: 50px; høyde: 50px; bakgrunnsfarge: #fff; border-radius: 50%; top: calc(50% - 25px); ) #prev- btn:hover, #neste-btn:hover ( markør: peker; ) #prev-btn ( venstre: 20px; ) #neste-btn ( høyre: 20px; )
Først plasserer vi knappene våre ved å bruke posisjon:absolutt, og kontrollerer dermed fritt deres posisjon i visningsporten vår, deretter vil vi spesifisere størrelsene på disse knappene og bruke kantradius for å runde hjørnene slik at disse knappene blir til sirkler. Fargen deres vil være hvit, det vil si #fff , og deres forskyvning fra den øvre kanten av visningsporten vil være lik halvparten av høyden til denne visningsporten minus halve høyden på selve knappen (i mitt tilfelle 25px), slik at vi kan plasser dem vertikalt i midten. Deretter spesifiserer vi at når vi holder musepekeren over dem, vil markøren endres til en peker, og til slutt vil vi fortelle knappene våre individuelt at de skal være 20 px unna kantene slik at vi kan se dem på en måte som passer oss .
Igjen, du kan style sideelementene slik du vil, jeg gir bare et eksempel på stilene jeg bestemte meg for å bruke.
Etter styling skal glideren vår se omtrent slik ut: 
Deretter går du igjen til js-filen vår, hvor vi vil beskrive funksjonen til knappene våre. Vel, la oss legge til en funksjon til, den vil vise oss forrige lysbilde:
funksjon prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ) )
Den heter prevSlide og vil bare bli kalt når prev-btn klikkes. Først sjekker vi om vi er på det første lysbildet eller ikke, her sjekker vi også om slideNow har gått utover den faktiske rekkevidden til lysbildene våre, og hvis noen av forholdene er sanne, vil vi gå til siste lysbilde, flytte lysbildeinnpakningen til den verdien vi trenger. Vi vil beregne denne verdien ved å bruke formelen: (bredden på ett lysbilde) * (antall lysbilder - 1), vi tar alt dette med et minustegn, fordi vi flytter den til venstre, viser det seg at viewporten nå vil vise oss det siste lysbildet. På slutten av denne blokken må vi også fortelle slideNow-variabelen at det siste lysbildet nå er i vårt syn.
Hvis vi ikke er på det første lysbildet, må vi flytte tilbake 1, for dette endrer vi igjen transformeringsegenskapen til slidewrapper . Formelen er: (bredde på ett lysbilde) * (nummer på gjeldende lysbilde - 2), igjen tar vi alt dette med et minustegn. Men hvorfor -2, og ikke -1, trenger vi å flytte bare ett lysbilde tilbake? Faktum er at hvis vi for eksempel er på det andre lysbildet, så er x-variabelen til transform:translate(x,0)-egenskapen til lysbildeinnpakningen allerede lik bredden på ett lysbilde, hvis vi forteller den at vi trenger for å trekke 1 fra nummeret på det gjeldende lysbildet , vil vi igjen få en, som lysbildebryteren allerede har blitt forskjøvet med, så vi må flytte de samme visningsportbreddene med 0, som betyr på slideNow - 2.
Nå trenger vi bare å legge til disse linjene i hovedblokken med kode:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Her sporer vi ganske enkelt om knappene våre ble klikket, og i dette tilfellet kaller vi funksjonene vi trenger, alt er enkelt og logisk.
La oss nå legge til lysbilde-navigasjonsknapper og gå tilbake til markeringen igjen:
Som du kan se, har en nestet liste dukket opp inne i viewporten, la oss gi den identifikatoren nav-btns , inne i den er navigasjonsknappene våre, vi tildeler dem klassen slide-nav-btn , men vi kan avslutte med markeringen, la oss gå videre til stilene:
#nav-btns (posisjon: absolutt; bredde: 100%; bunn: 20px; utfylling: 0; margin: 0; tekstjustering: center; ) .slide-nav-btn (posisjon: relativ; display: inline-block; listestil: ingen; bredde: 20px; høyde: 20px; bakgrunnsfarge: #fff; kantradius: 50%; margin: 3px; ) .slide-nav-btn:hover ( markør: peker; )
Vi gir nav-btns-blokken, der knappene våre er plassert, egenskapsposisjonen:absolutt slik at den ikke strekker visningsporten i høyden, fordi slidewrapper har egenskapen position:relative, vi setter bredden til 100% for å sentrere knappene horisontalt i forhold til viewporten ved å bruke text-align:center , og ved å bruke den nederste egenskapen lar vi blokken vår vite at den skal være på avstand på 20 px fra nedre kant.
Med knappene gjør vi det samme som med lysbildene, men nå gir vi dem display:inline-block , fordi med display:inline reagerer de ikke på bredde og høyde pga er i en absolutt plassert blokk. La oss gjøre dem hvite og, ved å bruke den allerede kjente kantradiusen, gi dem formen av en sirkel. Når vi holder musepekeren over dem, vil vi endre utseendet til markøren vår for den vanlige visningen.
La oss nå gå ned til jQuery-delen:
Først, la oss erklære en variabel navBtnId, som vil lagre indeksen til knappen vi klikket på:
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );
Her, når vi klikker på slide-nav-btn, kaller vi en funksjon som først og fremst tildeler navBtnId-variabelen indeksen til den klikkede knappen, det vil si serienummeret, siden nedtellingen starter fra null, så hvis vi klikk på den andre knappen, så skrives den til navBtnId verdi 1. Deretter gjør vi en sjekk hvor vi legger til en til serienummeret til knappen for å få et tall som om nedtellingen ikke startet fra 0, men fra 1, vi sammenligne dette tallet med nummeret på det gjeldende lysbildet, hvis de samsvarer, vil vi ikke foreta noen handlinger, fordi ønsket lysbilde allerede er i visningsporten.
Hvis lysbildet vi trenger ikke er i viewportens synsfelt, beregner vi avstanden som vi trenger for å flytte lysbildebryteren til venstre, og endrer deretter verdien til CSS-transformeringsegenskapen for å oversette (samme avstand i piksler, 0 ). Vi har allerede gjort dette mer enn én gang, så det bør ikke være noen spørsmål. På slutten lagrer vi igjen verdien til gjeldende lysbilde i slideNow-variabelen; denne verdien kan beregnes ved å legge til en til indeksen til den klikkede knappen.
Det er alt, faktisk, hvis noe ikke er klart, så vil jeg legge igjen en lenke til jsfiddle, der all koden skrevet i materialet vil bli gitt.
Takk for din oppmerksomhet!
Tags: Legg til tagger
For en tid siden begynte jeg å lære jQuery. Jeg tror alle vet at dette er navnet på det mest populære biblioteket for å utvikle og lage skript i JavaScript. Med sin hjelp er det veldig enkelt å lage spektakulære og interaktive elementer nettstedet.
I denne artikkelen vil jeg fortelle deg hvordan du lager en enkel universell skyveknapp ved hjelp av jQuery. Faktisk er nettverket veldig et stort nummer av en rekke ferdiglagde glidere, som noen ganger ser veldig fristende ut, og er ganske funksjonelle, men vi vil lage det fra bunnen av.
Så, hvilke funksjoner ved vår jQuery-glidebryter (som jeg kalte HWSlider) kan noteres?
- Brukervennlighet og design - Jeg ønsket å lage et enkelt skript uten bjeller og fløyter, så jeg brukte ikke CSS3-animasjoner, og koden viste seg å være veldig allsidig og forståelig.
- Muligheten til å sette inn både bilder og eventuell HTML-kode i lysbilder.
- Evne til å bla gjennom lysbildene både i rekkefølge (forover - tilbake) og velge hvert lysbilde (1,2,3,4...)
- Automatisk genererte lenker (forrige - neste, og med lysbildetall). Du trenger bare å sette inn det nødvendige antallet divs, og alt annet vil bli beregnet av seg selv. Vel, det kan bemerkes at antallet lysbilder er ubegrenset.
Skriptet er kompatibelt med alle moderne nettlesere: IE, Opera, Firefox, Safari, Chrome (siden glidebryteren ikke bruker CSS3).
La oss starte med HTML-oppmerkingen. Til rett sted html sider eller mal må settes inn.
Her er innholdet i lysbilde 1 Her er innholdet i lysbilde 2 Her er innholdet i lysbilde 3
Alt er enkelt her, som du kan se, kan du sette inn så mange lysbilder du vil ved å lage nye div. Du kan sette inn hvilken som helst HTML-kode i dem, for eksempel et bilde eller en tekstblokk. Bare ikke glem å inkludere selve jQuery-biblioteket sammen med alle js-skriptene. Hvis du ikke vet hvordan, se på eksempelet.
#slider-wrap( /* Wrapper for glidebryteren og knappene */ width:660px; ) #slider( /* Wrapper for glideren */ width:640px; høyde:360px; overløp: skjult; border:#eee solid 10px; position:relative; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Knapper for å endre lysbilder */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no- gjenta;) .sli -lenker .control-slide:hover( markør:peker; bakgrunnsposisjon:senter midt;) .sli-lenker .control-slide.active( bakgrunnsposisjon: midt øverst;) #prewbutton, #nesteknapp ( /* Link " Neste" og "Forrige" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) venstre midtre ingen repetisjon; opasitet:0.8; z-indeks:3; outline:ingen !viktig;) #prewbutton(left:10px;) #nextbutton( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, #nextbutton:hover( opasitet:1;)
La oss se på det mer detaljert. Først gir vi hovedblokken med IDen "slider-wrap" den nødvendige bredden. Siden alle andre blokker er satt inn i den, trenger ikke høyden å spesifiseres, det vil avhenge av hva som er inni. Deretter må vi angi dimensjonene til beholderen der lysbildene skal ligge. Dette er #slider. La oss gi den bredde og høyde, samt for eksempel en kantlinje på 10 piksler. Her er bredden 640px, som er mindre enn bredden til overordnet, siden vi legger til 10px-kanter på høyre og venstre side. Bredden på selve lysbildene (.slide) avhenger også av bredden på denne div.
Og den siste tingen: vi må sette posisjon: relativ for lysbildebeholderen siden lysbildene inni er med absolutt posisjonering. For selve lysbildene er kun bredde og høyde satt i CSS. De resterende egenskapene er satt i jQuery-skriptet.
Selector.sli-links er en blokk som vil inneholde knapper for å flytte til ønsket lysbilde. Disse knappene er enkle elementer typenummer, som automatisk settes inn i ønsket mengde, sammen med deres parent.sli-lenker. For knappene setter vi et vakkert utseende, nemlig vi gjør hver knapp firkantet, justerer dem alle i midten, og takket være overløp: skjult og tekstinnrykk:-9999px, fjerner vi teksten, og etterlater bare bakgrunnsikoner , som også endres når du holder musepekeren til dette markørelementet. For enkelhets skyld brukte jeg sprites, som reduserte antall bilder.
Deretter er den aktive knappen utformet. Vi endrer bare plasseringen av bakgrunnen. Deretter vil vi redesigne lenkene for å gå til neste og forrige lysbilde. Du kan gi dem et hvilket som helst design, akkurat som knapper. Disse koblingene settes inn automatisk i #slider. Men for å gjøre dem synlige ga jeg dem en absolutt posisjon og et topplag (z-indeks:3) slik at de skulle vises over lysbildene. Jeg tror med CSS alt er klart og enkelt her: du kan endre nesten alle egenskapene for å designe glidebryteren slik du trenger.
La oss nå se på selve scenariet:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = sant; $(document).ready(function(e) ( $(".slide").css(("posisjon" : "absolutt", "top":"0", "venstre": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(pil == "neste")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(pil == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = arrow; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("neste"); )) $ ( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + indeks + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("aktiv"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = falsk; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("neste")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pause = true;), function()(pause = usant; rotator(); )); rotator(); ));
Først lagres innstillingene i variabler: hwSlideSpeed - hastigheten på å dreie lysbildene, hwTimeOut - tiden etter at lysbildet automatisk endres, hwNeedLinks - kontrollerer koblingene "Neste" og "Forrige" - hvis verdien til denne variabelen er sant, da vil disse koblingene vises, og hvis de er falske, vil de følgelig ikke være det (som på hovedsiden til bloggen min).
Deretter installerer vi det nødvendige CSS-egenskaper for lysbilder som bruker .css()-metoden. Vi stabler blokker med lysbilder oppå hverandre ved hjelp av absolutt posisjonering, så skjuler vi dem all.hide(), og viser så bare den første. Variabelen slideNum er nummeret på det aktive lysbildet, det vil si telleren.
Hovedlogikken til jQuery-glidebryteren vår er animSlide-funksjonen. Det krever én parameter. Hvis vi sender strengene "neste" eller "prew" inn i den, vil det fungere betingede uttalelser og neste eller forrige lysbilde vises tilsvarende. Hvis vi sender et tall som en verdi, vil dette tallet bli det aktive lysbildet og det vises.
Så denne funksjonen skjuler gjeldende div, beregner en ny og viser den.
Merk at .fadeIn()-metoden, som gjør det aktive lysbildet synlig, får et andre argument. Dette er den såkalte funksjonen Ring tilbake. Det utføres når lysbildet vises fullstendig. I dette tilfellet gjøres dette for å sikre automatisk rulling av lysbildene. Rotatorfunksjonen definert nedenfor kaller opp animSlide-funksjonen igjen for å gå videre til neste lysbilde med ønsket tidsintervall: vi vil få en lukking som sikrer konstant rulling.
Alt fungerer bra, men vi må stoppe automatiseringen hvis brukeren flytter markøren til glidebryteren, eller trykker på knappene. Pausevariabelen er laget for dette formålet. Hvis verdien er positiv - sant, da automatisk veksling vil ikke bli. Ved å bruke .hover()-metoden spesifiserer vi: slett timeren hvis den kjører - clearTimeout(slideTime), og sett pause = true. Og etter å ha flyttet markøren, slå av pausen og kjør rotator()-lukkingen.
I tillegg må vi lage nye elementer på siden og plassere dem på riktig sted. Ved å bruke each()-løkken for hvert lysbilde (div med klasse .slide), vil vi lage et span-element der det er et tall - nummeret på lysbildet. Dette nummeret brukes i animasjonsfunksjonen for å flytte til lysbildet med dette nummeret. La oss pakke alt inn i en div med de nødvendige klassene, og til slutt får vi følgende markering:
0 1 2 3
Det ser ut til, hvorfor lager vi markering inne i skriptet, og ikke i HTML-koden? Faktum er at hvis brukeren for eksempel har skript deaktivert, vil han ikke se elementer som ikke vil fungere, og dette vil ikke forvirre ham. I tillegg er koden forenklet, noe som er bra for SEO.
Som et resultat vil glidebryterens layout se omtrent slik ut (jeg brukte bilder som lysbilder og installerte 5 av dem):
0
1
2
3
Nedenfor kan du se hvordan jQuery-glidebryteren vår fungerer på demosiden og laste ned alle nødvendige kilder.
Til slutt, et par punkter om integreringen av denne glideren med Drupal. Du kan legge til denne koden i en malfil, for eksempel i page.tpl.php, og legge ved skriptet som separate js-filer til temaet. Jquery i Drupal er aktivert som standard, men kjører i kompatibilitetsmodus (). Det er to alternativer for forbedring. Eller pakk inn all js-koden:
(function ($) ( // All koden din... ))(jQuery);
eller bytt ut $-symbolene i hele skriptet med jQuery. Som dette:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("posisjon" : "absolutt", "top":"0", "venstre": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // etc .
Eksemplet har allerede implementert den første metoden.
Takk for at du leste! Legg igjen kommentarer, kom igjen. Du kan også abonnere på RSS for å motta bloggoppdateringer først!
Lagt til: Det er ikke alt. Lese. Der vil vi legge til nye funksjoner i dette skriptet.
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å se bilder i stor størrelse med mulighet for brukeren til å bytte lysbilder forover og bakover. I dette tilfellet bytter selve bildene vanligvis automatisk via 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å dette stadiet av læring, for å implementere det, foreslår jeg at du bruker ren . Det blir det automatisk bryter 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 /*Beskriver utseendet til rammen, grunnlaget for den fremtidige skyveknappen */ #slides(posisjon: relativ; høyde: 415px; bredde: 100%; polstring: 0px; listestil-type: ingen; boks- skygge: 0 0 7px #010, 0 0 10px blå, 0 0 15px #010, 0 0 35px #010; ) /* Redigere visningen av bilder*/ img ( bredde: auto; høyde: 390px; polstring: 13px;) /* Indikerer at innholdslisteelementene vil vises i midten av det overordnede elementet, dvs. 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 visning blir et objekt synlig og flyttes til forgrunnen*/ .showing( opasitet: 1; z-indeks: 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.