Come creare un cursore di immagine usando JavaScript

UN Slide dell'immaginer che comprende diverse immagini visualizzate su un'applicazione Web è chiamata "Presentazione" E "Giostre". Ti consente di mostrare più immagini, video o grafica su un'applicazione Web. Inoltre, l'aggiunta di un cursore di immagini a un sito Web può affascinare gli utenti e catturare la propria attenzione.

Essendo uno sviluppatore JavaScript, se ti viene chiesto di creare un cursore di immagini per un'applicazione Web, penserà rapidamente di utilizzare "JQuery Plugins". Questi plugin sono utili; Tuttavia, possono incontrare conflitti di codice con biblioteche esistenti e biblioteche jQuery. Quindi, cosa fare in questo scenario? Invece di usare jQuery, utilizzare JavaScript e creare un cursore di immagine senza problemi.

Questo articolo insegnerà la procedura di creazione UN cucciolo di immagine In JavaScript. Quindi iniziamo!

Come creare un cursore di immagine usando JavaScript

Per creare un cursore di immagine usando JavaScript, è necessario seguire le istruzioni di seguito:

Passo 1: Carica desiderato immagini alla cartella del progetto.
Passo 2: Aggiungi richiesta Elementi HTML al "indice.html" file.
Passaggio 3: Definire logica Nel file JavaScript.
Passaggio 4: Impostare il stile dell'elemento HTML aggiunto nel "stile.CSS" file.

Secondo i passaggi menzionati, ora passeremo attraverso la procedura di creazione di un dispositivo di scorrimento dell'immagine usando JavaScript.

Nota: Per lo scopo dimostrativo, stiamo usando il codice Visual Studio. Tuttavia, puoi utilizzare qualsiasi editor di codice a tua scelta.

Passaggio 1: caricare le immagini desiderate nel progetto

Nel tuo progetto, crea una nuova cartella chiamata "immagini"E aggiungi le immagini desiderate per le quali si desidera creare un cursore dell'immagine.

Ad esempio, nel nostro "Cucciolo di immagine"Cartella del progetto, abbiamo creato un"immagini"Cartella e poi aggiunto tre immagini:"IMG1.jpg","IMG2.jpg", E "img3.jpg":

Passaggio 2: aggiungere elementi HTML richiesti all'indice ".file html "

Nel "indice.html"File, aggiungeremo un contenitore"Immagini-Slideshow" usando il ""Tag. Questo contenitore è ulteriormente diviso nelle tre sezioni di diapositive di immagine.

Insieme alle diapositive delle immagini specificate, aggiungeremo anche due simboli HTML con l'aiuto di ""Tag di ancoraggio. IL "<"Il simbolo ci porterà al"precedente"Slide, mentre il secondo simbolo">"Scivola al"Prossimo" Immagine:

❮
❯

Ecco come il nostro "indice.html"Il file sembra:

Passaggio 3: definisci la logica nel file JavaScript

Dobbiamo definire la logica nel "progetto.js"File in modo tale che quando il cursore dell'immagine viene caricato per la prima volta, mostra la prima immagine sul cursore. Successivamente, ci consente di spostarci tra le diapositive utilizzando i simboli HTML successivi e precedenti.

Per farlo, in primo luogo, imposteremo "1" come il "CurrentIndex”Di diapositive e passarlo al"DisplaySlides ()" funzione:

var currentIndex = 1;
DisplaySlides (currentIndex);

IL "DisplaySlides ()La funzione "accetta il"CurrentIndex"Valore come argomento"Num". Nel primo passaggio, questa funzione prende tutti gli elementi con il nome di classe "Slides di immagini".

Quindi, aggiungeremo un "Se" condizione "Num> Slide.lunghezza"Ciò controlla se il valore del"Num"L'argomento è maggiore della lunghezza delle diapositive"3". Nota che il "Num"Il valore si riferisce al"CurrentIndex"Delle diapositive. Nel caso, se la condizione specificata valuta come "verità", IL "CurrentIndex"Del cursore sarà impostato su"1". Questa condizione verrà applicata nella situazione in cui viene visualizzata l'ultima immagine (diapositiva 3) e l'utente fa clic sul “Prossimo"Pulsante. Dopo averlo fatto, il cursore imposterà il "Primo"Immagine (diapositiva 1) sulla presentazione.

Allo stesso modo, il secondo "Se" condizione "Num < 1 “Verrà valutato come vero, quando la prima immagine (diapositiva 1) viene visualizzata sulla presentazione e l'utente fa clic sul"precedente"Pulsante. In questo caso, il valore del "CurrentIndex"È impostato come"3"Che è uguale al cursore"lunghezza"E l'ultima immagine (diapositiva 3) verrà mostrata sulla presentazione.

Inoltre, quando una diapositiva viene selezionata per essere visualizzata usando "CurrentIndex", Il display degli altri due diapositivi verrà impostato su"nessuno":

funzione DisplaySlides (num)
var x;
Var Slides = Document.getElementsByClassName ("ImagesLides");
if (num> diapositive.lunghezza) currentIndex = 1
if (num < 1) currentIndex = slides.length
per (x = 0; x < slides.length; x++)
Slide [x].stile.display = "Nessuno";

Slide [CurrentIndex - 1].stile.display = "blocco";

Sul cucciolo di immagine, quando facciamo clic su (Prossimo) ">"Simbolo HTML,"1"È passato come argomento al"setSlides ()"Funzione che significa che il cursore deve spostarsi nella diapositiva successiva. A tale scopo, il "setSlides ()"Invoca"DisplaySlides ()"Funzione durante il passaggio"CurrentIndex += num"Come argomento. Questa operazione increderà "1" nel "CurrentIndex"Valuta e quindi mostra quell'immagine specifica sulla presentazione.

Nell'altro caso, quando (precedente) "<"Il simbolo viene cliccato, un"-1"Il valore viene passato al"DisplaySlides ()"Metodo per visualizzare l'immagine precedente sul cursore:

funzione setSlides (num)
DisplaySlides (currentIndex += num);

Passaggio 4: impostare lo stile dell'elemento HTML aggiunto nello "stile.File CSS "

Successivamente, aggiungi il codice qui sotto in "stile.CSS"File per specificare lo stile degli elementi HTML aggiunti:

.ImagesLides
Display: nessuno

img
Margine: auto;
blocco di visualizzazione;
larghezza: 100%;

/ * Il nostro principale contenitore di immagini-slideshow */
.Immagini-Slideshow
Licromra massima: 612px;
Posizione: relativo;
Margine: auto;

/*Stile per ">" Next e "<" previous buttons */
.Slider-btn
Cursore: puntatore;
Posizione: assoluto;
Top: 50%;
larghezza: auto;
imbottitura: 8px 16px;
margine -top: -22px;
Colore: RGB (0, 0, 0);
Font-weight: audace;
Font-size: 18px;
Transizione: 0.6s facilità;
raggio di confine: 0 3px 3px 0;
Selezione utente: nessuno;
Background-color: RGBA (255, 255, 255, 0.5);
raggio di frontiera: 50%;

/ * Impostazione della posizione del pulsante precedente verso sinistra */
.precedente
A sinistra: 2%;

/ * Impostazione della posizione del pulsante successivo verso destra */
.Prossimo
a destra: 2%;

/ * Su Hover, aggiungendo un colore di sfondo */
.Precedente: Hover,
.Next: Hover
Colore: RGB (255, 253, 253);
Background-color: RGBA (0, 0, 0, 0.8);

Dopo aver salvato il codice aggiunto, apri il "indice.html"File nel browser e controlla il funzionamento del cursore di immagini creato:

Si trattava di creare un cursore di immagine di base usando JavaScript. Puoi ulteriori ricerche per aggiungere alcune variazioni nel cursore dell'immagine.

Conclusione

Invece di utilizzare i plugin jQuery, creando un Slider di immagine usando JavaScript è considerato una delle migliori opzioni. Ci vuole meno tempo per l'implementazione e non garantisce errori o conflitti. Un cursore di immagini rende anche una pagina web più innovativa e cattura l'attenzione degli utenti. Questo articolo ha discusso della procedura per creare un dispositivo di scorrimento di immagini in JavaScript.