Hvordan lage en bildeslide ved hjelp av JavaScript

An Bilde lysbildeR som består av flere bilder som vises på en webapplikasjon, kalles “Lysbildefremvisning”Og“Karuseller”. Det tillater deg å vise flere bilder, videoer eller grafikk på en webapplikasjon. Å legge til en bildeslide til et nettsted kan også fascinere brukerne og fange oppmerksomheten.

Å være en JavaScript -utvikler, hvis du blir bedt om å opprette en bildeslide for en webapplikasjon, vil du raskt tenke på å bruke "jQuery -plugins". Disse plugins er nyttige; Imidlertid kan de møte kodekonflikter med eksisterende biblioteker og jQuery -biblioteker. Så hva du skal gjøre i dette scenariet? I stedet for å bruke jQuery, bruk JavaScript og lag en bildeslide uten problemer.

Denne oppskrivningen vil lære prosedyren for skape an Bilde glidebryter I JavaScript. Så la oss starte!

Hvordan lage en bildeslide ved hjelp av JavaScript

For å opprette en bildeslide ved hjelp av JavaScript, må du følge de undergitte instruksjonene:

Trinn 1: Last opp ønsket Bilder til prosjektmappen.
Steg 2: Legg til nødvendig HTML -elementer til "indeks.html”Fil.
Trinn 3: Definere logikk I JavaScript -filen.
Trinn 4: Sett stil av det ekstra HTML -elementet i “stil.CSS”Fil.

I følge de nevnte trinnene vil vi nå gå gjennom prosedyren for å opprette en bildesklyere ved hjelp av JavaScript.

Merk: For demonstrasjonsformålet bruker vi Visual Studio Code. Du kan imidlertid bruke hvilken som helst kodedaktør etter eget valg.

Trinn 1: Last opp ønskede bilder til prosjektet

I prosjektet ditt, lag en ny mappe som heter “Bilder”Og legg til de ønskede bildene til det du vil lage en glidebryter for bilder.

For eksempel i vår "Bilde glidebryter”Prosjektmappe, vi har opprettet en“Bilder”Mappe og la deretter tre bilder til den:“IMG1.jpg”,“IMG2.jpg”, Og“IMG3.jpg”:

Trinn 2: Legg til nødvendige HTML -elementer i “Indeksen.html ”-fil

I “indeks.html”Fil, vi vil legge til en beholder”Bilder-glideshow" bruker "" stikkord. Denne beholderen er videre delt inn i de tre bildeslideseksjonene.

Sammen med de spesifiserte bildene lysbilder, vil vi også legge til to HTML -symboler ved hjelp av "”Anchor Tag. “<”Symbol vil ta oss med til“tidligere”Skyv, mens det andre symbolet”>”Glir til“NESTE" bilde:

❮
❯

Slik er vår “indeks.html”Fil ser ut som:

Trinn 3: Definer logikk i JavaScript -filen

Vi må definere logikk i "prosjekt.JS”Fil på en slik måte at når glidebryteren blir lastet for første gang, viser den det første bildet på glidebryteren. Etter det tillater det oss å bevege oss mellom lysbildene ved å bruke neste og forrige HTML -symboler.

For å gjøre det, for det første, vil vi sette "1”Som“CurrentIndex”Av lysbilder og pass den til“displayslides ()”Funksjon:

var currentIndex = 1;
displayslides (CurrentIndex);

“displayslides ()”Funksjon godtar“CurrentIndex”Verdi som et argument”Num”. I det første trinnet henter denne funksjonen alle elementene med klassenavnet "Bilder”.

Deretter vil vi legge til en "hvis" betingelse "num> lysbilder.lengde”Det sjekker om verdien av"Num”Argument er større enn lengden på lysbildene”3”. Merk at “Num”Verdi refererer til“CurrentIndex”Av lysbildene. I tilfelle, hvis den spesifiserte tilstanden evaluerer som “sannhet”,“CurrentIndex”Av glidebryteren vil bli satt til“1”. Denne tilstanden vil bli brukt i situasjonen der det siste bildet (lysbilde 3) vises og brukeren klikker på “NESTE”-Knappen. Når du gjør det, vil glidebryteren sette "først”Bilde (lysbilde 1) på lysbildefremvisningen.

Tilsvarende den andre “hvis" betingelse "Num < 1 “Vil bli evaluert som sant, når det første bildet (lysbilde 1) vises på lysbildefremvisningen og brukeren klikker på“tidligere”-Knappen. I dette tilfellet verdien av "CurrentIndex”Er satt som“3”Som tilsvarer glidebryteren”lengde”Og det siste bildet (lysbilde 3) vises på lysbildefremvisningen.

Også når et lysbilde er valgt for å vise ved å bruke "CurrentIndex”, Visningen av de to andre lysbildene 'stil vil bli satt til“ingen”:

funksjon displayslides (num)
var x;
var lysbilder = dokument.getElementsByClassName ("Imageslides");
if (num> glir.lengde) currentIndex = 1
hvis (num < 1) currentIndex = slides.length
for (x = 0; x < slides.length; x++)
lysbilder [x].stil.display = "ingen";

lysbilder [CurrentIndex - 1].stil.display = "blokk";

På bildeglidebryteren, når vi klikker på (NESTE) “>”HTML -symbol,”1”Blir gitt som et argument til“SetSlides ()”Funksjon som betyr at glidebryteren må bevege seg til neste lysbilde. For dette formålet, "SetSlides ()”Påkaller”displayslides ()”Funksjon mens du passerer”CurrentIndex += num”Som et argument. Denne operasjonen øker “1”I“CurrentIndex”Verdi og viser deretter det spesifikke bildet på lysbildefremvisningen.

I det andre tilfellet, når (tidligere) “<”Symbol er klikket, et“-1”Verdien sendes til“displayslides ()”Metode for å vise det forrige bildet på glidebryteren:

Funksjon setSlides (num)
Displayslides (CurrentIndex += num);

Trinn 4: Angi stilen til det ekstra HTML -elementet i “Stilen.css ”-fil

Deretter legger du til den undergitte koden i "stil.CSS”Fil for å spesifisere stilen til de ekstra HTML -elementene:

.Bilderslider
Display: Ingen

IMG
Margin: Auto;
Display: Block;
Bredde: 100%;

/ * Våre hovedbilder-glideshow container */
.bilder-slideshow
Maks bredde: 612px;
Posisjon: relativ;
Margin: Auto;

/*Stil for ">" Neste og "<" previous buttons */
.glidebryter-btn
Markør: peker;
Posisjon: Absolutt;
Topp: 50%;
Bredde: Auto;
polstring: 8px 16px;
Margin -top: -22px;
Farge: RGB (0, 0, 0);
Fontvekt: fet;
Font-størrelse: 18px;
Overgang: 0.6s letthet;
Border-Radius: 0 3px 3px 0;
Brukervalg: Ingen;
Bakgrunnsfarge: RGBA (255, 255, 255, 0.5);
Border-Radius: 50%;

/ * Angi posisjonen til forrige knapp mot venstre */
.Forrige
Venstre: 2%;

/ * Angi plasseringen av neste knapp mot høyre */
.Neste
Til høyre: 2%;

/ * På svevet, legge til en bakgrunnsfarge */
.Forrige: Hopp,
.Neste: Hopp
Farge: RGB (255, 253, 253);
Bakgrunnsfarge: RGBA (0, 0, 0, 0.8);

Etter å ha lagret den ekstra koden, åpner du "indeks.html”Fil i nettleseren og sjekk ut arbeidet med opprettet Image Slider:

Det handlet om å lage en grunnleggende bildesklyere ved hjelp av JavaScript. Du kan videre forske for å legge til en viss variasjon i bildesklyere.

Konklusjon

I stedet for å bruke jQuery -plugins, lage en Bilde glidebryter ved hjelp av JavaScript regnes som et av de beste alternativene. Det tar kortere tid for implementering og sikrer at det ikke eksisterer feil eller konflikter. En bildglider gjør også en webside mer innovativ og fanger brukernes oppmerksomhet. Denne oppskrivningen diskuterte prosedyren for å opprette en bildeslide i JavaScript.