Een JavaScript-diavoorstelling maken in 3 eenvoudige stappen

Als je onze gids hebt gelezen op hoe maak je een website , vraagt u zich misschien af wat u nu moet doen om uw vaardigheden te verbeteren. Het maken van een diavoorstelling met foto's is een verrassend gemakkelijke taak, en een die je waardevolle vaardigheden kan leren die nodig zijn om een programmeerbaan te krijgen.

Vandaag laat ik je zien hoe je vanaf het begin een JavaScript-diavoorstelling kunt bouwen. Laten we er meteen in springen!

Vereisten

Je moet een paar dingen weten voordat je kunt beginnen met coderen. Naast een geschikte webbrowser en teksteditor naar keuze (ik raad aan Sublieme tekst ), heb je enige ervaring nodig met HTML , CSS , JavaScript , en jQuery .

Als je niet zo zeker bent van je vaardigheden, lees dan onze handleiding voor het gebruik van het documentobjectmodel en deze tips om CSS te leren. Als je vertrouwd bent met JavaScript, maar nog nooit jQuery hebt gebruikt, bekijk dan onze basisgids voor jQuery .

1. Aan de slag

Deze diavoorstelling vereist verschillende functies:

Ondersteuning voor afbeeldingen
Bedieningselementen voor het wijzigen van afbeeldingen
Een tekstbijschrift
Automatische modus

Het lijkt een eenvoudige lijst met functies. In de automatische modus gaan de afbeeldingen automatisch door naar de volgende in de reeks. Hier is de ruwe schets die ik heb gemaakt voordat ik code schreef:

Als je je afvraagt waarom plannen maken, kijk dan eens naar deze ergste programmeerfouten in de geschiedenis. Dit project zal niemand doden, maar het is van cruciaal belang om een goed begrip van code en planningsprocedures te hebben voordat je aan grotere code gaat werken - zelfs als het maar een ruwe schets is.

Dit is de eerste HTML die u nodig hebt om aan de slag te gaan. Sla dit op in een bestand met een toepasselijke naam, zoals index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Zo ziet de code eruit:

Het is toch een beetje onzin? Laten we het opsplitsen voordat we het verbeteren.

Deze code bevat 'standaard' HTML , hoofd , stijl , script , en lichaam labels. Deze onderdelen zijn essentiële onderdelen van elke website. JQuery is opgenomen via het Google CDN - tot nu toe niets unieks of speciaals.

In het lichaam is een div met een id van showContainer . Dit is een wikkel of omhulsel om de diavoorstelling in op te slaan. U zult dit later verbeteren met CSS. In deze container bevinden zich drie codeblokken, elk met een vergelijkbaar doel.

Een bovenliggende klasse is gedefinieerd met een klassenaam van afbeeldingContainer :

Dit wordt gebruikt om een enkele dia op te slaan -- een afbeelding en bijschrift worden in deze container opgeslagen. Elke container heeft een unieke id, bestaande uit de karakters in de_ en een nummer. Elke container heeft een ander nummer, van één tot drie.

Als laatste stap wordt er naar een afbeelding verwezen en wordt het bijschrift opgeslagen in een div met de onderschrift klas:

Dog

Ik heb mijn afbeeldingen gemaakt met numerieke bestandsnamen en ze opgeslagen in een map met de naam Afbeeldingen . Je kunt de jouwe noemen zoals je wilt, op voorwaarde dat je de HTML bijwerkt zodat deze overeenkomt.

Als u meer of minder afbeeldingen in uw diavoorstelling wilt hebben, kopieert en plakt u of verwijdert u de codeblokken met de afbeeldingContainer class, waarbij u eraan denkt om de bestandsnamen en id's indien nodig bij te werken.

Ten slotte worden de navigatieknoppen gemaakt. Hiermee kan de gebruiker door de afbeeldingen navigeren:

 ❮  
 ❯

Deze HTML-entiteit codes worden gebruikt om de pijlen vooruit en achteruit weer te geven, op dezelfde manier als hoe pictogramlettertypen werken.

2. De CSS

Nu de kernstructuur op zijn plaats is, is het tijd om het eruit te laten zien zeer . Zo ziet het eruit na deze nieuwe code:

Voeg deze CSS toe tussen uw stijl labels:

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;  
}

Dat ziet er nu toch een stuk beter uit? Laten we de code eens bekijken.

Ik gebruik voorbeeldafbeeldingen die allemaal zijn 670 x 503 pixels , dus deze diavoorstelling is voornamelijk ontworpen rond afbeeldingen van dat formaat. U moet de CSS op de juiste manier aanpassen als u afbeeldingen van een ander formaat wilt gebruiken. Ik raad u aan het formaat van uw afbeeldingen aan te passen naar overeenkomende formaten -- verschillende afbeeldingen van verschillende afmetingen zullen stijlproblemen veroorzaken.

Meest van deze CSS spreekt voor zich. Er is code om de grootte van de container te definiëren om de afbeeldingen op te slaan, alles in het midden uit te lijnen, het lettertype op te geven, samen met de knop- en tekstkleur. Er zijn een paar stijlen die je misschien nog niet eerder bent tegengekomen:

cursor: aanwijzer -- Dit verandert de cursor van een pijl in een wijzende vinger wanneer u uw cursor over de knoppen beweegt.
dekking: 0,65 -- Dit verhoogt de transparantie van de knoppen.
gebruiker selecteren: geen -- Dit zorgt ervoor dat u niet per ongeluk de tekst op de knoppen kunt markeren.

Je kunt het resultaat van de meeste van deze code zien in de knoppen:

Het meest complexe deel hier is deze vreemd uitziende regel:

.imageContainer:not(:first-child) {

Het ziet er misschien nogal ongewoon uit, maar het is vrij duidelijk.

Ten eerste richt het zich op alle elementen met de afbeeldingContainer klas. De :niet() syntaxis stelt dat alle elementen tussen de haakjes moeten zijn uitgesloten uit deze stijl. eindelijk, de :eerstgeborene syntaxis stelt dat deze CSS zich moet richten op elk element dat overeenkomt met de naam maar negeer het eerste element. De reden hiervoor is simpel. Aangezien dit een diavoorstelling is, is er slechts één afbeelding per keer nodig. Deze CSS verbergt alle afbeeldingen behalve de eerste.

3. Het JavaScript

Het laatste stukje van de puzzel is het JavaScript. Dit is de logica om de diavoorstelling daadwerkelijk correct te laten werken.

Voeg deze code toe aan je script label:

$(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;  
 }  
 }  
});

Het lijkt misschien contra-intuïtief, maar ik sla de eerste blokken code over en ga meteen door met het uitleggen van de code vanaf halverwege -- maak je geen zorgen, ik leg alle code uit!

U moet twee variabelen definiëren. (Hier leest u hoe u variabelen in JavaScript definieert.) Deze variabelen kunnen worden beschouwd als de belangrijkste configuratievariabelen voor de diavoorstelling:

var currentImage = 1;  
var totalImages = 3;

Deze slaan het totale aantal afbeeldingen in de diavoorstelling op en het nummer van de afbeelding om mee te beginnen. Als je meer afbeeldingen hebt, verander dan gewoon de totaalImages variabel in het totale aantal afbeeldingen dat u heeft.

De twee functies: vergrotenAfbeelding en verkleinenAfbeelding vooruit of terugtrekken de huidige afbeelding variabel. Moet deze variabele lager worden dan één, of hoger dan totaalImages , het wordt teruggezet naar één of totaalImages . Dit zorgt ervoor dat de diavoorstelling wordt herhaald zodra deze het einde heeft bereikt.

Terug naar de code aan het begin. Deze code 'target' de volgende en vorige knoppen. Wanneer u op elke knop klikt, roept deze de juiste toename of verminderen methoden. Eenmaal voltooid, vervaagt het gewoon de afbeelding op het scherm en vervaagt de nieuwe afbeelding (zoals gedefinieerd door de huidige afbeelding variabel).

De stop() methode is ingebouwd in jQuery. Hiermee worden alle lopende evenementen geannuleerd. Dit zorgt ervoor dat elke druk op de knop soepel verloopt, en betekent dat je niet 100 knopdrukken hebt die allemaal wachten om uit te voeren als je een beetje gek op de muis wordt. De fadeIn (1) en fadeOut(1) methoden fade in of uit de afbeeldingen zoals vereist. Het getal specificeert de duur van de fade in milliseconden. Probeer dit te veranderen in een groter getal, zoals 500. Een groter getal resulteert in een langere overgangstijd. Als u echter te ver gaat, kunt u vreemde gebeurtenissen of 'flikkeringen' tussen de beeldwijzigingen gaan zien. Hier is de diavoorstelling in actie:

Automatische vooruitgang

Deze diavoorstelling ziet er nu best goed uit, maar er is nog een laatste finishing touch nodig. Automatische vooruitgang is een functie die deze diavoorstelling echt zal laten schitteren. Na een bepaalde tijd gaat elke afbeelding automatisch door naar de volgende. De gebruiker kan echter nog steeds vooruit of achteruit navigeren.

beste plek om online shirts te kopen

Dit is een gemakkelijke taak met jQuery. Er moet een timer worden gemaakt om uw code elke . uit te voeren x seconden. In plaats van nieuwe code te schrijven, is het echter het gemakkelijkst om een 'klik' op de volgende afbeeldingsknop te emuleren en de bestaande code al het werk te laten doen.

Dit is het nieuwe JavaScript dat je nodig hebt -- voeg dit toe na de verkleinenAfbeelding functie:

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

Er gebeurt hier niet veel. De window.setInterval methode zal regelmatig een stuk code uitvoeren, zoals gedefinieerd door de tijd die aan het einde is opgegeven. De tijd 2500 (in milliseconden) betekent dat deze diavoorstelling elke 2,5 seconden vooruitgaat. Een kleiner aantal betekent dat elk beeld in een sneller tempo vooruitgaat. De Klik methode activeert de knoppen om de code uit te voeren alsof een gebruiker met de muis op de knop heeft geklikt.

Als je klaar bent voor je volgende JavaScript-uitdaging, probeer dan een website te bouwen met een statische websitebouwer zoals GatsbyJS of een front-end framework zoals Vue. Als je een Ruby-leerling bent, is Jekyll ook een optie. Dit is hoe Jekyll en GatsbyJS het tegen elkaar opnemen.

Afbeelding tegoed: Tharanat Sardsri via Shutterstock.com

Deel Deel Tweeten E-mail De 8 beste websites om gratis audioboeken te downloaden

Audioboeken zijn een geweldige bron van entertainment en veel gemakkelijker te verteren. Hier zijn de acht beste websites waar je ze gratis kunt downloaden.

Lees volgende Gerelateerde onderwerpen

Programmeren
JavaScript
Webdesign

Over de auteur Joe Coburn(136 artikelen gepubliceerd)

Joe is afgestudeerd in computerwetenschappen aan de Universiteit van Lincoln, VK. Hij is een professionele softwareontwikkelaar en als hij niet met drones vliegt of muziek schrijft, is hij vaak te vinden om foto's te maken of video's te maken.

Meer van Joe Coburn

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren