I den här laborationen skall du skriva javascriptkoden för att hantera ett bildspel. Följande bilden visar hur bildspelet ser ut när det är igång:
Bildspelet har två knappar för att navigera mellan bilderna, en för att gå till föregående bild och en för att gå till nästa bild. Din uppgift är att skriva koden som gör att knapparna fungerar. Bilderna som skall ingå ligger i slideshow-mappen i arkivet du laddar ner. Så vad du behöver göra att att:
- hålla reda på vilka bilder som finns i bildspelet och i vilken ordning du vill visa dem,
- hålla reda på vilken av bilderna som visas just nu,
- uppdatera bilden som visas när användaren klickar på någon av knapparna
0 - Förbered filerna
Ladda ner arbetsmaterialet för denna laboration. Packa upp zip-filen och öppna mappen lab3ex2 i VS Code. Öppna sedan filen index.html med Live Server.
1 - Bekanta dig med uppgiften
Kolla runt i filerna för att bekanta dig med dem, speciellt index.html där du kan se de olika html-elementen som du kommer att behöva interagera med. Du kommer dock bara att behöva skriva din kod i script.js.
2 - Skriv koden
Ta ett djupt andetag och börja koda. Om du har svårt att veta var du skall börja, försöka att bryta ner uppgiften i mindre delar och ta en sak i taget. Detta är en översikt över vad du behöver göra:
- Skapa en array med sökvägarna till bildfilerna som finns i mappen
slideshow/. - Skapa en variabel för att hålla reda på vilken bild som visas just nu (index i arrayen), sätt den till 0 initialt.
- Skapa klick-hanterare för de båda de båda knapparna (föregående och nästa).
- I händelsehanterarna, uppdatera indexet för den aktuella bilden beroende på vilken knapp som klickades. Öka indexet med 1 för nästa bild och minska det med 1 för föregående bild.
- Kontrollera med if-satser att indexet inte går utanför arrayens gränser. Dvs inte mindre än 0 och inte större än eller lika med arrayens längd. Om det gör det, justera indexet så att det stannar inom gränserna.
- Uppdatera
src-attributet på bild-elementet så att bilden med det aktuella indexet visas.
Extra utmaningar
För de extra utmaningarna nedan kan du behöva redigera index.html och style.css. Lägg själv till de element som behövs.
- Lägg in en text under bilden som visar vilken bild i ordningen som visas, t.ex. “Bild 2 av 5”.
- Lägg in en text som visar bildens filnamn.
- Gör så att bildspelet loopar, dvs. när man är på den sista bilden och klickar på “nästa” så kommer man tillbaka till den första bilden, och vice versa.
- Lägg till så att en slumpmässig bild visas när sidan laddas.