Wie erstelle ich eine Galerie mit HTML, CSS und JavaScript

HTML, CSS und JavaScript sind die wichtigsten Werkzeuge, um interaktive und schöne Webseiten zu erstellen. Wenn Sie Ihrer Website eine Bildergalerie hinzufügen möchten, benötigen Sie Kenntnisse dieser drei Technologien. Das Erstellen einer Galerie mit HTML, CSS und JavaScript kann ziemlich einfach sein, wenn Sie die Grundlagen jeder dieser Programmiersprachen kennen.

Zuerst müssen Sie HTML-Markup für Ihre Galerie erstellen. Dazu können Sie ein Tag verwenden , das Bilder und Steuerelemente enthält. Jedes Bild muss in einem separaten Tag platziert werden . Darüber hinaus können Sie andere HTML-Tags verwenden, um Steuerelemente zu erstellen, z. B. Pfeile zum Durchblättern von Bildern oder Punkte zum Anzeigen des aktuellen Bildes.

Sie können dann CSS verwenden, um Ihre Galerie zu gestalten. Sie können die Größe und Position der Bilder festlegen, eine Hintergrundfarbe festlegen, Rahmen hinzufügen und andere Stile anwenden, um Ihre Galerie attraktiver zu machen. Verwenden Sie CSS-Selektoren, um Elemente in Ihrer Galerie auszuwählen und Stile auf sie anzuwenden. Denken Sie daran, auch Animationen und Übergänge hinzuzufügen, damit Ihre Galerie glatter und professioneller aussieht.

Schließlich benötigen Sie JavaScript, um Ihrer Galerie Interaktivität hinzuzufügen. Sie können Code schreiben, damit das Bild beim Klicken auf die Pfeile zum nächsten oder vorherigen wechselt. Sie können auch Code hinzufügen, damit das entsprechende Bild angezeigt wird, wenn Sie auf die Punkte klicken. Dazu können Sie JavaScript-Ereignisse und -Methoden verwenden, um auf Elemente in Ihrer Galerie zuzugreifen und ihren Status zu ändern.

Das Erstellen einer Galerie mit HTML, CSS und JavaScript kann selbst für angehende Entwickler ein unterhaltsames und unterhaltsames Projekt sein. Sie können die Grundlagen jeder Programmiersprache lernen und lernen, sie in realen Projekten anzuwenden. Überraschen Sie Ihre Besucher mit einer schönen und funktionalen Galerie auf Ihrer Website mit diesen drei leistungsstarken Tools.

Schritt 1: Erstellen eines Galerie-Layouts

Bevor Sie mit dem Codieren der Galerie beginnen, ist es wichtig, ein Layout zu erstellen, das die Struktur und das Aussehen unserer Galerie bestimmt.

Erstellen Sie einen Container für die Galerie mit einem Tag . Der Container enthält alle Elemente der Galerie.

Fügen Sie als Nächstes einen Galerietitel hinzu, mit dem die Benutzer verstehen können, was sie sehen. Für den Titel verwenden wir das Tag .

Nach dem Titel fügen wir einen Block mit Bildern hinzu. Hier wenden wir das Tag an , um einen Container für Galeriebilder zu erstellen. Innerhalb des Containers wird jedes Bild durch ein Tag dargestellt .

Fügen Sie auch Schaltflächen hinzu, um zwischen den Galeriebildern zu navigieren. Für Schaltflächen verwenden wir das Tag .

Am Ende wird unser Galerielayout wie folgt aussehen:

Моя галерея
 Предыдущее изображениеСледующее изображение

Dies ist nur ein Beispiel für ein Galerie-Layout. Sie können es immer an Ihre Bedürfnisse und Vorlieben anpassen.

Schritt 2: Verbinden von CSS-Stilen

Um eine stilvolle und attraktive Galerie zu erstellen, müssen Sie eine CSS-Datei anhängen, die das Aussehen und die Platzierung der Elemente bestimmt.

Fügen Sie in der HTML-Datei den folgenden Code hinzu:

Dieser Code weist den Browser an, CSS-Stile herunterzuladen und anzuwenden, die in einer separaten Datei mit dem Namen "styles" definiert sind.css".

In der CSS-Datei können Sie die gewünschten Stile für die Galerie festlegen, z. B. Hintergrundfarbe, Schriftart, Blockgrößen und vieles mehr. Denken Sie daran, die Styling-Regeln mit den entsprechenden HTML-Elementen zu verknüpfen, indem Sie Selektoren verwenden.

Beispiel für die Verwendung von CSS-Stilen:

p .gallery .gallery img

In diesem Beispiel haben alle Absätze eine schwarze Textfarbe, eine Schriftgröße von 16 Pixeln und einen unteren Einzug von 10 Pixeln. Die Gallery-Klasse definiert die Stile für den Galeriebehälter, einschließlich der Hintergrundfarbe, der Einrückung und des Bildrasters. Die Stile für Bilder in der Galerie werden über den "gallery img" -Selektor definiert, sodass sie sich über die gesamte Breite des Blocks erstrecken und abgerundete Ecken haben.

Sobald die CSS-Stile verbunden sind, wird die Galerie strukturiert und ansprechend aussehen.

Fahren Sie mit dem nächsten Schritt fort, um zu erfahren, wie Sie eine JavaScript-Datei verbinden, um Ihrer Galerie Interaktivität hinzuzufügen.

Schritt 3: Hinzufügen von JavaScript zum Erstellen von Interaktivität

Jetzt werden wir JavaScript hinzufügen, um unsere Galerie interaktiver zu gestalten. In diesem Abschnitt schreiben wir einen Code, der es dem Benutzer ermöglicht, Bilder in der Galerie zu wechseln.

Zuerst werden wir Variablen erstellen, um Links zu den Elementen der Webseite zu speichern, die wir ändern werden. Wir erstellen auch eine Variable, um den aktuellen Index des Bildes zu verfolgen.

// Получаем ссылки на элементы веб-страницыconst prevButton = document.querySelector('.prev-button');const nextButton = document.querySelector('.next-button');const images = document.querySelectorAll('.gallery-image');// Создаем переменную для отслеживания текущего индекса изображенияlet currentIndex = 0;

Dann schreiben wir Ereignishandler für die Schaltflächen "Zurück" und "Weiter". Wenn der Benutzer auf die Schaltfläche "Zurück" klickt, wechseln wir zum vorherigen Bild in der Galerie. Wenn der Benutzer auf die Schaltfläche "Nächste" klickt, wechseln wir zum nächsten Bild.

// Обработчик события для кнопки "Предыдущее"prevButton.addEventListener('click', () => else // Устанавливаем активный класс на текущем изображенииimages.forEach((image, index) => else >);>);// Обработчик события для кнопки "Следующее"nextButton.addEventListener('click', () => else // Устанавливаем активный класс на текущем изображенииimages.forEach((image, index) => else >);>);

Wenn der Benutzer nun auf die Schaltfläche "Vorheriger" oder "Nächster" klickt, wechseln wir das aktuelle Bild um und setzen die aktive Klasse auf das aktuelle Bild. Dadurch können wir das aktuelle Bild visuell in der Galerie anzeigen.

Jetzt ist unsere Galerie einsatzbereit und der Benutzer kann die Bilder wechseln, indem er auf die Schaltflächen "Zurück" und "Weiter" klickt. Wir haben Interaktivität mit JavaScript hinzugefügt, was unsere Galerie für Benutzer benutzerfreundlicher und attraktiver macht.