So erstellen Sie eine JavaScript-Diashow in 3 einfachen Schritten

Wenn Sie unseren Leitfaden gelesen haben auf Wie erstelle ich eine Website? , fragen Sie sich vielleicht, was Sie als Nächstes tun können, um Ihre Fähigkeiten zu verbessern. Eine Foto-Diashow zu erstellen ist eine überraschend einfache Aufgabe, die Ihnen wertvolle Fähigkeiten beibringen kann, die Sie für einen Programmierjob benötigen .

Heute zeige ich Ihnen, wie Sie eine JavaScript-Diashow von Grund auf neu erstellen. Lass uns gleich einsteigen!

Voraussetzungen

Sie müssen einige Dinge wissen, bevor Sie mit dem Programmieren beginnen können. Neben einem geeigneten Webbrowser und Texteditor Ihrer Wahl (ich empfehle Erhabener Text ), du brauchst etwas Erfahrung mit HTML , CSS , JavaScript , und jQuery .

Wenn Sie sich in Ihren Fähigkeiten nicht so sicher sind, lesen Sie unbedingt unseren Leitfaden zur Verwendung des Dokumentobjektmodells und diese Tipps zum Erlernen von CSS . Wenn Sie mit JavaScript vertraut sind, aber noch nie jQuery verwendet haben, lesen Sie unsere grundlegende Anleitung zu jQuery .

1. Erste Schritte

Diese Diashow erfordert mehrere Funktionen:

Unterstützung für Bilder
Steuerelemente zum Ändern von Bildern
Eine Textbeschriftung
Automatischer Modus

Es scheint eine einfache Liste von Funktionen zu sein. Im Automatikmodus werden die Bilder automatisch zum nächsten Bild in der Sequenz weitergeschaltet. Hier ist die grobe Skizze, die ich gemacht habe, bevor ich Code geschrieben habe:

Wenn Sie sich fragen, warum Sie sich die Mühe machen, zu planen, dann werfen Sie einen Blick auf diese schlimmsten Programmierfehler der Geschichte. Dieses Projekt wird niemanden umbringen, aber es ist wichtig, ein solides Verständnis von Code und Planungsverfahren zu haben, bevor Sie an größerem Code arbeiten – auch wenn es nur eine grobe Skizze ist.

Hier ist der anfängliche HTML-Code, den Sie für den Anfang benötigen. Speichern Sie dies in einer Datei mit einem geeigneten Namen, wie z index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

So sieht der Code aus:

Es ist ein bisschen Müll, nicht wahr? Lassen Sie uns es aufschlüsseln, bevor wir es verbessern.

Dieser Code enthält 'Standard' HTML , Kopf , Stil , Skript , und Karosserie Stichworte. Diese Teile sind wesentliche Bestandteile jeder Website. JQuery ist über das Google CDN enthalten - bisher nichts Einzigartiges oder Besonderes.

Im Körper befindet sich ein div mit einer ID von Container anzeigen . Dies ist ein Wrapper oder äußerer Container zum Speichern der Diashow. Sie werden dies später mit CSS verbessern. In diesem Container befinden sich drei Codeblöcke, die alle einen ähnlichen Zweck haben.

Eine Elternklasse wird mit dem Klassennamen definiert imageContainer :

Dies wird verwendet, um eine einzelne Folie zu speichern – ein Bild und eine Beschriftung werden in diesem Container gespeichert. Jeder Container hat eine eindeutige ID, bestehend aus den Zeichen im_ und eine Zahl. Jeder Container hat eine andere Nummer, von eins bis drei.

Als letzter Schritt wird ein Bild referenziert und die Bildunterschrift wird in einem div mit dem gespeichert Untertitel Klasse:

Dog

Ich habe meine Bilder mit numerischen Dateinamen erstellt und in einem Ordner namens . gespeichert Bilder . Sie können Ihren beliebig nennen, vorausgesetzt, Sie aktualisieren den HTML-Code entsprechend.

Wenn Sie mehr oder weniger Bilder in Ihrer Diashow haben möchten, kopieren Sie einfach die Codeblöcke und fügen Sie sie ein oder löschen Sie sie mit den imageContainer -Klasse und denken Sie daran, die Dateinamen und IDs nach Bedarf zu aktualisieren.

Schließlich werden die Navigationsschaltflächen erstellt. Diese ermöglichen dem Benutzer, durch die Bilder zu navigieren:

 ❮  
 ❯

Diese HTML-Entität Codes werden verwendet, um die Vorwärts- und Rückwärtspfeile anzuzeigen, ähnlich wie bei Symbolschriftarten .

2. Das CSS

Jetzt, da die Kernstruktur vorhanden ist, ist es an der Zeit, es so aussehen zu lassen ziemlich . So sieht es nach diesem neuen Code aus:

Fügen Sie dieses CSS zwischen Ihren Stil Stichworte:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

Das sieht jetzt viel besser aus, oder? Werfen wir einen Blick auf den Code.

Ich verwende Beispielbilder, die alle sind 670 x 503 Pixel , daher wurde diese Diashow hauptsächlich um Bilder dieser Größe herum entwickelt. Sie müssen das CSS entsprechend anpassen, wenn Sie Bilder einer anderen Größe verwenden möchten. Ich empfehle Ihnen, die Größe Ihrer Bilder auf übereinstimmende Größen zu ändern – unterschiedliche Bilder mit unterschiedlichen Abmessungen können zu Stylingproblemen führen.

Die meisten dieses CSS ist selbsterklärend. Es gibt Code, um die Größe des Containers zum Speichern der Bilder zu definieren, alles zentriert auszurichten, die Schriftart sowie die Schaltflächen- und Textfarbe anzugeben. Es gibt ein paar Stile, die Ihnen vielleicht noch nie begegnet sind:

Cursor: Zeiger -- Dadurch ändert sich der Cursor von einem Pfeil in einen Zeigefinger, wenn Sie den Cursor über die Schaltflächen bewegen.
Deckkraft: 0,65 -- Dies erhöht die Transparenz der Schaltflächen.
Benutzerauswahl: keine -- Dadurch wird sichergestellt, dass Sie den Text auf den Schaltflächen nicht versehentlich hervorheben.

Sie können das Ergebnis des Großteils dieses Codes in den Schaltflächen sehen:

Der komplexeste Teil hier ist diese seltsam aussehende Zeile:

.imageContainer:not(:first-child) {

Es mag ziemlich ungewöhnlich aussehen, ist aber ziemlich selbsterklärend.

Erstens zielt es auf alle Elemente mit dem imageContainer Klasse. Die :nicht() Syntax besagt, dass alle Elemente innerhalb der Klammern ausgeschlossen von diesem Stil. Endlich, das :erstes Kind Syntax besagt, dass dieses CSS auf jedes Element abzielen sollte, das dem Namen entspricht aber ignorieren Sie das erste Element. Der Grund dafür ist einfach. Da es sich um eine Diashow handelt, ist jeweils nur ein Bild erforderlich. Dieses CSS verbirgt alle Bilder außer dem ersten.

3. Das JavaScript

Das letzte Puzzleteil ist das JavaScript. Dies ist die Logik, um die Diashow-Funktion tatsächlich richtig zu machen.

Füge diesen Code zu deinem . hinzu Skript Schild:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Es mag kontraintuitiv erscheinen, aber ich werde die ersten Codeblöcke überspringen und direkt dazu übergehen, den Code ab der Hälfte zu erklären – keine Sorge, ich erkläre den gesamten Code!

Sie müssen zwei Variablen definieren. (So definieren Sie Variablen in JavaScript.) Diese Variablen können als die wichtigsten Konfigurationsvariablen für die Diashow angesehen werden:

var currentImage = 1;  
var totalImages = 3;

Diese speichern die Gesamtzahl der Bilder in der Diashow und die Nummer des Bildes, mit dem begonnen werden soll. Wenn Sie mehr Bilder haben, ändern Sie einfach die totalImages variabel auf die Gesamtzahl der Bilder, die Sie haben.

Die beiden Funktionen Bild vergrößern und verringernImage vorrücken oder zurückziehen aktuelles Bild Variable. Sollte diese Variable kleiner als eins oder höher als . werden totalImages , es wird auf eins zurückgesetzt oder totalImages . Dadurch wird sichergestellt, dass die Diashow wiederholt wird, sobald sie das Ende erreicht hat.

Zurück zum Code am Anfang. Dieser Code 'zielt' auf die Schaltflächen 'Weiter' und 'Zurück'. Wenn Sie auf jede Schaltfläche klicken, ruft sie die entsprechende Zunahme oder verringern Methoden. Nach Abschluss blendet es einfach das Bild auf dem Bildschirm aus und blendet das neue Bild ein (wie durch die aktuelles Bild Variable).

Die halt() -Methode ist in jQuery integriert. Dadurch werden alle ausstehenden Ereignisse abgebrochen. Dies stellt sicher, dass jeder Tastendruck reibungslos abläuft und Sie nicht 100 Tastendrücke haben, die alle darauf warten, ausgeführt zu werden, wenn Sie mit der Maus etwas verrückt werden. Die Einblenden (1) und Ausblenden(1) Methoden blenden die Bilder nach Bedarf ein oder aus. Die Zahl gibt die Dauer der Überblendung in Millisekunden an. Versuchen Sie, dies in eine größere Zahl wie 500 zu ändern. Eine größere Zahl führt zu einer längeren Übergangszeit. Wenn Sie jedoch zu weit gehen, werden Sie möglicherweise seltsame Ereignisse oder „Flimmern“ zwischen den Bildänderungen sehen. Hier ist die Diashow in Aktion:

Automatischer Fortschritt

Diese Diashow sieht jetzt ziemlich gut aus, aber es ist noch ein letzter Feinschliff erforderlich. Der automatische Fortschritt ist eine Funktion, die diese Diashow wirklich zum Glänzen bringt. Nach einer bestimmten Zeit geht jedes Bild automatisch zum nächsten über. Der Benutzer kann jedoch weiterhin vorwärts oder rückwärts navigieren.

Wie schreibe ich eine Batch-Datei?

Dies ist eine einfache Aufgabe mit jQuery. Es muss ein Timer erstellt werden, um Ihren Code jedes Mal auszuführen x Sekunden. Anstatt neuen Code zu schreiben, ist es jedoch am einfachsten, einen „Klick“ auf die Schaltfläche für das nächste Bild zu emulieren und den vorhandenen Code die ganze Arbeit erledigen zu lassen.

Hier ist das neue JavaScript, das Sie benötigen – fügen Sie es nach dem hinzu verringernImage Funktion:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Hier ist nicht viel los. Die window.setInterval -Methode führt regelmäßig einen Codeabschnitt aus, der durch die am Ende angegebene Zeit definiert ist. Die Zeit 2500 (in Millisekunden) bedeutet, dass diese Diashow alle 2,5 Sekunden weiterläuft. Eine kleinere Zahl bedeutet, dass jedes Bild schneller voranschreitet. Die klicken -Methode veranlasst die Schaltflächen, den Code auszuführen, als ob ein Benutzer mit der Maus auf die Schaltfläche geklickt hätte.

Wenn Sie bereit für Ihre nächste JavaScript-Herausforderung sind, versuchen Sie, eine Website mit einem statischen Website-Builder wie GatsbyJS oder einem Front-End-Framework wie Vue zu erstellen. Wenn Sie ein Ruby-Lerner sind, ist Jekyll auch eine Option. So schlagen sich Jekyll und GatsbyJS gegeneinander.

Bildnachweis: Tharanat Sardsri über Shutterstock.com

Teilen Teilen Tweet Email Die 8 besten Websites zum kostenlosen Herunterladen von Hörbüchern

Hörbücher sind eine großartige Unterhaltungsquelle und viel leichter zu verdauen. Hier sind die acht besten Websites, auf denen Sie sie kostenlos herunterladen können.

Weiter lesen Verwandte Themen

Programmierung
JavaScript
Web-Design

Über den Autor Joe Coburn(136 veröffentlichte Artikel)

Joe hat einen Abschluss in Informatik an der University of Lincoln, Großbritannien. Er ist ein professioneller Softwareentwickler und wenn er nicht gerade Drohnen fliegt oder Musik schreibt, ist er oft beim Fotografieren oder Videoproduzieren anzutreffen.

Mehr von Joe Coburn

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren