Com es crea una presentació de diapositives de JavaScript en 3 senzills passos

Si heu llegit la nostra guia a com fer un lloc web , us podeu preguntar què heu de fer després per millorar les vostres habilitats. Fer una presentació de diapositives de fotos és una tasca sorprenentment fàcil i que us pot ensenyar les valuoses habilitats necessàries per aconseguir un treball de programació.

Avui us mostraré com crear una presentació de diapositives JavaScript des de zero. Saltem directament!

Requisits previs

Haureu de saber algunes coses abans de començar a codificar. Juntament amb un navegador web i un editor de text adequats que escolliu (ho recomano Text sublim ), necessitareu una mica d’experiència amb HTML , CSS , JavaScript , i jQuery .

Si no esteu tan segurs de les vostres habilitats, assegureu-vos de llegir la nostra guia per utilitzar el Model d’objectes de document i aquests consells per aprendre CSS. Si teniu confiança en JavaScript, però mai no heu utilitzat jQuery, consulteu la nostra guia bàsica de jQuery.

1. Introducció

Aquesta presentació de diapositives requereix diverses funcions:

Suport per a imatges
Controls per canviar les imatges
Un títol de text
Mode automàtic

Sembla una simple llista de funcions. El mode automàtic avançarà automàticament les imatges a la següent de la seqüència. Aquí teniu l’esbós que vaig fer abans d’escriure cap codi:

Si us pregunteu per què us molesteu en la planificació, feu una ullada a aquests pitjors errors de programació de la història. Aquest projecte no matarà a ningú, però és fonamental tenir una comprensió sòlida del codi i dels procediments de planificació abans de treballar en un codi més gran, encara que només sigui un esbós aproximat.

Aquí teniu l’HTML inicial que necessiteu per començar. Deseu-lo en un fitxer amb un nom adequat, com ara index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

A continuació s’explica el codi:

És una mica de brossa, oi? Desglossem-ho abans de millorar-lo.

Aquest codi conté 'estàndard' HTML , cap , estil , guió , i cos etiquetes. Aquestes parts són components essencials de qualsevol lloc web. JQuery s'inclou a través de la CDN de Google, fins ara res especial ni especial.

Dins del cos hi ha un div amb una identificació de showContainer . Es tracta d’un embolcall o contenidor exterior per emmagatzemar la presentació de diapositives. Més endavant ho millorareu amb CSS. Dins d’aquest contenidor, hi ha tres blocs de codi, cadascun amb un propòsit similar.

Una classe pare es defineix amb un nom de classe de imageContainer :

S’utilitza per emmagatzemar una sola diapositiva: s’emmagatzema una imatge i un títol dins d’aquest contenidor. Cada contenidor té un identificador únic, format pels personatges en el i un número. Cada contenidor té un número diferent, d’un a tres.

Com a pas final, es fa referència a una imatge i el títol s’emmagatzema dins d’un div amb el fitxer subtítol classe:

Dog

He creat les meves imatges amb noms de fitxers numèrics i les he emmagatzemat dins d’una carpeta anomenada Imatges . Podeu trucar a qualsevol cosa que vulgueu, sempre que actualitzeu l'HTML perquè coincideixi.

Si voleu tenir més o menys imatges a la presentació de diapositives, simplement copieu i enganxeu o suprimiu els blocs de codi amb el fitxer imageContainer class, recordant actualitzar els noms i els identificadors de fitxers segons calgui.

Finalment, es creen els botons de navegació. Permeten a l'usuari navegar per les imatges:

 ❮  
 ❯

Aquests Entitat HTML els codis s’utilitzen per mostrar les fletxes cap endavant i cap enrere, de manera similar a com funcionen els tipus de lletra d’icones.

2. El CSS

Ara que l’estructura bàsica està al seu lloc, és hora de fer-la veure bonic . A continuació, es mostra el seu aspecte després d’aquest nou codi:

Afegiu aquest CSS entre el vostre estil etiquetes:

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

Ara sembla molt millor, oi? Fem una ullada al codi.

Estic fent servir imatges de mostra que són tot 670 x 503 píxels , de manera que aquesta presentació de diapositives s'ha dissenyat principalment al voltant d'imatges d'aquesta mida. Haureu d’ajustar el CSS adequadament si voleu utilitzar imatges d’una mida diferent. Us recomano que canvieu la mida de les imatges a mides coincidents: diferents imatges de diferents dimensions causaran problemes d’estil.

La majoria d'aquest CSS s'explica per si mateix. Hi ha codi per definir la mida del contenidor per emmagatzemar les imatges, alinear-ho tot al centre, especificar el tipus de lletra, juntament amb el color del botó i del text. Hi ha alguns estils que potser no us heu trobat abans:

cursor: punter - Això canvia el cursor d'una fletxa a un dit assenyalador quan moveu el cursor per sobre dels botons.
opacitat: 0,65 - Això augmenta la transparència dels botons.
selecció d’usuari: cap - Això us garanteix que no pugueu ressaltar el text als botons accidentalment.

Podeu veure el resultat de la major part d’aquest codi als botons:

La part més complexa aquí és aquesta línia d’aspecte estrany:

.imageContainer:not(:first-child) {

Pot semblar força inusual, tot i que s’explica per si mateix.

En primer lloc, s'orienta a qualsevol element amb el fitxer imageContainer classe. El :no() La sintaxi afirma que qualsevol element dins dels claudàtors hauria de ser exclòs d’aquest estil. Finalment, el fitxer : primer fill La sintaxi indica que aquest CSS hauria d’orientar-se a qualsevol element que coincideixi amb el nom però ignora el primer element. El motiu d’això és senzill. Com que es tracta d'una presentació de diapositives, només cal una imatge a la vegada. Aquest CSS amaga totes les imatges a part de la primera.

3. El JavaScript

L’última peça del trencaclosques és el JavaScript. Aquesta és la lògica per fer que la presentació funcioni correctament.

Afegiu aquest codi al vostre guió etiqueta:

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

Pot semblar contraintuïtiu, però saltaré els blocs inicials de codi i saltaré directament a explicar el codi des de la meitat del camí; no us preocupeu, us explico tot el codi.

Cal definir dues variables. (A continuació, s'explica com es defineixen les variables a JavaScript.) Es poden considerar aquestes variables com les principals variables de configuració de la presentació de diapositives:

var currentImage = 1;  
var totalImages = 3;

Emmagatzemen el nombre total d’imatges a la presentació de diapositives i el nombre de la imatge per començar. Si teniu més imatges, canvieu el fitxer totalImages variable al nombre total d'imatges que tingueu.

Les dues funcions augmentarImatge i disminuirImatge avançar o retirar el fitxer Imatge actual variable. Si aquesta variable és inferior a una o superior a totalImages , es restableix a un o totalImages . Això garanteix que la presentació de diapositives s'enfonsi un cop arribi al final.

Torna al codi al principi. Aquest codi 's'orienta' als botons següent i anterior. Quan feu clic a cada botó, crida el corresponent augmentar o bé disminuir mètodes. Un cop finalitzada, simplement esvaeix la imatge a la pantalla i es difon a la nova imatge (tal com la defineix el fitxer Imatge actual variable).

El Atura() mètode està integrat a jQuery. Això cancel·la els esdeveniments pendents. Això garanteix que cada botó sigui premut sense problemes, i vol dir que no teniu 100 botons en espera que s'executi si us torneu una mica boig amb el ratolí. El fadeIn (1) i fadeOut (1) els mètodes s'esvaeixen o s'esvaeixen a les imatges segons es requereixi. El número especifica la durada de la decoloració en mil·lisegons. Proveu de canviar-lo per un nombre més gran, com ara 500. Un nombre més gran comporta un temps de transició més llarg. Aneu massa lluny, però, i podreu començar a veure esdeveniments estranys o 'parpelleigs' entre els canvis de la imatge. Aquí teniu la presentació de diapositives en acció:

Avanç automàtic

Aquesta presentació de diapositives té força bon aspecte ara, però cal un darrer toc final. L’avanç automàtic és una característica que farà brillar realment aquesta presentació de diapositives. Després d'un període de temps definit, cada imatge passarà automàticament a la següent. Tanmateix, l'usuari encara pot navegar cap endavant o cap enrere.

com escriure un fitxer per lots

Aquesta és una feina fàcil amb jQuery. Cal crear un temporitzador per executar el vostre codi cada cop X segons. En lloc d’escriure un codi nou, però, el més fàcil de fer és emular un “clic” al botó següent de la imatge i deixar que el codi existent faci tota la feina.

Aquí teniu el nou JavaScript que necessiteu; afegiu-lo després del fitxer disminuirImatge funció:

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

Aquí no passa molt. El window.setInterval mètode executarà un fragment de codi regularment, tal com es defineix en el temps especificat al final. El temps 2500 (en mil·lisegons) significa que aquesta presentació de diapositives avançarà cada 2,5 segons. Un nombre més petit significa que cada imatge avançarà a un ritme més ràpid. El feu clic El mètode activa els botons per executar el codi com si un usuari hagués fet clic al botó amb el ratolí.

Si esteu preparat per al vostre proper repte de JavaScript, proveu de crear un lloc web amb un creador de llocs web estàtic com GatsbyJS o un framework frontal com Vue. Si sou un estudiant de Ruby, Jekyll també és una opció. A continuació s’explica com es comporten Jekyll i GatsbyJS.

Crèdit de la imatge: Tharanat Sardsri a través de Shutterstock.com

Compartir Compartir Tweet Correu electrònic Els vuit millors llocs web per descarregar audiollibres de forma gratuïta

Els audiollibres són una gran font d’entreteniment i són molt més fàcils de digerir. Aquests són els vuit millors llocs web on els podeu descarregar gratuïtament.

Llegiu a continuació Temes relacionats

Programació
JavaScript
Web Design

Sobre l'autor Joe Coburn(136 articles publicats)

Joe és llicenciat en Informàtica per la Universitat de Lincoln, Regne Unit. És un desenvolupador de programari professional i, quan no fa drons voladors ni escriu música, sovint se’l pot trobar fent fotos o produint vídeos.

Més de Joe Coburn

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us