programmering

Hvordan bygge en JavaScript SlideShow i 3 enkle trinn

Hvordan bygge en JavaScript SlideShow i 3 enkle trinn / programmering

Hvis du har lest vår guide om hvordan du lager et nettsted Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere i dag, vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer, du lurer kanskje på hva du skal gjøre ved å forbedre dine ferdigheter. Å lage en lysbildefremvisning er en overraskende enkel oppgave, og en som kan lære deg verdifulle ferdigheter som trengs for å få en programmeringsjobb. 10 Dataprogrammeringsjobber som er i etterspørselen akkurat nå 10 Dataprogrammeringsjobber som er i behov akkurat nå Siden landingen av en programmeringsjobb kan Vær tøff i dagens landskap, vurder å fokusere på en av følgende konsentrasjoner for å forbedre sjansene for suksess. Les mer .

I dag skal jeg vise deg hvordan du kan lage en JavaScript-lysbildefremvisning fra bunnen av. La oss hoppe rett inn!

Forutsetninger

Du må vite noen ting før du kan komme i gang med koding. Ved siden av en passende nettleser og tekstredigerer av ditt valg (jeg anbefaler Sublime Text), trenger du litt erfaring med HTML, CSS, Javascript, og jQuery.

Hvis du ikke er så trygg på dine ferdigheter, må du sørge for at du leser våre guider til bruk av dokumentobjektmodellen JavaScript og webutvikling: Bruke dokumentobjektmodellen JavaScript og webutvikling: Bruke dokumentobjektmodellen Denne artikkelen vil introdusere deg til dokumentskjelett som JavaScript fungerer med. Å ha et arbeidskunnskap om denne abstrakte dokumentobjektmodellen, kan du skrive JavaScript som fungerer på en hvilken som helst nettside. Les mer og 5 baby trinn for å lære CSS 5 Baby trinn for å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Baby trinn for å lære CSS og bli en Kick-Ass CSS Sorcerer CSS er de viktigste endring websidene har sett i det siste tiår, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer. Hvis du er sikker på JavaScript, men aldri har brukt jQuery før, så sjekk ut vår grunnleggende guide til jQuery En grunnleggende veiledning til JQuery for Javascript-programmerere En grunnleggende veiledning til JQuery for Javascript-programmerere Hvis du er en Javascript-programmerer, vil denne veiledningen til JQuery hjelper deg med å starte kodingen som en ninja. Les mer .

1. Komme i gang

Denne lysbildeserien krever flere funksjoner:

  1. Støtte for bilder
  2. Kontrollerer for å endre bilder
  3. En teksttekst
  4. Automatisk modus

Det virker som en enkel liste over funksjoner. Automatisk modus vil automatisk flytte bilder til neste i sekvensen. Her er den grove skissen jeg gjorde før du skrev noen kode:

Hvis du lurer på hvorfor plage planleggingen, så ta en titt på disse verste programmeringsfeilene i historien. De 10 verste programmeringsfeilene i historien De 10 verste programmeringsfeilene i historien I sin store fortid, koding av ødelagt ødeleggelse også. Forekomster av en liten dårlig kode forårsaket katastrofe på et stort nivå. Følgende er 10 av de verste programmeringsfeilene i historien. Les mer . Dette prosjektet vil ikke få noen drept, men det er viktig å ha en solid forståelse av kode og planleggingsprosedyre før du jobber med større kode - selv om det bare er en grov skisse.

Her er den første HTML-en du trenger for å komme i gang. Lagre dette i en fil med et passende navn, for eksempel index.html:

    MUO Slideshow     
 
  
 Vindmølle 
 
 
  
 Anlegg 
 
 
  
 Hund 
 
 
❮
 
❯

Slik ser koden ut:

Det er litt søppel er det ikke? La oss slå det ned før vi forbedrer det.

Denne koden inneholder “standard” HTML, hode, stil, manus, og kropp tags. Disse delene er viktige komponenter på et hvilket som helst nettsted. jQuery er inkludert via Google CDN - ingenting unikt eller spesielt så langt.

Inne i kroppen er en div med et id av showContainer. Dette er en wrapper eller ytre beholder for å lagre lysbildeserien. Du vil forbedre dette senere med CSS. I denne beholderen er det tre blokker med kode, hver med en tilsvarende hensikt.

En foreldreklasse er definert med et klassenavn på imageContainer:

Dette brukes til å lagre et enkelt lysbilde - et bilde og bildetekst er lagret inne i denne beholderen. Hver container har et unikt id som består av tegnene jeg er_ og et tall. Hver container har et annet nummer, fra en til tre.

Som et siste trinn refereres et bilde, og bildeteksten lagres i en div med bildetekst klasse:

 
 Hund

Jeg har laget bildene mine med numeriske filnavn, og lagret dem i en mappe som heter Bilder. Du kan ringe deg noe du liker, forutsatt at du oppdaterer HTML-en for å matche.

Hvis du vil ha mer eller mindre bilder i lysbildefremvisningen, kan du bare kopiere og lime inn eller slette blokkene med kode med imageContainer klasse, husk å oppdatere filnavn og ids etter behov.

Endelig er navigasjonsknappene opprettet. Disse tillater brukeren å navigere gjennom bildene:

❮
 
❯

Disse HTML-enhet koder brukes til å vise frem og tilbake pilene, på samme måte som hvordan ikonfonter fungerer Ikonfonter er fantastiske for nettstedet ditt: Her er hvorfor ikonfonter er fantastiske for nettstedet ditt: Her er hvorfor i dag vil jeg vise deg hvilke ikonfonter er og hvordan du kan bruke dem til å leve opp ditt nettsted. Les mer .

2. CSS

Nå som kjernestrukturen er på plass, er det på tide å få det til å se ut ganske. Slik ser det ut etter denne nye koden:

Legg til dette CSS mellom din stil tags:

html font-family: helvetica, arial;  #showContainer / * Hovedinnpakning for alle bilder * / bredde: 670px; polstring: 0; margin: 0 auto; overløp: skjult; stilling: relativ;  .navButton / * Lag knapper ser bra ut * / markør: pointer; flyte: venstre; bredde: 25px; høyde: 22px; polstring: 10px; margin-høyre: 5px; overløp: skjult; tekst-align: center; farge: hvit; font-weight: bold; skriftstørrelse: 18px; bakgrunn: # 000000; opasitet: 0,65; brukervalg: ingen;  .navButton: hover opacity: 1;  .caption float: right;  .imageContainer: ikke (: første barn) / * Skjul alle bilder unntatt den første * / skjermen: none;

Det ser mye bedre ut akkurat nå? La oss ta en titt på koden.

Jeg bruker prøvebilder fra vår Panasonic G80 / G85 Panasonic Lumix DMC-G80 / G85-gjennomgang Panasonic Lumix DMC-G80 / G85-gjennomgang Lumix G85 er Panasonics nyeste speilfrie kamera, og det pakker en seriøs slag i videoavdelingen med HDMI ut og 4K-opptak - alt for $ 1000! Les mer anmeldelse. Disse bildene er alle 670 x 503 piksler, så denne lysbildeserien er for det meste blitt designet rundt bilder av den størrelsen. Du må justere CSS på riktig måte hvis du vil bruke bilder av forskjellig størrelse. Jeg anbefaler at du endrer størrelsen på bildene dine til tilsvarende størrelser - forskjellige bilder av forskjellige dimensjoner vil forårsake stylingsproblemer.

Mest av denne CSS er selvforklarende. Det er kode for å definere størrelsen på beholderen for å lagre bildene, sentrere alt, angi skrift, sammen med knapp og tekstfarge. Det er noen stiler du kanskje ikke har kommet over før:

  1. markør: peker - Dette endrer markøren fra en pil til en pekefinger når du beveger markøren over knappene.
  2. opasitet: 0,65 - Dette øker gjennomsiktigheten av knappene.
  3. brukervalg: ingen - Dette sikrer at du ikke ved et uhell kan markere teksten på knappene.

Du kan se resultatet av det meste av denne koden i knappene:

Den mest komplekse delen her er denne merkelige utseende linjen:

.imageContainer: ikke (: første barn)

Det kan se ganske uvanlig ut, men det er ganske selvforklarende.

Først målretter den seg mot noen elementer med imageContainer klasse. De :ikke() syntaxen sier at noen elementer i parentes skal være ekskludert fra denne stilen. Endelig, den :første barn syntaxen sier at dette CSS skal målrette mot ethvert element som matcher navnet men ignorere det første elementet. Årsaken til dette er enkelt. Siden dette er en lysbildefremvisning, er det bare nødvendig med ett bilde om gangen. Denne CSS gjemmer alle bildene bortsett fra den første.

3. JavaScript

Det siste stykket av puslespillet er JavaScript. Dette er logikken for å faktisk gjøre lysbildeserien funksjonen riktig.

Legg denne koden til din manus stikkord:

$ (dokument) .ready (funksjon () $ ('# forrige'). på ('klikk', funksjon () // Endre til forrige bilde $ ('# im_' + currentImage) .stop (). fadeOut (1);); $ ('# next'). på ('klikk', funksjon () / / Endre til neste bilde $ ('# im_' + currentImage) .stop () .fadeOut (1); increaseImage (); $ ('# im_' + currentImage) .stop () .fadeIn (1);) ; var currentImage = 1; var totalImages = 3; funksjon increaseImage () / * Øk currentImage med 1. * Tilbakestiller til 1 hvis større enn totalImages * / ++ currentImage; if (currentImage> totalImages) currentImage = 1; funksjon decreaseImage () / * Reduser currentImage by 1. * Tilbakestiller til totalImages hvis mindre enn 1 * / --currentImage; hvis (currentImage < 1)  currentImage = totalImages;   );

Det kan virke motstridende, men jeg skal hoppe over de første kodekodene, og hoppe rett til å forklare koden fra halvveis til - ikke bekymre deg, jeg forklarer all koden!

Du må definere to variabler. Disse kan tenkes som de viktigste konfigurasjonsvariablene for lysbildefremvisningen:

var currentImage = 1; var totalImages = 3;

Disse lagrer totalt antall bilder i lysbildeserien, og nummeret på bildet som skal startes på. Hvis du har flere bilder, endrer du bare totalImages variabel til totalt antall bilder du har.

De to funksjonene increaseImage og decreaseImage forhånd eller trekke seg tilbake currentImage variabel. Skal denne variabelen gå lavere enn en eller høyere enn totalImages, det blir tilbakestilt til en eller totalImages. Dette sikrer at lysbildeserien slår seg når den når slutten.

Tilbake til koden i begynnelsen. Denne koden “mål” neste og forrige knapper. Når du klikker på hver knapp, ringer den til riktig øke eller avta metoder. Når det er fullført, blir det bare utseende på bildet på skjermen, og blekner i det nye bildet (som definert av currentImage variabel).

De Stoppe() Metoden er innebygd i jQuery. Dette avbryter eventuelle ventende hendelser. Dette sikrer at hver knappetrykk er glatt, og betyr at du ikke har 100 knapper presser alle som venter på å kjøre hvis du går litt gal på musen. De fadeIn (1) og fadeout (1) metoder fade inn eller ut bildene etter behov. Tallet angir varigheten av fade i millisekunder. Prøv å endre dette til et større tall, for eksempel 500. Et større tall gir en lengre overgangstid. Gå for langt, men du kan begynne å se rare hendelser eller “flimrer” mellom bildet endres. Her er lysbildeserien i aksjon:

Automatisk fremskritt

Denne lysbildeserie ser ganske bra ut nå, men det er en siste etterbehandling som trengs. Automatisk fremskritt er en funksjon som virkelig vil gjøre denne lysbildeserien skinnende. Etter et bestemt tidsrom vil hvert bilde automatisk gå videre til neste. Brukeren kan imidlertid fortsatt navigere fremover eller bakover.

Dette er en enkel jobb med jQuery. En timer må opprettes for å utføre koden hver X sekunder. I stedet for å skrive ny kode, er det enkleste å gjøre å emulere en “klikk” på neste bildeknapp, og la den eksisterende koden gjøre alt arbeidet.

Her er den nye JavaScript du trenger - legg til dette etter decreaseImage funksjon:

window.setInterval (function () $ ('# previous'). klikk ();, 2500);

Det skjer ikke mye her. De window.setInterval Metoden vil kjøre et stykke kode regelmessig, som definert av tiden spesifisert på slutten. Tiden 2500 (i millisekunder) betyr at denne lysbildefremvisningen vil gå hvert 2,5 sekund. Et mindre antall betyr at hvert bilde vil gå raskere. De klikk Metoden utløser knappene for å kjøre koden som om en bruker hadde klikket på knappen med musen.

Lærte du noen nye ferdigheter i dag? Hva er ditt favoritttrick for å leve opp lysbildefremvisninger? Gi oss beskjed i kommentarene nedenfor!

Bildekreditt: Tharanat Sardsri via Shutterstock.com

Utforsk mer om: JavaScript, Webdesign.