Jak zrobić bardzo prostą galerię w JavaScript

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>

<head>

<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>

<button id="prevBtn">Poprzedni</button>

<button id="nextBtn">Następny</button>

</div>

</body>

</html>

<!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>

<!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();

});

// 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(); });

// 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.
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().

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.