Aby stworzyć bardzo prostą galerię zdjęć w JavaScript, możesz skorzystać z poniższego przykładu. Założenie jest takie, że mamy zbiór obrazków, które będą wyświetlane jeden po drugim za pomocą przycisków „następny” i „poprzedni”.
Krok 1: HTML
Najpierw stwórz strukturę HTML, która będzie zawierała obraz i przyciski do nawigacji.
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prosta galeria</title> <style> /* Podstawowy styl dla galerii */ #gallery { max-width: 600px; margin: 0 auto; text-align: center; } img { width: 100%; height: auto; } button { margin: 10px; padding: 10px 20px; cursor: pointer; } </style> </head> <body> <div id="gallery"> <img id="galleryImage" src="img1.jpg" alt="Galeria"> <div> <button id="prevBtn">Poprzedni</button> <button id="nextBtn">Następny</button> </div> </div> <script src="script.js"></script> </body> </html>
Krok 2: JavaScript
W pliku script.js
dodajemy funkcjonalność zmiany obrazków.
// Tablica z obrazkami const images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; // Indeks aktualnie wyświetlanego obrazka let currentImageIndex = 0; // Element img w HTML const galleryImage = document.getElementById('galleryImage'); // Funkcja do zmiany obrazka function updateImage() { galleryImage.src = images[currentImageIndex]; } // Event listener na przycisk "Następny" document.getElementById('nextBtn').addEventListener('click', function() { currentImageIndex++; if (currentImageIndex >= images.length) { currentImageIndex = 0; // Wracamy do pierwszego obrazka } updateImage(); }); // Event listener na przycisk "Poprzedni" document.getElementById('prevBtn').addEventListener('click', function() { currentImageIndex--; if (currentImageIndex < 0) { currentImageIndex = images.length - 1; // Wracamy do ostatniego obrazka } updateImage(); });
Wyjaśnienie:
- HTML:
- Mamy tutaj
<img>
do wyświetlania obrazków, a także dwa przyciski: „Poprzedni” i „Następny”. - Stylizacja jest bardzo prosta, tak aby obrazek był wycentrowany i dostosowany do szerokości kontenera.
- Mamy tutaj
- JavaScript:
- Zmienna
images
przechowuje ścieżki do obrazków. - Zmienna
currentImageIndex
śledzi, który obrazek aktualnie wyświetlamy. - Funkcja
updateImage()
aktualizuje obrazek w galerii, przypisując nowy obrazek do elementu<img>
. - Dwa event listenery do obsługi przycisków nawigacyjnych, które zmieniają indeks obrazka i wywołują funkcję
updateImage()
.
- Zmienna
Krok 3: Obrazy
Upewnij się, że masz obrazy o nazwach img1.jpg
, img2.jpg
, img3.jpg
w katalogu, w którym przechowujesz projekt.
Gotowe! Po otwarciu tego pliku w przeglądarce, będziesz mógł przełączać się między obrazkami za pomocą przycisków.