Come costruire un SlideShow JavaScript in 3 semplici passaggi
Se hai letto la nostra guida su come realizzare un sito web Come creare un sito web: per principianti Come creare un sito web: per principianti Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non ti preoccupare se questo sembra difficile. Ti guiderò in ogni fase del percorso. Per saperne di più, potresti chiederti cosa fare per migliorare le tue abilità. Fare una presentazione di foto è un compito sorprendentemente facile e uno che può insegnarti le preziose competenze necessarie per ottenere un lavoro di programmazione 10 Lavori di programmazione informatica che sono richiesti in questo momento 10 Lavori di programmazione di computer che sono richiesti in questo momento essere duro nel panorama attuale, considerare di concentrarsi su una delle seguenti concentrazioni per aumentare le probabilità di successo. Leggi di più .
Oggi ti mostrerò come creare una presentazione JavaScript da zero. Facciamo un salto!
Prerequisiti
Avrai bisogno di sapere alcune cose prima di poter iniziare a programmare. Accanto a un browser web e un editor di testo di tua scelta (consiglio Sublime Text), avrai bisogno di un po 'di esperienza con HTML, CSS, JavaScript, e jQuery.
Se non sei così sicuro delle tue capacità, assicurati di leggere le nostre guide su Come utilizzare il modello di oggetto Document JavaScript e lo sviluppo Web: Utilizzo del modello di oggetto Document JavaScript e sviluppo Web: Utilizzo del modello a oggetti Document Questo articolo ti introdurrà al scheletro di documenti con cui JavaScript funziona. Avendo una conoscenza pratica di questo modello di oggetto astratto documento, è possibile scrivere JavaScript che funziona su qualsiasi pagina web. Leggi di più e 5 passi per imparare CSS 5 Passi per imparare CSS e diventare un Kick-Ass Stregone dei CSS 5 Passi per imparare i CSS e diventare un Kick-Ass CSS Sorcerer CSS è il singolo cambiamento più importante che le pagine web hanno visto nell'ultimo decennio, e ha aperto la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce la struttura semantica ... Per saperne di più. Se sei sicuro di JavaScript ma non hai mai usato jQuery prima, consulta la nostra guida di base per jQuery Una guida di base per JQuery per i programmatori Javascript Una guida di base per JQuery per i programmatori Javascript Se sei un programmatore Javascript, questa guida a JQuery aiuta a iniziare a programmare come un ninja. Leggi di più .
1. Per iniziare
Questa presentazione richiede diverse funzionalità:
- Supporto per le immagini
- Controlli per cambiare le immagini
- Una didascalia di testo
- Modalità automatica
Sembra una semplice lista di funzionalità. La modalità automatica avanza automaticamente le immagini sulla successiva nella sequenza. Ecco lo schizzo approssimativo che ho fatto prima di scrivere qualsiasi codice:
Se ti stai chiedendo perché preoccuparti di pianificare, dai un'occhiata ai peggiori errori di programmazione della storia. I 10 peggiori errori di programmazione nella storia I 10 peggiori errori di programmazione nella storia Nel suo passato storico, codifica anche la distruzione. Le istanze di un po 'di codice errato hanno causato disastri su un livello importante. I seguenti sono 10 dei peggiori errori di programmazione nella storia. Leggi di più . Questo progetto non farà uccidere nessuno, ma è fondamentale avere una solida conoscenza del codice e delle procedure di pianificazione prima di lavorare su un codice più grande, anche se è solo uno schizzo approssimativo.
Ecco l'HTML iniziale necessario per iniziare. Salvare questo in un file con un nome appropriato, ad esempio index.html:
Presentazione MUO Mulino a vento pianta Cane ❮ ❯
Ecco come appare il codice:
È un po 'schifoso vero? Scopriamolo prima di migliorarlo.
Questo codice contiene “standard” HTML, capo, stile, copione, e corpo tag. Queste parti sono componenti essenziali di qualsiasi sito web. JQuery è incluso tramite il CDN di Google - nulla di unico o speciale finora.
All'interno del corpo è un div con un id di showContainer. Questo è un involucro o un contenitore esterno per memorizzare la presentazione. Migliorerai questo 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 imageContainer:
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, costituito dai caratteri sono_ e un numero. Ogni contenitore ha un numero diverso, da uno a tre.
Come passo finale, viene referenziata un'immagine, e la didascalia è memorizzata all'interno di un div con il didascalia classe:
Cane
Ho creato le mie immagini con nomi di file numerici e li ho archiviati in una cartella chiamata immagini. Puoi chiamare il tuo qualsiasi cosa desideri, a patto di aggiornare l'HTML in modo che corrisponda.
Se desideri avere più o meno immagini nella presentazione, è sufficiente copiare e incollare o eliminare i blocchi di codice con il imageContainer classe, 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:
❮ ❯
Questi Entità HTML i codici sono usati per visualizzare le frecce avanti e indietro, in un modo simile a come funzionano i font delle icone. I caratteri dell'icona sono fantastici per il tuo sito: ecco perché i font delle icone sono fantastici per il tuo sito: ecco perché oggi ti mostrerò quali sono i caratteri dell'icona e come puoi usarli per ravvivare il tuo sito web. Leggi di più .
2. Il CSS
Ora che la struttura principale è a posto, è tempo di farlo sembrare bella. Ecco come sarà dopo questo nuovo codice:
Aggiungi questo CSS tra i tuoi stile tags:
html font-family: helvetica, arial; #showContainer / * Wrapper principale per tutte le immagini * / larghezza: 670px; padding: 0; margine: 0 auto; overflow: nascosto; posizione: relativa; .navButton / * Crea pulsanti belli * / cursor: pointer; fluttuare: a sinistra; larghezza: 25px; altezza: 22px; imbottitura: 10px; margin-right: 5px; overflow: nascosto; allineamento del testo: centro; colore bianco; font-weight: bold; font-size: 18px; sfondo: # 000000; opacità: 0,65; selezione utente: nessuna; .navButton: hover opacity: 1; .caption float: right; .imageContainer: not (: first-child) / * Nascondi tutte le immagini tranne il primo * / display: none;
Sembra molto meglio ora, giusto? Diamo un'occhiata al codice.
Sto usando immagini di esempio dalla nostra Panasonic G80 / G85 Panasonic Lumix DMC-G80 / G85 Recensione Panasonic Lumix DMC-G80 / G85 Recensione La Lumix G85 è l'ultima fotocamera mirrorless di Panasonic, e racchiude un pugno nel settore video, con HDMI uscita e registrazione 4K - tutto per $ 1000! Leggi di più. Queste immagini sono tutte 670 x 503 pixel, quindi questa presentazione è stata principalmente progettata attorno a immagini di quelle dimensioni. Dovrai modificare il CSS in modo appropriato se desideri utilizzare immagini di dimensioni diverse. Ti consiglio di ridimensionare le immagini in base alle dimensioni corrispondenti: immagini diverse di dimensioni diverse possono causare problemi di stile.
Maggior parte di questo CSS è auto esplicativo. C'è un codice per definire la dimensione del contenitore per memorizzare le immagini, centrare tutto allineato, specificare il carattere, insieme al pulsante e al colore del testo. Ci sono alcuni stili che potresti non aver incontrato prima:
- cursore: puntatore - Questo cambia il cursore da una freccia a un dito puntato quando si sposta il cursore sui pulsanti.
- opacità: 0,65 - Questo aumenta la trasparenza dei pulsanti.
- selezione utente: nessuna - 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 strana linea:
.imageContainer: not (: first-child)
Può sembrare abbastanza insolito, tuttavia è abbastanza auto esplicativo.
In primo luogo, si rivolge a qualsiasi elemento con il imageContainer classe. Il :non() la sintassi afferma che dovrebbero essere presenti tutti gli elementi all'interno delle parentesi esclusi da questo stile. Finalmente, il :Primogenito la sintassi afferma che questo CSS dovrebbe indirizzare qualsiasi elemento corrispondente al nome ma ignora il primo elemento. La ragione di questo è semplice. Poiché si tratta di una presentazione, è richiesta solo un'immagine alla volta. Questo CSS nasconde tutte le immagini a parte il primo.
3. Il JavaScript
L'ultimo pezzo del puzzle è JavaScript. Questa è la logica per fare in modo che la presentazione funzioni correttamente.
Aggiungi questo codice al tuo copione etichetta:
$ (document) .ready (function () $ ('# previous'). on ('click', function () // Passa all'immagine precedente $ ('# im_' + currentImage) .stop (). fadeOut (1); decreasImage (); $ ('# im_' + currentImage) .stop (). fadeIn (1);); $ ('# next'). on ('click', function () / / Passa all'immagine successiva $ ('# im_' + currentImage) .stop (). FadeOut (1); increaseImage (); $ ('# im_' + currentImage) .stop (). FadeIn (1);) ; var currentImage = 1; var totalImages = 3; function increaseImage () / * Aumenta currentImage di 1. * Reimposta a 1 se maggiore di totalImages * / ++ currentImage; if (currentImage> totalImages) currentImage = 1; function decreasImage () / * Diminuisci currentImage di 1. * Reimposta a totalImages se minore di 1 * / --currentImage; if (currentImage < 1) currentImage = totalImages; );
Può sembrare contro-intuitivo, ma ho intenzione di saltare i blocchi di codice iniziali e saltare direttamente a spiegare il codice da metà a parte - non ti preoccupare, spiego tutto il codice!
Devi definire due variabili. Questi possono essere pensati come le principali variabili di configurazione per lo slideshow:
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 totalImages variabile al numero totale di immagini che hai.
Le due funzioni increaseImage e decreaseImage avanzare o ritirarsi currentImage variabile. Questa variabile dovrebbe essere inferiore a uno, o superiore a totalImages, si resetta a uno o totalImages. Ciò assicura che la presentazione si interrompa una volta raggiunta la fine.
Torna al codice all'inizio. Questo codice “obiettivi” i pulsanti successivo e precedente. Quando fai clic su ciascun pulsante, chiama l'appropriato aumentare o diminuire metodi. Una volta completato, sfuma semplicemente l'immagine sullo schermo e sfuma la nuova immagine (come definita dal file currentImage variabile).
Il Stop() il metodo è integrato in jQuery. Questo annulla qualsiasi evento in sospeso. Ciò garantisce che ogni pressione di ciascun tasto sia omogenea, e significa che non hai 100 pulsanti che premono tutti in attesa di essere eseguiti se si diventa un po 'matti con il mouse. Il fadeIn (1) e fadeOut (1) i metodi sfumano dentro o fuori le immagini come richiesto. Il numero specifica la durata della dissolvenza in millisecondi. Prova a cambiarlo in un numero più grande come 500. Un numero maggiore comporta un tempo di transizione più lungo. Andare troppo lontano, tuttavia, e si può iniziare a vedere eventi strani o “sfarfallio” tra l'immagine cambia. Ecco la presentazione in azione:
Avanzamento automatico
Questa presentazione sembra abbastanza buona ora, ma c'è bisogno di un ultimo tocco finale. L'avanzamento automatico è una funzione che farà davvero brillare questa presentazione. Dopo un determinato periodo di tempo, ciascuna immagine passerà automaticamente a quella successiva. L'utente può comunque navigare avanti o indietro, comunque.
Questo è un lavoro facile con jQuery. È necessario creare un timer per eseguire il codice ogni X secondi. Piuttosto che scrivere un nuovo codice, tuttavia, la cosa più facile da fare è emulare un “clic” sul pulsante immagine successiva, e lasciare che il codice esistente faccia tutto il lavoro.
Ecco il nuovo JavaScript che ti serve - aggiungi questo dopo il decreaseImage funzione:
window.setInterval (function () $ ('# previous'). click ();, 2500);
Non c'è molto da fare qui. Il window.setInterval il metodo eseguirà regolarmente un pezzo di codice, come definito dal tempo specificato alla fine. Il tempo 2500 (in millisecondi) significa che questa presentazione avanzerà ogni 2,5 secondi. Un numero inferiore significa che ogni immagine avanza a un ritmo più veloce. Il clic metodo attiva i pulsanti per eseguire il codice come se un utente avesse fatto clic sul pulsante con il mouse.
Hai imparato nuove abilità oggi? Qual è il tuo trucco preferito per animare le presentazioni? Fateci sapere nei commenti qui sotto!
Immagine di credito: Tharanat Sardsri tramite Shutterstock.com
Scopri di più su: JavaScript, Web Design.