I den här laborationen skall bygga vidare på bildspelet från EX2. Följande bilden visar hur bildspelet ser ut när det är igång:
Du skall nu implementera automatisk bildväxling med hjälp av setInterval.
- När sidan laddas skall den första bilden visas, och efter 3 sekunder skall nästa bild visas automatiskt. Efter ytterligare 3 sekunder skall nästa bild visas, och så vidare.
- När användaren klickar på knapparna för att byta bild manuellt, skall timern för den automatiska växlingen återställas, så att det dröjer 3 sekunder till den byter automatiskt igen.
- Om användaren klickar på knappen för att visa föregående bild, så skall den automatiska växlingen fortsätta åt det hållet, och om användaren har klickat frammåt, så skall den automatiska växlingen fortsätta framåt.
- När den sista (eller första) bilden har visats skall bildspelet börja om från början.
0 - Förbered filerna
Till denna laborationen behöver du inte skapa några nya filer, utan du kommer att arbeta i samma filer som i EX2. Om du inte har gjort 3-EX2 än så är det dags nu.
1 - Bekanta dig med uppgiften
Kolla runt i filerna återbekanta dig med dem. Speciellt i script.js där du skrev koden för att byta bild när knapparna klickades. Fundera på hur du enklat möjligt kan lägga till den nya funktionaliteten.
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:
- Sätt igång en timer när sidan laddas som byter bild var 3:e sekund.
- Håll reda på i vilken riktning den automatiska växlingen skall ske med hjälp ev en variabel.
- När användaren klickar på knapparna, uppdatera riktningen för den automatiska växlingen och återställ timern.