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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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:

  1. 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.
  2. 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.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl