Cykliczne zapętlenie slajdów w karuzeli
Treść zadania
W galerii mamy tablicę zdjęć:const slajdy = ["a.jpg", "b.jpg", "c.jpg"];
let nr = 0;
W dokumencie umieszczono <img id="fotoKaruzela" src="a.jpg" alt="Slajd"> oraz przycisk <button id="btnDalej">Dalej</button>.
Napisz skrypt, w którym każde kliknięcie przycisku zwiększa nr o 1, a jeśli nr >= slajdy.length, ustawia nr = 0. Zaktualizuj właściwość src obrazka na slajdy[nr].
Co będzie oceniane
- Zwiększanie indeksu przy każdym kliknięciu.
- Reset indeksu do 0 po osiągnięciu końca tablicy.
- Powrót do a.jpg po trzech kliknięciach.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Przejście cykliczne przez 3 slajdy z powrotem do pierwszego — atrybut #fotoKaruzela = a.jpg
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
const slajdy = ["a.jpg", "b.jpg", "c.jpg"];
let nr = 0;
// Zmieniaj slajdy cyklicznie po kliknięciu #btnDalej
Wskazówki
Wskazówka 1
Zapętlenie możesz osiągnąć badając warunek przekroczenia długości tablicy lub operatorem reszty z dzielenia.
Wskazówka 2
Zwiększ numer indeksu, sprawdź instrukcją warunkową czy indeks zrównał się z rozmiarem tablicy, a jeśli tak zresetuj go do zera i podmień źródło obrazka.