教程 eigene galerie mit javascript (1)

📌 相关文章

📜 教程 eigene galerie mit javascript (1)

📅 最后修改于: 2023-12-03 15:39:53.904000 🧑 作者: Mango

Eigene Galerie mit Javascript

In diesem Tutorial werden wir lernen, wie man eine eigene Galerie mit Hilfe von Javascript erstellt. Eine Galerie ist eine Sammlung von Bildern, die auf einer Webseite angezeigt werden können.

Schritt 1: HTML-Grundgerüst erstellen

Zunächst müssen wir das HTML-Grundgerüst unserer Webseite erstellen. Hierzu können wir einfach eine leere HTML-Datei erstellen und diese mit dem folgenden Code füllen:

<!DOCTYPE html>
<html>
<head>
	<title>Eigene Galerie mit Javascript</title>
</head>
<body>

</body>
</html>

Schritt 2: Bilder hinzufügen

Als nächstes fügen wir unsere Bilder zur Webseite hinzu. Hierzu legen wir einen Container mit der CSS-Klasse gallery an und fügen innerhalb dieses Containers unsere Bilder mit der CSS-Klasse gallery-item hinzu:

<!DOCTYPE html>
<html>
<head>
	<title>Eigene Galerie mit Javascript</title>
	<style>
		.gallery {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 50px;
		}
		
		.gallery-item {
			width: 300px;
			height: 200px;
			margin: 10px;
			overflow: hidden;
			border: 1px solid #ccc;
		}
		
		.gallery-item img {
			width: 100%;
			height: auto;
		}
	</style>
</head>
<body>
	<div class="gallery">
		<div class="gallery-item">
			<img src="hund.jpg" alt="Hund">
		</div>
		<div class="gallery-item">
			<img src="katze.jpg" alt="Katze">
		</div>
		<div class="gallery-item">
			<img src="vogel.jpg" alt="Vogel">
		</div>
	</div>
</body>
</html>

Schritt 3: Galerie mit Javascript verwalten

Als nächstes müssen wir unsere Galerie mit Javascript verwalten. Hierzu legen wir eine Javascript-Datei an und binden diese in unsere HTML-Datei ein:

<!DOCTYPE html>
<html>
<head>
	<title>Eigene Galerie mit Javascript</title>
	<style>
		.gallery {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 50px;
		}
		
		.gallery-item {
			width: 300px;
			height: 200px;
			margin: 10px;
			overflow: hidden;
			border: 1px solid #ccc;
		}
		
		.gallery-item img {
			width: 100%;
			height: auto;
		}
	</style>
	<script src="gallery.js"></script>
</head>
<body>
	<div class="gallery">
		<div class="gallery-item">
			<img src="hund.jpg" alt="Hund">
		</div>
		<div class="gallery-item">
			<img src="katze.jpg" alt="Katze">
		</div>
		<div class="gallery-item">
			<img src="vogel.jpg" alt="Vogel">
		</div>
	</div>
</body>
</html>

Das Javascript sieht wie folgt aus:

// Galerie-Container abrufen
var gallery = document.querySelector('.gallery');

// Bilder-Container abrufen
var galleryItems = document.querySelectorAll('.gallery-item');

// Bild-Index setzen
var currentIndex = 0;

// Bild-Wechsel-Interval starten
setInterval(function() {
	// Index erhöhen
	currentIndex++;

	// Index zurücksetzen, wenn kein weiteres Bild vorhanden ist
	if (currentIndex >= galleryItems.length) {
		currentIndex = 0;
	}

	// Aktuelles und nächstes Bild abrufen
	var currentImage = galleryItems[currentIndex];
	var nextIndex = currentIndex + 1;

	// Nächstes Index zurücksetzen, wenn kein weiteres Bild vorhanden ist
	if (nextIndex >= galleryItems.length) {
		nextIndex = 0;
	}

	var nextImage = galleryItems[nextIndex];

	// Aktuelles Bild ausblenden und nächstes Bild einblenden
	currentImage.classList.remove('show');
	nextImage.classList.add('show');
}, 3000);

Dieses Javascript wechselt alle 3 Sekunden das aktuell sichtbare Bild mit dem nächsten Bild.

Schritt 4: Fertig!

Das war's. Wir haben erfolgreich unsere eigene Galerie mit Javascript erstellt!