Sådan opbygges et JavaScript -diasshow i 3 nemme trin

Hvis du har læst vores guide til hvordan man laver et websted , kan du undre dig over, hvad du skal gøre næste gang for at forbedre dine færdigheder. At lave et foto diasshow er en overraskende let opgave, og en der kan lære dig værdifulde færdigheder, der er nødvendige for at få et programmeringsjob.

I dag viser jeg dig, hvordan du bygger et JavaScript -diasshow fra bunden. Lad os springe lige ind!

Forudsætninger

Du skal vide et par ting, før du kan komme i gang med at kode. Ved siden af en passende webbrowser og tekstredigerer efter eget valg (jeg anbefaler Sublim tekst ), skal du have lidt erfaring med HTML , CSS , JavaScript , og jQuery .

Hvis du ikke er så sikker på dine færdigheder, skal du læse vores vejledning til brug af dokumentobjektmodellen og disse tip til at lære CSS. Hvis du er sikker på JavaScript, men aldrig har brugt jQuery før, så tjek vores grundlæggende guide til jQuery.

1. Kom godt i gang

Dette diasshow kræver flere funktioner:

Understøttelse af billeder
Kontrolelementer til ændring af billeder
En teksttekst
Automatisk tilstand

Det virker som en simpel liste over funktioner. Automatisk tilstand vil automatisk fremføre billeder til den næste i sekvensen. Her er den grove skitse, jeg lavede, før jeg skrev nogen kode:

Hvis du undrer dig over, hvorfor du gider planlægge, så tag et kig på disse værste programmeringsfejl i historien. Dette projekt får ingen dræbt, men det er afgørende at have en solid forståelse af kode og planlægningsprocedurer, før man arbejder på større kode - selvom det kun er en grov skitse.

Her er den første HTML, du skal bruge for at komme i gang. Gem dette i en fil med et passende navn, f.eks index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Sådan ser koden ud:

Det er en smule vrøvl ikke sandt? Lad os bryde det ned, før vi forbedrer det.

Denne kode indeholder 'standard' HTML , hoved , stil , manuskript , og legeme mærker. Disse dele er væsentlige komponenter på ethvert websted. JQuery er inkluderet via Google CDN - intet unikt eller specielt indtil videre.

Inde i kroppen er en div med et id på showContainer . Dette er en indpakning eller ydre beholder til opbevaring af diasshowet. Du forbedrer dette senere med CSS. Inde i denne beholder er der tre kodeblokke, hver med et lignende formål.

En forældreklasse er defineret med et klassens navn på imageContainer :

Dette bruges til at gemme et enkelt dias - et billede og billedtekst er gemt inde i denne beholder. Hver beholder har et unikt id, der består af tegnene i_ og et nummer. Hver beholder har et andet nummer, fra en til tre.

Som et sidste trin refereres der til et billede, og billedteksten gemmes inde i en div med billedtekst klasse:

Dog

Jeg har oprettet mine billeder med numeriske filnavne og gemt dem i en mappe kaldet Billeder . Du kan kalde din alt, hvad du vil, forudsat at du opdaterer HTML'en, så den matcher.

Hvis du gerne vil have flere eller færre billeder i dit diasshow, skal du blot kopiere og indsætte eller slette kodeblokkene med imageContainer klasse, husker at opdatere filnavne og id'er efter behov.

Endelig oprettes navigationsknapperne. Disse giver brugeren mulighed for at navigere gennem billederne:

 ❮  
 ❯

Disse HTML -enhed koder bruges til at vise pilene frem og tilbage på en måde, der ligner, hvordan ikonskrifttyper fungerer.

2. CSS

Nu hvor kernestrukturen er på plads, er det tid til at få det til at se ud smuk . Sådan ser det ud efter denne nye kode:

Tilføj denne CSS mellem din stil tags:

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 meget bedre ud nu? Lad os tage et kig på koden.

Jeg bruger alle eksempler på billeder 670 x 503 pixels , så dette diasshow er for det meste blevet designet omkring billeder af den størrelse. Du skal justere CSS korrekt, hvis du vil bruge billeder af en anden størrelse. Jeg anbefaler, at du ændrer størrelsen på dine billeder til matchende størrelser - forskellige billeder af forskellige dimensioner vil forårsage stylingproblemer.

Mest af denne CSS er selvforklarende. Der er kode til at definere beholderens størrelse til at gemme billederne, centrere alt, angive skrifttypen sammen med knap og tekstfarve. Der er et par stilarter, du måske ikke har stødt på før:

markør: markør - Dette ændrer markøren fra en pil til en pegefinger, når du flytter markøren over knapperne.
uigennemsigtighed: 0,65 - Dette øger gennemsigtigheden af knapperne.
bruger-vælg: ingen - Dette sikrer, at du ikke ved et uheld kan fremhæve teksten på knapperne.

Du kan se resultatet af det meste af denne kode i knapperne:

Den mest komplekse del her er denne mærkelige linje:

.imageContainer:not(:first-child) {

Det kan se ganske usædvanligt ud, men det er ganske selvforklarende.

For det første er det målrettet mod alle elementer med imageContainer klasse. Det :ikke() syntaks angiver, at alle elementer inde i parenteserne skal være udelukket fra denne stil. Endelig er : første barn syntaks angiver, at denne CSS skal målrette mod ethvert element, der matcher navnet men ignorere det første element. Årsagen til dette er enkel. Da dette er et diasshow, kræves der kun ét billede ad gangen. Denne CSS skjuler alle billederne bortset fra det første.

3. JavaScript

Den sidste brik i puslespillet er JavaScript. Dette er logikken for faktisk at få diasshowet til at fungere korrekt.

Tilføj denne kode til din manuskript tag:

$(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 vil springe over de første kodeblokke og springe direkte til at forklare koden halvvejs-bare rolig, jeg forklarer hele koden!

Du skal definere to variabler. (Sådan defineres variabler i JavaScript.) Disse variabler kan betragtes som de vigtigste konfigurationsvariabler for diasshowet:

var currentImage = 1;  
var totalImages = 3;

Disse gemmer det samlede antal billeder i diasshowet, og antallet af billedet, der skal startes på. Hvis du har flere billeder, skal du blot ændre totalbilleder variabel til det samlede antal billeder, du har.

De to funktioner øge billede og reducere billede frem eller træk tilbage nuværende billede variabel. Skal denne variabel gå lavere end en eller højere end totalbilleder , det bliver nulstillet til en eller totalbilleder . Dette sikrer, at diasshowet går i loop, når det når enden.

Tilbage til koden i starten. Denne kode 'mål' de næste og forrige knapper. Når du klikker på hver knap, kalder den den relevante øge eller formindske metoder. Når det er færdigt, falmer det simpelthen billedet på skærmen og falmer i det nye billede (som defineret af nuværende billede variabel).

Det hold op() metode er indbygget i jQuery. Dette aflyser alle ventende begivenheder. Dette sikrer, at hvert tastetryk er glat, og betyder, at du ikke har 100 knapper, der venter på at blive udført, hvis du bliver lidt vild med musen. Det fadeIn (1) og fadeOut (1) metoder fade ind eller ud af billederne efter behov. Tallet angiver varigheden af fade i millisekunder. Prøv at ændre dette til et større tal, f.eks. 500. Et større antal resulterer i en længere overgangstid. Gå dog for langt, og du kan begynde at se mærkelige begivenheder eller 'flimrer' mellem billedændringerne. Her er diasshowet i aktion:

Automatisk avancement

Dette diasshow ser ret godt ud nu, men der er brug for en sidste prikken over i'et. Automatisk avancement er en funktion, der virkelig får dette diasshow til at skinne. Efter en bestemt periode går hvert billede automatisk videre til det næste. Brugeren kan dog stadig navigere frem eller tilbage.

hvordan man roterer video i medieafspiller

Dette er et let job med jQuery. Der skal oprettes en timer for at udføre din kode hver x sekunder. I stedet for at skrive ny kode er den nemmeste ting imidlertid at efterligne et 'klik' på den næste billedknap og lade den eksisterende kode udføre alt arbejdet.

Her er det nye JavaScript, du har brug for - tilføj dette efter reducere billede fungere:

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

Der sker ikke meget her. Det window.setInterval metode kører et stykke kode regelmæssigt, som defineret af det tidspunkt, der er angivet i slutningen. Tiden 2500 (i millisekunder) betyder, at dette diasshow vil gå frem hvert 2,5 sekund. Et mindre antal betyder, at hvert billede vil rykke frem i et hurtigere tempo. Det klik metode udløser knapperne til at køre koden, som om en bruger havde klikket på knappen med deres mus.

Hvis du er klar til din næste JavaScript-udfordring, kan du prøve at bygge et websted med en statisk webstedsbygger som GatsbyJS eller en front-end ramme som Vue. Hvis du er en Ruby -elev, er Jekyll også en mulighed. Her er hvordan Jekyll og GatsbyJS klarer sig mod hinanden.

Billedkredit: Tharanat Sardsri via Shutterstock.com

Del Del Tweet E -mail De 8 bedste websteder til gratis download af lydbøger

Lydbøger er en fantastisk underholdningskilde og meget lettere at fordøje. Her er de otte bedste websteder, hvor du kan downloade dem gratis.

Læs Næste Relaterede emner

Programmering
JavaScript
Webdesign

Om forfatteren Joe Coburn(136 artikler udgivet)

Joe er uddannet i datalogi fra University of Lincoln, UK. Han er en professionel softwareudvikler, og når han ikke flyver med droner eller skriver musik, kan han ofte findes tage fotos eller producere videoer.

Mere fra Joe Coburn

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere