Hoe een JavaScript SlideShow te bouwen in 3 eenvoudige stappen

Als u onze handleiding hebt gelezen over het maken van een website Hoe u een website kunt maken: voor beginners Hoe u een website kunt maken: voor beginners Vandaag zal ik u begeleiden bij het maken van een complete website vanaf nul. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden. Lees Meer, je vraagt ​​je misschien af ​​wat je moet doen om je vaardigheden te verbeteren. Het maken van een diavoorstelling met foto's is een verrassend eenvoudige taak en een die je waardevolle vaardigheden leert die je nodig hebt om een ​​programmeertaak te krijgen. 10 Programmeren van computers Taken waar nu vraag naar is 10 Programmeren van computerfuncties die op dit moment veel gevraagd zijn Sinds het landen van een programmeeropdracht kan Moeilijk zijn in het huidige landschap, overweeg je te focussen op een van de volgende concentraties om je kansen op succes te vergroten. Lees verder .

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

voorwaarden

U moet een paar dingen weten voordat u aan de slag kunt gaan met het coderen. Naast een geschikte webbrowser en teksteditor van uw keuze (ik beveel Sublime-tekst aan), hebt u enige ervaring met nodig HTML, CSS, JavaScript, en jQuery.

Als u niet zo zelfverzekerd bent over uw vaardigheden, lees dan eerst onze handleidingen over het gebruik van het JavaScript-model JavaScript en webontwikkeling: Documentmodel JavaScript en webontwikkeling gebruiken: Het document Objectmodel gebruiken In dit artikel leert u de document skelet waarmee JavaScript werkt. Als u op de hoogte bent van dit abstracte documentobjectmodel, kunt u JavaScript schrijven dat op elke webpagina werkt. Lees meer en 5 Baby stappen om te leren CSS 5 Baby stappen om CSS te leren en een kick-ass te worden CSS Sorcerer 5 Baby begint CSS te leren en een kick-ass te worden CSS Sorcerer CSS is de belangrijkste verandering die webpagina's hebben gezien in de laatste tien jaar, en het maakte de weg vrij voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees meer. Als je zeker bent van JavaScript, maar nog nooit jQuery hebt gebruikt, bekijk dan onze eenvoudige gids voor jQuery Een basisgids voor JQuery voor Javascript-programmeurs Een eenvoudige gids voor JQuery voor Javascript-programmeurs Als je een Javascript-programmeur bent, zal deze gids voor JQuery help je coderen als een ninja. Lees verder .

1. Aan de slag

Deze diavoorstelling vereist verschillende functies:

1. Ondersteuning voor afbeeldingen
2. Besturing voor het wijzigen van afbeeldingen
3. Een tekstbijschrift
4. Automatische modus

Het lijkt een eenvoudige lijst met functies. In de automatische modus worden de beelden automatisch doorgeschakeld naar de volgende in de reeks. Dit is de ruwe schets die ik heb gemaakt voordat ik een code heb geschreven:

Als je je afvraagt ​​waarom je de moeite neemt om te plannen, bekijk dan deze slechtste programmeerfouten in de geschiedenis. De 10 slechtste programmeerfouten in de geschiedenis De 10 slechtste programmeerfouten in de geschiedenis In het legendarische verleden codeerde ook vernietiging. Gevallen van een klein beetje slechte code veroorzaakten rampspoed op een belangrijk niveau. De volgende zijn 10 van de slechtste programmeerfouten in de geschiedenis. Lees verder . Met dit project wordt niemand vermoord, maar het is van cruciaal belang om een ​​goed begrip te hebben van code en planningsprocedures voordat u aan grotere code werkt - ook al is het maar een ruwe schets.

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

         
 
  
 Windmolen 
 
 
  
 Fabriek 
 
 
  
 Hond 
 
 
❮
 
❯
 
  

Dit is hoe de code eruit ziet:

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

Deze code bevat “standaard-” HTML, hoofd, stijl, script, en lichaam -tags. Deze onderdelen zijn essentiële onderdelen van elke website. JQuery wordt 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 verpakking of buitenverpakking om de diavoorstelling op te slaan. Je zult dit later verbeteren met CSS. In deze container bevinden zich drie codeblokken met elk een vergelijkbaar doel.

Een bovenliggende klasse is gedefinieerd met een klassenaam van imageContainer:

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

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

 
 Hond 

Ik heb mijn afbeeldingen gemaakt met numerieke bestandsnamen en ze opgeslagen in een map met de naam Afbeeldingen. U kunt de uwe bellen naar wens, op voorwaarde dat u de overeenkomende HTML-code bijwerkt.

Als je meer of minder afbeeldingen in je diavoorstelling wilt hebben, kopieer en plak of verwijder je de blokjes code met de imageContainer klasse, onthouden om de bestandsnamen en id's bij te werken zoals vereist.

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 een vergelijkbare manier als pictogramlettertypen werken Pictogram Lettertypen zijn geweldig voor uw site: Hier is waarom Pictogramlettertypen geweldig zijn voor uw site: Hier is Waarom Vandaag laat ik u zien welke pictogramlettertypen en hoe je ze kunt gebruiken om je website op te vrolijken. Lees verder .

2. De CSS

Nu de kernstructuur op zijn plaats is, is het tijd om het te laten lijken mooi. Hier is hoe het eruit zal zien na deze nieuwe code:

Voeg deze CSS toe tussen uw stijl tags:

html font-family: helvetica, arial;  #showContainer / * Hoofdwrapper voor alle afbeeldingen * / width: 670px; opvulling: 0; marge: 0 auto; overloop verborgen; positie: relatief;  .navButton / * Maak knoppen er leuk uit * / cursor: pointer; zweven: links; breedte: 25px; hoogte: 22 px; opvulling: 10px; margin-right: 5px; overloop verborgen; text-align: center; kleur wit; lettertype: vet; lettergrootte: 18px; achtergrond: # 000000; dekking: 0,65; gebruikersselectie: geen;  .navButton: hover opacity: 1;  .caption float: right;  .imageContainer: not (: first-child) / * Verberg alle afbeeldingen behalve de eerste * / display: none; 

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

Ik gebruik voorbeeldafbeeldingen van onze Panasonic G80 / G85 Panasonic Lumix DMC-G80 / G85 recensie Panasonic Lumix DMC-G80 / G85 recensie De Lumix G85 is de nieuwste spiegelloze camera van Panasonic, en hij pakt een serieuze stoot in de videomarkt, met HDMI out en 4K-opname - allemaal voor $ 1000! Lees meer beoordeling. Deze afbeeldingen zijn allemaal 670 x 503 pixels, dus deze diavoorstelling is meestal ontworpen rond afbeeldingen van die grootte. U moet de CSS juist aanpassen als u afbeeldingen van een andere grootte wilt gebruiken. Ik raad aan om de afmetingen van je afbeeldingen te wijzigen in overeenkomende formaten - verschillende afbeeldingen van verschillende afmetingen veroorzaken stijlproblemen.

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

1. cursor: aanwijzer - Hierdoor verandert de cursor van een pijl in een wijzende vinger wanneer u de cursor over de knoppen beweegt.
2. dekking: 0.65 - Dit verhoogt de transparantie van de knoppen.
3. gebruikersselectie: geen - Dit zorgt ervoor dat u niet per ongeluk de tekst op de knoppen kunt markeren.

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

Het meest complexe onderdeel hier is deze vreemd uitziende lijn:

.imageContainer: not (: first-child) 

Het ziet er misschien nogal ongebruikelijk uit, maar het is redelijk duidelijk.

Ten eerste is het gericht op elementen met de imageContainer klasse. De :niet() syntaxis stelt dat alle elementen binnen de haakjes moeten zijn uitgesloten van deze stijl. eindelijk, de :eerstgeborene syntaxis stelt dat deze CSS moet richten op elk element dat overeenkomt met de naam maar negeer het eerste element. De reden hiervoor is simpel. Omdat dit een diavoorstelling is, is slechts één afbeelding per keer vereist. 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 juist te laten werken.

Voeg deze code toe aan uw script label:

$ (document) .ready (function () $ ('# vorige'). on ('klik', functie () // Verander naar de vorige afbeelding $ ('# im_' + currentImage) .stop (). fadeOut (1); decreaseImage (); $ ('# im_' + currentImage) .stop (). fadeIn (1);); $ ('# next'). on ('click', function () / / Ga naar de volgende afbeelding $ ('# im_' + currentImage) .stop (). FadeOut (1); increaseImage (); $ ('# im_' + currentImage) .stop (). FadeIn (1);) ; var currentImage = 1; var totalImages = 3; function increaseImage () / * Verhoog currentImage met 1. * Resets naar 1 als groter dan totalImages * / ++ currentImage; if (currentImage> totalImages) currentImage = 1; function decreaseImage () / * HuidigeImage verlagen met 1. * Resets to totalImages indien kleiner dan 1 * / --currentImage; if (currentImage < 1)  currentImage = totalImages;   );

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

U moet twee variabelen definiëren. Deze kunnen worden beschouwd als de belangrijkste configuratievariabelen voor de diavoorstelling:

var currentImage = 1; var totalImages = 3;

Deze slaan het totale aantal afbeeldingen op in de diavoorstelling en het nummer van de afbeelding om mee te beginnen. Als u meer afbeeldingen hebt, hoeft u alleen het totalImages variabele tot het totale aantal afbeeldingen dat u hebt.

De twee functies increaseImage en decreaseImage vooruitgaan of terugtrekken huidige afbeelding variabel. Moet deze variabele lager zijn dan één, of hoger dan totalImages, het wordt gereset naar een of totalImages. Dit zorgt ervoor dat de diavoorstelling doorloopt zodra het einde is bereikt.

Terug naar de code aan het begin. Deze code “doelen” de volgende en vorige knoppen. Wanneer u op elke knop klikt, roept deze de juiste aan toenemen of verminderen methoden. Eenmaal voltooid, vervaagt het gewoon de afbeelding op het scherm en vervaagt in de nieuwe afbeelding (zoals gedefinieerd door de huidige afbeelding variable).

De hou op() methode is ingebouwd in jQuery. Hiermee annuleert u alle in behandeling zijnde gebeurtenissen. Dit zorgt ervoor dat elke druk op de knop soepel verloopt, en betekent dat je niet 100 knoppen hoeft in te drukken die allemaal wachten om te worden uitgevoerd als je een beetje gek bent op de muis. De fadeIn (1) en Fadeout (1) methoden vervagen in of uit de afbeeldingen zoals vereist. Het getal geeft de duur van de fade in milliseconden aan. Probeer dit te veranderen naar een groter getal zoals 500. Een groter aantal resulteert in een langere overgangstijd. Ga echter te ver en je kunt vreemde gebeurtenissen beginnen te zien of “flikkert” tussen de afbeelding verandert. 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 laat schijnen. Na een ingestelde tijdsperiode gaat elke afbeelding automatisch verder met de volgende afbeelding. De gebruiker kan echter nog steeds vooruit of achteruit navigeren.

Dit is een eenvoudige klus met jQuery. Er moet een timer worden gemaakt om uw code elke keer uit te voeren X seconden. In plaats van nieuwe code te schrijven, is het eenvoudigst om een ​​code te emuleren “Klik” op de volgende afbeeldingsknop en laat de bestaande code al het werk doen.

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

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

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

Heb je vandaag wat nieuwe vaardigheden geleerd? Wat is je favoriete truc om diavoorstellingen op te vrolijken? Laat het ons weten in de comments hieronder!

Beeldcredits: Tharanat Sardsri via Shutterstock.com

Ontdek meer over: JavaScript, Webdesign.