Hur man bygger ett JavaScript -bildspel i tre enkla steg

Om du har läst vår guide hur man gör en webbplats , du kanske undrar vad du ska göra för att förbättra dina färdigheter. Att göra ett bildspel är en förvånansvärt enkel uppgift, och en som kan lära dig värdefulla färdigheter som behövs för att få ett programmeringsjobb.

Idag ska jag visa dig hur du bygger ett JavaScript -bildspel från grunden. Låt oss hoppa in direkt!

Förkunskaper

Du måste veta några saker innan du kan börja koda. Vid sidan av en lämplig webbläsare och textredigerare efter eget val (jag rekommenderar Sublim text ), behöver du lite erfarenhet av HTML , CSS , JavaScript , och jQuery .

Om du inte är så säker på dina färdigheter, se till att du läser vår guide för att använda dokumentobjektmodellen och dessa tips för att lära dig CSS. Om du är säker på JavaScript men aldrig har använt jQuery tidigare, kolla in vår grundläggande guide till jQuery.

1. Komma igång

Detta bildspel kräver flera funktioner:

Stöd för bilder
Kontroller för att ändra bilder
En texttext
Automatiskt läge

Det verkar vara en enkel lista med funktioner. Automatiskt läge tar bilder automatiskt till nästa i sekvensen. Här är den grova skissen jag gjorde innan jag skrev någon kod:

Om du undrar varför du ska planera, ta en titt på dessa värsta programmeringsfel i historien. Detta projekt kommer inte att döda någon, men det är avgörande att ha en gedigen förståelse för kod och planeringsprocedurer innan man arbetar med större kod - även om det bara är en grov skiss.

Här är den första HTML -koden du behöver för att komma igång. Spara detta i en fil med ett lämpligt namn, t.ex. index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Så här ser koden ut:

Det är lite skräp eller hur? Låt oss bryta ner det innan vi förbättrar det.

Denna kod innehåller 'standard' HTML , huvud , stil , manus , och kropp taggar. Dessa delar är viktiga komponenter i alla webbplatser. JQuery ingår via Google CDN - inget unikt eller speciellt hittills.

Inuti kroppen finns en div med ett id showContainer . Detta är ett omslag eller en yttre behållare för att förvara bildspelet. Du kommer att förbättra detta senare med CSS. Inuti denna behållare finns det tre kodblock, var och en med ett liknande syfte.

En överordnad klass definieras med ett klassnamn på imageContainer :

Detta används för att lagra en enda bild - en bild och bildtext lagras inuti denna behållare. Varje behållare har ett unikt id, bestående av karaktärerna i_ och ett nummer. Varje behållare har ett annat nummer, från en till tre.

Som ett sista steg refereras till en bild och bildtexten lagras i en div med rubrik klass:

Dog

Jag har skapat mina bilder med numeriska filnamn och lagrat dem i en mapp som heter Bilder . Du kan kalla din allt du vill, förutsatt att du uppdaterar HTML -koden så att den matchar.

Om du vill ha mer eller mindre bilder i ditt bildspel, kopiera och klistra in eller ta bort kodblocken med imageContainer klass, kom ihåg att uppdatera filnamnen och id: erna efter behov.

Slutligen skapas navigationsknapparna. Dessa tillåter användaren att navigera genom bilderna:

 ❮  
 ❯

Dessa HTML -enhet koder används för att visa pilarna framåt och bakåt, på ett liknande sätt som hur teckensnitt med ikoner fungerar.

2. CSS

Nu när kärnstrukturen är på plats är det dags att få den att se ut Söt . Så här kommer det att se ut efter den här nya koden:

Lägg till denna CSS mellan din stil taggar:

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 mycket bättre ut nu? Låt oss ta en titt på koden.

Jag använder provbilder som alla är 670 x 503 pixlar , så detta bildspel har mestadels utformats kring bilder av den storleken. Du måste justera CSS på lämpligt sätt om du vill använda bilder av en annan storlek. Jag rekommenderar att du ändrar storlek på dina bilder till matchande storlekar - olika bilder av olika dimensioner kommer att orsaka stylingproblem.

Mest av denna CSS är självförklarande. Det finns kod för att definiera behållarens storlek för att lagra bilderna, centrera allt, ange teckensnitt, tillsammans med knapp och textfärg. Det finns några stilar du kanske inte har stött på tidigare:

markör: pekare - Detta ändrar markören från en pil till ett pekande finger när du flyttar markören över knapparna.
ogenomskinlighet: 0,65 - Detta ökar insynen i knapparna.
användarval: ingen - Detta säkerställer att du inte av misstag kan markera texten på knapparna.

Du kan se resultatet av det mesta av denna kod i knapparna:

Den mest komplexa delen här är denna konstiga linje:

.imageContainer:not(:first-child) {

Det kan se ganska ovanligt ut, men det är ganska självförklarande.

Först riktar den sig till alla element med imageContainer klass. De :inte() syntax säger att alla element i parenteserna ska vara uteslutna från denna stil. Slutligen, :förstfödde syntax säger att denna CSS bör rikta in sig på alla element som matchar namnet men ignorera det första elementet. Anledningen till detta är enkel. Eftersom detta är ett bildspel krävs bara en bild i taget. Denna CSS döljer alla bilder förutom den första.

3. JavaScript

Den sista pusselbiten är JavaScript. Detta är logiken för att faktiskt få bildspelet att fungera korrekt.

Lägg till den här koden i din manus märka:

$(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 verka kontraintuitivt, men jag kommer att hoppa över de första kodblocken och hoppa direkt till att förklara koden halvvägs-oroa dig inte, jag förklarar hela koden!

Du måste definiera två variabler. (Så här definierar du variabler i JavaScript.) Dessa variabler kan ses som de viktigaste konfigurationsvariablerna för bildspelet:

var currentImage = 1;  
var totalImages = 3;

Dessa lagrar det totala antalet bilder i bildspelet och antalet bilder som ska börja på. Om du har fler bilder ändrar du helt enkelt totala bilder variabel till det totala antalet bilder du har.

De två funktionerna öka bild och minska bilden avancera eller dra tillbaka currentImage variabel. Skulle denna variabel gå lägre än en eller högre än totala bilder , det återställs till en eller totala bilder . Detta säkerställer att bildspelet kommer att loopa när det når slutet.

Tillbaka till koden i början. Denna kod 'riktar' till nästa och föregående knappar. När du klickar på varje knapp ringer den till lämplig öka eller minska metoder. När den är klar bleknar den helt enkelt ut bilden på skärmen och bleknar i den nya bilden (enligt definitionen av currentImage variabel).

De sluta() metoden är inbyggd i jQuery. Detta avbryter alla väntande händelser. Detta säkerställer att varje knapptryckning är smidig och betyder att du inte har 100 knapptryckningar som väntar på att köra om du blir lite tokig på musen. De fadeIn (1) och fadeOut (1) metoder bleknar in eller ut bilderna efter behov. Siffran anger blekningens varaktighet i millisekunder. Prova att ändra detta till ett större antal som 500. Ett större antal resulterar i en längre övergångstid. Gå för långt, men du kan börja se konstiga händelser eller 'flimrar' mellan bildändringarna. Här är bildspelet i aktion:

Automatisk avancemang

Det här bildspelet ser ganska bra ut nu, men det behövs en sista pricken över i: et. Automatisk avancemang är en funktion som verkligen får det här bildspelet att lysa. Efter en viss tid går varje bild automatiskt vidare till nästa. Användaren kan dock fortfarande navigera framåt eller bakåt.

vilken utrustning behöver du för att starta en youtube -kanal

Detta är ett enkelt jobb med jQuery. En timer måste skapas för att köra din kod varje gång X sekunder. Istället för att skriva ny kod är det enklaste att emulera ett 'klick' på nästa bildknapp och låta den befintliga koden göra allt arbete.

Här är det nya JavaScript du behöver - lägg till detta efter minska bilden fungera:

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

Det händer inte mycket här. De window.setInterval metoden kommer att köra en kodbit regelbundet, som definieras av den tid som anges i slutet. Tiden 2500 (i millisekunder) betyder att detta bildspel kommer att gå fram var 2,5: e sekund. Ett mindre antal betyder att varje bild går framåt i snabbare takt. De klick metod utlöser knapparna för att köra koden som om en användare hade klickat på knappen med musen.

Om du är redo för din nästa JavaScript-utmaning, försök bygga en webbplats med en statisk webbplatsbyggare som GatsbyJS, eller ett front-end-ramverk som Vue. Om du är Ruby -lärare är Jekyll också ett alternativ. Så här går Jekyll och GatsbyJS mot varandra.

Bildkredit: Tharanat Sardsri via Shutterstock.com

Dela med sig Dela med sig Tweet E-post De 8 bästa webbplatserna för att ladda ner ljudböcker gratis

Ljudböcker är en stor underhållningskälla och mycket lättare att smälta. Här är de åtta bästa webbplatserna där du kan ladda ner dem gratis.

Läs Nästa Relaterade ämnen

Programmering
JavaScript
Webbdesign

Om författaren Joe Coburn(136 artiklar publicerade)

Joe är utbildad i datavetenskap från University of Lincoln, Storbritannien. Han är en professionell mjukvaruutvecklare, och när han inte flyger drönare eller skriver musik, kan han ofta hittas ta foton eller producera videor.

Mer från Joe Coburn

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera