Come creare una presentazione JavaScript in 3 semplici passaggi

Se hai letto la nostra guida su come fare un sito web , ti starai chiedendo cosa fare per migliorare le tue abilità. Realizzare una presentazione di foto è un compito sorprendentemente facile e che può insegnarti preziose abilità necessarie per ottenere un lavoro di programmazione.

Oggi ti mostrerò come creare una presentazione JavaScript da zero. Entriamo subito!

Prerequisiti

Avrai bisogno di sapere alcune cose prima di poter iniziare a programmare. Accanto a un browser Web appropriato e un editor di testo di tua scelta (mi raccomando Testo sublime ), avrai bisogno di un po' di esperienza con HTML , CSS , JavaScript , e jQuery .

Se non sei così sicuro delle tue capacità, assicurati di leggere la nostra guida all'uso del Document Object Model e questi suggerimenti per imparare i CSS. Se sei sicuro di JavaScript ma non hai mai usato jQuery prima, consulta la nostra guida di base a jQuery .

1. Per iniziare

Questa presentazione richiede diverse funzionalità:

Supporto per le immagini
Controlli per cambiare le immagini
Una didascalia di testo
Modalità automatica

Sembra un semplice elenco di funzionalità. La modalità automatica farà avanzare automaticamente le immagini a quella successiva nella sequenza. Ecco lo schizzo approssimativo che ho fatto prima di scrivere qualsiasi codice:

Se ti stai chiedendo perché preoccuparsi della pianificazione, dai un'occhiata a questi peggiori errori di programmazione della storia. Questo progetto non farà uccidere nessuno, ma è fondamentale avere una solida comprensione del codice e delle procedure di pianificazione prima di lavorare su un codice più grande, anche se è solo un abbozzo.

Ecco l'HTML iniziale di cui hai bisogno per iniziare. Salvalo in un file con un nome appropriato, ad esempio index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Ecco come appare il codice:

È un po' spazzatura, vero? Analizziamolo prima di migliorarlo.

Questo codice contiene 'standard' HTML , testa , stile , sceneggiatura , e corpo tag. Queste parti sono componenti essenziali di qualsiasi sito web. JQuery è incluso tramite il CDN di Google, finora niente di unico o speciale.

All'interno del corpo c'è un div con un id di mostraContenitore . Questo è un involucro o un contenitore esterno per memorizzare la presentazione. Lo migliorerai in seguito con i CSS. All'interno di questo contenitore ci sono tre blocchi di codice, ciascuno con uno scopo simile.

Una classe genitore è definita con un nome di classe di contenitore immagine :

Questo è usato per memorizzare una singola diapositiva: un'immagine e una didascalia sono memorizzate all'interno di questo contenitore. Ogni contenitore ha un ID univoco, composto dai caratteri nel_ e un numero. Ogni contenitore ha un numero diverso, da uno a tre.

Come passaggio finale, viene fatto riferimento a un'immagine e la didascalia viene memorizzata all'interno di un div con il didascalia classe:

Dog

Ho creato le mie immagini con nomi di file numerici e le ho archiviate in una cartella chiamata immagini . Puoi chiamare il tuo come preferisci, a condizione che aggiorni l'HTML in modo che corrisponda.

Se desideri avere più o meno immagini nella tua presentazione, è sufficiente copiare e incollare o eliminare i blocchi di codice con il contenitore immagine class, ricordando di aggiornare i nomi e gli ID dei file come richiesto.

Infine, vengono creati i pulsanti di navigazione. Questi consentono all'utente di navigare tra le immagini:

 ❮  
 ❯

Queste Entità HTML i codici vengono utilizzati per visualizzare le frecce avanti e indietro, in modo simile a come funzionano i caratteri delle icone .

2. Il CSS

Ora che la struttura centrale è a posto, è il momento di farla sembrare bello . Ecco come apparirà dopo questo nuovo codice:

Aggiungi questo CSS tra i tuoi stile tag:

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;  
}

Sembra molto meglio ora, vero? Diamo un'occhiata al codice.

Sto usando immagini di esempio che sono tutte 670 x 503 pixel , quindi questa presentazione è stata progettata principalmente attorno a immagini di quelle dimensioni. Dovrai regolare il CSS in modo appropriato se desideri utilizzare immagini di dimensioni diverse. Ti consiglio di ridimensionare le tue immagini in base alle dimensioni corrispondenti: immagini diverse di dimensioni diverse causeranno problemi di stile.

Maggior parte di questo CSS è autoesplicativo. C'è un codice per definire la dimensione del contenitore per memorizzare le immagini, allineare al centro tutto, specificare il carattere, insieme al pulsante e al colore del testo. Ci sono alcuni stili che potresti non aver mai incontrato prima:

cursore: puntatore -- Questo cambia il cursore da freccia a dito puntato quando si sposta il cursore sui pulsanti.
opacità: 0,65 -- Ciò aumenta la trasparenza dei pulsanti.
selezione utente: nessuno -- Ciò garantisce che non sia possibile evidenziare accidentalmente il testo sui pulsanti.

Puoi vedere il risultato della maggior parte di questo codice nei pulsanti:

La parte più complessa qui è questa linea dall'aspetto strano:

.imageContainer:not(:first-child) {

Può sembrare abbastanza insolito, tuttavia è abbastanza autoesplicativo.

Innanzitutto, prende di mira tutti gli elementi con il contenitore immagine classe. Il :non() la sintassi afferma che tutti gli elementi all'interno delle parentesi dovrebbero essere escluso da questo stile. Infine, il :Primogenito la sintassi afferma che questo CSS dovrebbe mirare a qualsiasi elemento che corrisponda al nome ma ignora il primo elemento La ragione di ciò è semplice. Poiché si tratta di una presentazione, è necessaria solo un'immagine alla volta. Questo CSS nasconde tutte le immagini tranne la prima.

3. Il JavaScript

L'ultimo pezzo del puzzle è JavaScript. Questa è la logica per far funzionare correttamente la presentazione.

Aggiungi questo codice al tuo sceneggiatura etichetta:

$(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;  
 }  
 }  
});

Può sembrare controintuitivo, ma salterò i blocchi iniziali di codice e passerò direttamente alla spiegazione del codice da metà - non preoccuparti, spiego tutto il codice!

Devi definire due variabili. (Ecco come definire le variabili in JavaScript.) Queste variabili possono essere pensate come le principali variabili di configurazione per la presentazione:

var currentImage = 1;  
var totalImages = 3;

Questi memorizzano il numero totale di immagini nella presentazione e il numero dell'immagine da cui iniziare. Se hai più immagini, cambia semplicemente il immagini totali variabile al numero totale di immagini che hai.

Le due funzioni aumentareImmagine e diminuireImmagine avanzare o retrocedere il immagine corrente variabile. Se questa variabile dovesse essere inferiore a uno o superiore a immagini totali , viene reimpostato su uno o immagini totali . Ciò garantisce che la presentazione venga ripetuta una volta raggiunta la fine.

Torna al codice all'inizio. Questo codice 'mira' ai pulsanti successivo e precedente. Quando fai clic su ciascun pulsante, chiama l'appropriato aumento o diminuire metodi. Una volta completato, dissolve semplicemente l'immagine sullo schermo e sfuma nella nuova immagine (come definito dal immagine corrente variabile).

Il fermare() è integrato in jQuery. Questo annulla tutti gli eventi in sospeso. Ciò garantisce che ogni pressione di un pulsante sia fluida e significa che non hai 100 pulsanti premuti tutti in attesa di essere eseguiti se impazzisci con il mouse. Il dissolvenza in entrata (1) e dissolvenza in uscita(1) i metodi sfumano dentro o fuori le immagini come richiesto. Il numero specifica la durata della dissolvenza in millisecondi. Prova a modificarlo con un numero più grande, ad esempio 500. Un numero maggiore comporta un tempo di transizione più lungo. Vai troppo lontano, tuttavia, e potresti iniziare a vedere eventi strani o 'sfarfallio' tra i cambiamenti dell'immagine. Ecco la presentazione in azione:

Avanzamento automatico

Questa presentazione sembra abbastanza buona ora, ma è necessario un ultimo tocco finale. L'avanzamento automatico è una funzionalità che farà davvero brillare questa presentazione. Dopo un determinato periodo di tempo, ogni immagine avanzerà automaticamente a quella successiva. L'utente può comunque navigare avanti o indietro.

google chrome usa troppa memoria windows 10

Questo è un lavoro facile con jQuery. È necessario creare un timer per eseguire il codice ogni X secondi. Invece di scrivere nuovo codice, tuttavia, la cosa più semplice da fare è emulare un 'clic' sul pulsante dell'immagine successiva e lasciare che il codice esistente faccia tutto il lavoro.

Ecco il nuovo JavaScript di cui hai bisogno -- aggiungilo dopo il diminuireImmagine funzione:

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

Non c'è molto da fare qui. Il window.setInterval Il metodo eseguirà una parte di codice regolarmente, come definito dall'ora specificata alla fine. Il tempo 2500 (in millisecondi) significa che questa presentazione avanzerà ogni 2,5 secondi. Un numero più piccolo significa che ogni immagine avanzerà a un ritmo più veloce. Il clic Il metodo attiva i pulsanti per eseguire il codice come se un utente avesse fatto clic sul pulsante con il mouse.

Se sei pronto per la tua prossima sfida JavaScript, prova a creare un sito Web con un costruttore di siti Web statico come GatsbyJS o un framework front-end come Vue . Se sei uno studente Ruby, anche Jekyll è un'opzione. Ecco come se la cavano Jekyll e GatsbyJS l'uno contro l'altro.

Immagine di credito: Tharanat Sardsri tramite Shutterstock.com

Condividere Condividere Tweet E-mail Gli 8 migliori siti Web per scaricare audiolibri gratuitamente

Gli audiolibri sono una grande fonte di intrattenimento e molto più facili da digerire. Ecco gli otto migliori siti Web in cui puoi scaricarli gratuitamente.

Leggi Avanti Argomenti correlati

Programmazione
JavaScript
Web design

Circa l'autore Joe Coburn(136 articoli pubblicati)

Joe si è laureato in Informatica presso l'Università di Lincoln, nel Regno Unito. È uno sviluppatore di software professionista e quando non pilota droni o scrive musica, lo si può trovare spesso a scattare foto o produrre video.

Altro da Joe Coburn

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti