Hvordan bygge en JavaScript -lysbildefremvisning i tre enkle trinn

Hvis du har lest vår guide på hvordan lage et nettsted , lurer du kanskje på hva du skal gjøre videre for å forbedre dine ferdigheter. Å lage et lysbildefremvisning er en overraskende enkel oppgave, og en som kan lære deg verdifulle ferdigheter som trengs for å få en programmeringsjobb.

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

Forutsetninger

Du må vite noen ting før du kan begynne å kode. Ved siden av en passende nettleser og tekstredigerer du ønsker (jeg anbefaler Sublim tekst ), trenger du litt erfaring med HTML , CSS , JavaScript , og jQuery .

Hvis du ikke er så sikker på dine ferdigheter, må du lese vår guide for bruk av dokumentobjektmodellen og disse tipsene for å lære CSS. Hvis du er trygg på JavaScript, men aldri har brukt jQuery før, kan du sjekke ut vår grunnleggende guide til jQuery.

1. Komme i gang

Denne lysbildeserien krever flere funksjoner:

Støtte for bilder
Kontroller for å endre bilder
En teksttekst
Automatisk modus

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

Hvis du lurer på hvorfor du skal planlegge, så ta en titt på disse verste programmeringsfeilene i historien. Dette prosjektet vil ikke drepe noen, men det er avgjørende å ha en solid forståelse av kode og planleggingsprosedyrer 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  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Slik ser koden ut:

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

Denne koden inneholder 'standard' HTML , hode , stil , manus , og kropp tagger. Disse delene er viktige komponenter i ethvert nettsted. JQuery er inkludert via Google CDN - ingenting unikt eller spesielt så langt.

Inne i kroppen er det en div med en id på showContainer . Dette er en innpakning eller ytterbeholder for å lagre lysbildeserien. Du vil forbedre dette senere med CSS. Inne i denne beholderen er det tre blokker med kode, hver med et lignende formål.

En overordnet klasse er definert med et klassens navn på imageContainer :

Dette brukes til å lagre et enkelt lysbilde - et bilde og bildetekst er lagret inne i denne beholderen. Hver beholder har en unik ID, som består av tegnene i_ og et tall. Hver beholder har et annet tall, fra en til tre.

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

Dog

Jeg har laget bildene mine med numeriske filnavn, og lagret dem i en mappe som heter Bilder . Du kan kalle din alt du vil, forutsatt at du oppdaterer HTML -koden slik at den samsvarer.

Hvis du vil ha flere eller færre bilder i lysbildeserien, kan du bare kopiere og lime inn eller slette kodeblokkene med imageContainer klasse, husk å oppdatere filnavnene og ID -ene etter behov.

Til slutt opprettes navigasjonsknappene. Disse lar brukeren navigere gjennom bildene:

 ❮  
 ❯

Disse HTML -enhet koder brukes til å vise pilene forover og bakover, på samme måte som hvordan ikonfonter fungerer.

2. CSS

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

Legg til denne CSS -en mellom din stil tagger:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

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

Jeg bruker eksempler på bilder 670 x 503 piksler , så denne lysbildeserien har stort sett blitt designet rundt bilder av den størrelsen. Du må justere CSS på riktig måte hvis du vil bruke bilder av en annen størrelse. Jeg anbefaler at du endrer størrelsen på bildene til matchende størrelser - forskjellige bilder av forskjellige dimensjoner vil forårsake stylingproblemer.

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

markør: peker - Dette endrer markøren fra en pil til en pekefinger når du flytter markøren over knappene.
ugjennomsiktighet: 0,65 - Dette øker gjennomsiktigheten til knappene.
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 linjen:

.imageContainer:not(:first-child) {

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

Først retter den seg mot alle elementene med imageContainer klasse. De :ikke() syntaks sier at alle elementer inne i parentesene skal være ekskludert fra denne stilen. Til slutt, :første barn syntaks sier at denne CSS -en skal målrette mot ethvert element som samsvarer med navnet men ignorere det første elementet. Grunnen til dette er enkel. Siden dette er en lysbildefremvisning, kreves bare ett bilde om gangen. Denne CSS skjuler alle bildene bortsett fra det første.

3. JavaScript

Den siste brikken i puslespillet er JavaScript. Dette er logikken for å faktisk få lysbildefremvisningen til å fungere riktig.

Legg denne koden til din manus stikkord:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Det kan virke kontraintuitivt, men jeg kommer til å hoppe over de første blokkene med kode, og hoppe rett til å forklare koden fra halvveis-ikke bekymre deg, jeg forklarer hele koden!

Du må definere to variabler. (Slik definerer du variabler i JavaScript.) Disse variablene kan betraktes som de viktigste konfigurasjonsvariablene for lysbildeserien:

var currentImage = 1;  
var totalImages = 3;

Disse lagrer det totale antallet bilder i lysbildefremvisningen, og antall bilder som skal startes på. Hvis du har flere bilder, kan du bare endre totalImages variabel til totalt antall bilder du har.

De to funksjonene øke bildet og redusere bilde gå videre eller trekke deg tilbake currentImage variabel. Skulle denne variabelen gå lavere enn en, eller høyere enn totalImages , blir den tilbakestilt til en eller totalImages . Dette sikrer at lysbildeserien vil gå i loop når den når slutten.

Tilbake til koden i begynnelsen. Denne koden 'målretter' de neste og forrige knappene. Når du klikker på hver knapp, kalles det riktig øke eller avta metoder. Når den er fullstendig, blekner den ganske enkelt bildet på skjermen og fades inn i det nye bildet (som definert av currentImage variabel).

De Stoppe() metoden er innebygd i jQuery. Dette avbryter alle ventende hendelser. Dette sikrer at hvert knappetrykk er jevnt, og betyr at du ikke har 100 knapper som venter på å bli utført hvis du blir litt gal på musen. De fadeIn (1) og fadeOut (1) metoder visne inn eller ut bildene etter behov. Tallet angir varigheten av fadesen i millisekunder. Prøv å endre dette til et større tall, for eksempel 500. Et større antall resulterer i en lengre overgangstid. Gå imidlertid for langt, og du kan begynne å se merkelige hendelser eller 'flimring' mellom bildeendringene. Her er lysbildeserien i aksjon:

Automatisk avansement

Denne lysbildeserien ser ganske bra ut nå, men det er en siste finpuss som trengs. Automatisk avansement er en funksjon som virkelig får denne lysbildeserien til å skinne. Etter en bestemt tidsperiode går hvert bilde automatisk videre til neste. Brukeren kan imidlertid fortsatt navigere fremover eller bakover.

hvordan skrive en batchfil

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 imidlertid det enkleste å etterligne et 'klikk' på neste bildeknapp, og la den eksisterende koden gjøre alt arbeidet.

Her er den nye JavaScripten du trenger - legg til denne etter redusere bilde funksjon:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

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

Hvis du er klar for din neste JavaScript-utfordring, kan du prøve å bygge et nettsted med en statisk nettstedbygger som GatsbyJS, eller et front-end-rammeverk som Vue. Hvis du er en Ruby -elev, er Jekyll også et alternativ. Slik går det for Jekyll og GatsbyJS mot hverandre.

Bildekreditt: Tharanat Sardsri via Shutterstock.com

Dele Dele kvitring E -post De 8 beste nettstedene for å laste ned lydbøker gratis

Lydbøker er en flott underholdningskilde, og mye lettere å fordøye. Her er de åtte beste nettstedene der du kan laste dem ned gratis.

Les neste Relaterte temaer

Programmering
JavaScript
Webdesign

Om forfatteren Joe Coburn(136 artikler publisert)

Joe er utdannet i informatikk fra University of Lincoln, Storbritannia. Han er en profesjonell programvareutvikler, og når han ikke flyr droner eller skriver musikk, kan han ofte bli funnet å ta bilder eller produsere videoer.

Mer fra Joe Coburn

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere