So erstellen Sie einen Image -Schieberegler mit JavaScript

Ein BildrutscheR, das mehrere in einer Webanwendung angezeigte Bilder umfasst, heißt “,"Diashow" Und "Karussell”. Es ermöglicht Ihnen, mehrere Bilder, Videos oder Grafiken in einer Webanwendung anzuzeigen. Durch das Hinzufügen eines Image -Slider zu einer Website kann die Benutzer faszinieren und ihre Aufmerksamkeit auf sich ziehen.

Wenn Sie ein JavaScript -Entwickler sind, werden Sie schnell darüber nachdenken, „JQuery -Plugins“ zu verwenden, wenn Sie aufgefordert werden, einen Image -Slider für eine Webanwendung zu erstellen. Diese Plugins sind hilfreich; Sie können jedoch auf Codekonflikte mit vorhandenen Bibliotheken und JQuery -Bibliotheken stoßen. Also, was in diesem Szenario zu tun ist? Verwenden Sie anstelle von JQuery JavaScript und erstellen Sie einen Image -Schieberegler ohne Probleme.

Diese Beschreibung lehrt das Verfahren von Erstellen ein Bild -Schieberegler In JavaScript. So lass uns anfangen!

So erstellen Sie einen Image -Schieberegler mit JavaScript

Um einen Image-Schieberegler mit JavaScript zu erstellen, müssen Sie den folgenden Anweisungen folgen:

Schritt 1: Wunsch hochladen Bilder zum Projektordner.
Schritt 2: Erforderlich hinzufügen HTML -Elemente zum "Index.html" Datei.
Schritt 3: Definieren Logik In der JavaScript -Datei.
Schritt 4: Setzen Sie die Stil des hinzugefügten HTML -Elements im “Stil.CSS" Datei.

Nach den genannten Schritten werden wir nun das Verfahren des Erstellens eines Bildschiebers mit JavaScript durchlaufen.

Notiz: Für den Demonstrationszweck verwenden wir Visual Studio Code. Sie können jedoch jeden Code -Editor Ihrer Wahl verwenden.

Schritt 1: Die gewünschten Bilder in das Projekt hochladen

Erstellen Sie in Ihrem Projekt einen neuen Ordner namens “Bilder”Und fügen Sie die gewünschten Bilder hinzu, für die Sie einen Bildschieberegler erstellen möchten.

Zum Beispiel in unserem “Bild -Schieberegler"Projektordner, wir haben eine" erstellt "Bilder"Ordner und dann drei Bilder hinzugefügt:"IMG1.JPG","IMG2.JPG", Und "IMG3.JPG”:

Schritt 2: Fügen Sie den erforderlichen HTML -Elementen zum „Index hinzu.HTML ”Datei

Im "Index.html"Datei, wir werden einen Container hinzufügen"BILDERSLIDEHOW" Verwendung der "" Schild. Dieser Behälter ist weiter in die drei Bildrutschenabschnitte unterteilt.

Zusammen mit den angegebenen Bildern ziehen wir auch zwei HTML -Symbole mit Hilfe der “hin”Anker -Tag. Der "<"Symbol wird uns zum" bringen "vorherige"Folie, während das zweite Symbol">”Gleitet zum“nächste" Bild:

❮
❯

So ist unsere ““Index.html”Datei sieht aus:

Schritt 3: Definieren Sie die Logik in der JavaScript -Datei

Wir müssen die Logik in der “definieren“Projekt.JSDatei so, dass der Bildschieber. Danach ermöglicht es uns, uns zwischen den Folien zu bewegen, indem sie die nächsten und vorherigen HTML -Symbole verwenden.

Zu diesem Zweck werden wir zunächst setzen “1" als die "CurrentIndex”Von Folien und übergeben es an die“DisplaySlides ()Funktion:

var curr CurrentIndex = 1;
Anzeigen (currentIndex);

Der "DisplaySlides ()Die Funktion akzeptiert die “CurrentIndex"Wert als Argument"num”. Im ersten Schritt holt diese Funktion alle Elemente mit dem Klassennamen ab “Bilderside”.

Dann werden wir eine hinzufügen “Wenn" Zustand "Num> Folien.Länge"Das überprüft, ob der Wert der"num"Argument ist größer als die Länge der Folien"3”. Notiere dass der "num"Wert bezieht sich auf das"CurrentIndex”Der Folien. In diesem Fall bewertet der angegebene Zustand als “Wahrheit", Die "CurrentIndex"Des Schiebereglers wird auf" eingestellt "1”. Diese Bedingung wird in der Situation angewendet, in der das letzte Bild (Folie 3) angezeigt wird und der Benutzer auf die “klickt“nächste" Taste. Auf diese Weise setzt der Schieberegler die “ErsteBild (Folie 1) auf der Diashow.

Ebenso die zweite “Wenn" Zustand "num < 1 „Wird als wahr bewertet, wenn das erste Bild (Folie 1) auf der Diashow angezeigt wird und der Benutzer auf die“ klickt “vorherige" Taste. In diesem Fall der Wert der “CurrentIndex”Wird als" eingestellt "3"Das entspricht dem Schieberegler"LängeUnd das letzte Bild (Folie 3) wird auf der Diashow angezeigt.

Auch wenn eine Folie ausgewählt wird, um mit seiner angezeigt zu werden “CurrentIndex”, Die Anzeige des Stils der beiden anderen Folien wird auf“ gesetzt “keiner”:

Funktionsdisplayslides (num)
var x;
var Slides = Dokument.GetElementsByClassName ("Imagesslides");
if (Num> Folien.Länge) currentIndex = 1
if (num < 1) currentIndex = slides.length
für (x = 0; x < slides.length; x++)
Folien [x].Stil.display = "keine";

Folien [CurrentIndex - 1].Stil.display = "block";

Auf dem Bildschiebernächste) ">"HTML -Symbol", "1”Wird als Argument an die“ verabschiedet “setslides ()Funktionen, die bedeutet, dass der Schieberegler zur nächsten Folie wechseln muss. Zu diesem Zweck die “setslides ()”Ruft auf“DisplaySlides ()”Funktion beim Bestehen“CurrentIndex += numAls Argumentation. Dieser Vorgang wird erhöht “1" im "CurrentIndexWert und dann dieses spezifische Bild auf der Diashow anzeigen.

Im anderen Fall, wenn (vorherige) “<"Symbol wird angeklickt, a"-1"Wert wird an die" übergeben "DisplaySlides ()Methode zum Anzeigen des vorherigen Bildes auf dem Schieberegler:

Funktionssätze (num)
Anzeigen (currentIndex += num);

Schritt 4: Stellen Sie den Stil des hinzugefügten HTML -Elements im „Stil ein.CSS ”Datei

Fügen Sie als nächstes den untergegebenen Code in die “hinzu“Stil.CSSDatei, um den Stil der hinzugefügten HTML -Elemente anzugeben:

.Imagebildslides
Anzeige: Keine

img
Rand: Auto;
Bildschirmsperre;
Breite: 100%;

/ * Unsere Hauptbilder-Slideshow-Container */
.Images-Slideshow
Max-Breite: 612px;
Position: Relativ;
Rand: Auto;

/*Stil für ">" Weiter und "<" previous buttons */
.Slider-Btn
Cursor: Zeiger;
Position: absolut;
Top: 50%;
Breite: Auto;
Polsterung: 8px 16px;
Rand: -22px;
Farbe: RGB (0, 0, 0);
Schriftdicke: fett;
Schriftgröße: 18px;
Übergang: 0.6s Leichtigkeit;
Border-Radius: 0 3px 3px 0;
Benutzer-Select: Keine;
Hintergrundfarbe: RGBA (255, 255, 255, 0.5);
Grenzradius: 50%;

/ * Einstellen der Position der vorherigen Taste nach links */
.vorherige
Links: 2%;

/ * Einstellen der Position der nächsten Schaltfläche rechts */
.nächste
Rechts: 2%;

/ * Bei schweber Hinzufügen einer Hintergrundfarbe *//
.Zurück: Schwebe,
.Weiter: Hover
Farbe: RGB (255, 253, 253);
Hintergrundfarbe: RGBA (0, 0, 0, 0, 0.8);

Öffnen Sie nach dem Speichern des hinzugefügten Codes die “Index.htmlDatei im Browser und die Funktionsweise des erstellten Image Sliders lesen:

Das ging darum, einen grundlegenden Image -Schieberegler mit JavaScript zu erstellen. Sie können weiter recherchieren, um eine gewisse Variation des Bildschiebers hinzuzufügen.

Abschluss

Anstatt JQuery -Plugins zu verwenden und eine zu erstellen Image Slider verwenden JavaScript wird als eine der besten Optionen angesehen. Es dauert weniger Zeit für die Implementierung und stellt sicher, dass keine Fehler oder Konflikte vorliegen. Ein Image -Schieberegler macht auch eine Webseite innovativer und erfasst die Aufmerksamkeit der Benutzer. In diesem Artikel wurde das Verfahren zum Erstellen eines Bildschiebers in JavaScript erörtert.