Cum să construiți un SlideShow JavaScript în 3 pași simpli

Dacă ați citit ghidul nostru pe cum să faci un site web , s-ar putea să vă întrebați ce să faceți în continuare pentru a vă îmbunătăți abilitățile. Realizarea unei prezentări de diapozitive foto este o sarcină surprinzător de ușoară și care vă poate învăța abilități valoroase necesare pentru a obține un loc de muncă de programare.

Astăzi vă voi arăta cum să construiți un slideshow JavaScript de la zero. Să sărim direct înăuntru!

Condiții prealabile

Va trebui să știți câteva lucruri înainte de a începe să codificați. Alături de un browser web și un editor de text la alegere (vă recomand Text sublim ), veți avea nevoie de puțină experiență cu HTML , CSS , JavaScript , și jQuery .

Dacă nu sunteți atât de încrezători în abilitățile dvs., asigurați-vă că ați citit ghidul nostru de utilizare a modelului de obiect document și aceste sfaturi pentru a învăța CSS. Dacă aveți încredere în JavaScript, dar nu ați folosit niciodată jQuery înainte, consultați ghidul nostru de bază pentru jQuery.

1. Noțiuni introductive

Această prezentare de diapozitive necesită mai multe funcții:

Suport pentru imagini
Comenzi pentru schimbarea imaginilor
O subtitrare text
Mod automat

Pare o listă simplă de caracteristici. Modul automat va avansa automat imaginile la următoarea din secvență. Iată schița brută pe care am făcut-o înainte de a scrie orice cod:

Dacă vă întrebați de ce vă deranjați planificarea, aruncați o privire asupra acestor cele mai grave greșeli de programare din istorie. Acest proiect nu va ucide pe nimeni, dar este crucial să aveți o înțelegere solidă a codului și a procedurilor de planificare înainte de a lucra la un cod mai mare - chiar dacă este doar o schiță brută.

Iată codul HTML inițial de care aveți nevoie pentru a începe. Salvați acest lucru într-un fișier cu un nume adecvat, cum ar fi index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Iată cum arată codul:

Este cam gunoi, nu-i așa? Să o descompunem înainte să o îmbunătățim.

Acest cod conține „standard” HTML , cap , stil , scenariu , și corp Etichete. Aceste părți sunt componente esențiale ale oricărui site web. JQuery este inclus prin CDN Google - nimic unic sau special până acum.

În interiorul corpului este un div cu un id de showContainer . Acesta este un ambalaj sau un container exterior pentru a stoca prezentarea de diapozitive. Veți îmbunătăți acest lucru mai târziu cu CSS. În interiorul acestui container, există trei blocuri de cod, fiecare având un scop similar.

O clasă părinte este definită cu un nume de clasă de imageContainer :

Acesta este utilizat pentru a stoca un singur diapozitiv - o imagine și o legendă sunt stocate în interiorul acestui container. Fiecare container are un id unic, format din caractere în_ și un număr. Fiecare container are un număr diferit, de la unu la trei.

Ca ultim pas, se face referire la o imagine, iar subtitrarea este stocată într-un div cu legendă clasă:

Dog

Mi-am creat imaginile cu nume de fișiere numerice și le-am stocat într-un folder numit Imagini . Puteți apela la orice doriți, cu condiția să actualizați codul HTML pentru a se potrivi.

Dacă doriți să aveți mai multe sau mai puține imagini în prezentarea de diapozitive, pur și simplu copiați și lipiți sau ștergeți blocurile de cod cu imageContainer clasă, amintindu-vă să actualizați numele fișierelor și ID-urile după cum este necesar.

În cele din urmă, butoanele de navigare sunt create. Acestea permit utilizatorului să navigheze prin imagini:

 ❮  
 ❯

Aceste Entitate HTML codurile sunt utilizate pentru a afișa săgețile înainte și înapoi, într-un mod similar cu modul în care funcționează fonturile de pictograme.

2. CSS

Acum, când structura de bază este la locul său, este timpul să o facem să arate frumos . Iată cum va arăta după acest nou cod:

Adăugați acest CSS între stil Etichete:

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

Arată mult mai bine acum, nu? Să aruncăm o privire asupra codului.

Folosesc exemple de imagini care sunt toate 670 x 503 pixeli , astfel încât prezentarea de diapozitive a fost concepută în principal în jurul imaginilor de acea dimensiune. Va trebui să ajustați CSS în mod corespunzător dacă doriți să utilizați imagini de altă dimensiune. Vă recomandăm să redimensionați imaginile la dimensiuni potrivite - diferite imagini de diferite dimensiuni vor cauza probleme de stil.

Cel mai din acest CSS se explică de la sine. Există cod pentru a defini dimensiunea containerului pentru a stoca imaginile, pentru a alinia totul, pentru a specifica fontul, împreună cu butonul și culoarea textului. Există câteva stiluri pe care poate nu le-ați întâlnit înainte:

cursor: indicator - Acest lucru schimbă cursorul de la o săgeată la un deget îndreptat atunci când deplasați cursorul peste butoane.
opacitate: 0,65 - Aceasta crește transparența butoanelor.
selectare utilizator: nici unul - Acest lucru vă asigură că nu puteți evidenția accidental textul de pe butoane.

Puteți vedea rezultatul majorității acestui cod în butoane:

Cea mai complexă parte aici este această linie ciudată:

.imageContainer:not(:first-child) {

Poate părea destul de neobișnuit, totuși este destul de explicativ.

În primul rând, vizează orice elemente cu imageContainer clasă. The :nu() sintaxa afirmă că orice element din paranteze ar trebui să fie exclus din acest stil. În cele din urmă, :primul copil sintaxa afirmă că acest CSS ar trebui să vizeze orice element care se potrivește cu numele dar ignorați primul element. Motivul pentru aceasta este simplu. Deoarece aceasta este o prezentare de diapozitive, este necesară o singură imagine la un moment dat. Acest CSS ascunde toate imaginile în afară de prima.

3. JavaScript

Piesa finală a puzzle-ului este JavaScript. Aceasta este logica pentru a face ca prezentarea să funcționeze corect.

Adăugați acest cod la scenariu etichetă:

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

Poate părea contra-intuitiv, dar voi trece peste blocurile inițiale de cod și voi trece direct la explicarea codului de la jumătatea drumului - nu vă faceți griji, explic tot codul!

Trebuie să definiți două variabile. (Iată cum se definesc variabile în JavaScript.) Aceste variabile pot fi considerate ca fiind principalele variabile de configurare pentru prezentarea de diapozitive:

var currentImage = 1;  
var totalImages = 3;

Acestea stochează numărul total de imagini din prezentarea de diapozitive și numărul imaginii pe care trebuie să începeți. Dacă aveți mai multe imagini, pur și simplu schimbați totalImages variabilă la numărul total de imagini pe care le aveți.

Cele două funcții creșteImagine și Imagine avansați sau retrageți imagine curentă variabil. Dacă această variabilă este mai mică decât una sau mai mare decât totalImages , se resetează la unul sau totalImages . Acest lucru asigură prezentarea de diapozitive se va bucla odată ce va ajunge la final.

Înapoi la cod la început. Acest cod „vizează” butoanele următoare și anterioare. Când faceți clic pe fiecare buton, acesta apelează corespunzător crește sau scădea metode. Odată finalizat, pur și simplu se estompează imaginea de pe ecran și se estompează în noua imagine (așa cum este definită de imagine curentă variabil).

The Stop() metoda este integrată în jQuery. Aceasta anulează orice evenimente în așteptare. Acest lucru asigură că fiecare apăsare a butonului este netedă și înseamnă că nu aveți 100 de butoane apăsate pe toate care așteaptă să se execute dacă înnebuniți puțin cu mouse-ul. The fadeIn (1) și fadeOut (1) metodele se estompează sau scot imaginile după cum este necesar. Numărul specifică durata decolorării în milisecunde. Încercați să schimbați acest lucru într-un număr mai mare, cum ar fi 500. Un număr mai mare are ca rezultat un timp de tranziție mai lung. Totuși, mergeți prea departe și este posibil să începeți să vedeți evenimente ciudate sau „pâlpâire” între modificările imaginii. Iată prezentarea de diapozitive în acțiune:

Avans automat

Prezentarea de diapozitive arată destul de bine acum, dar este nevoie de o ultimă atingere. Avansarea automată este o caracteristică care va face cu adevărat să strălucească această prezentare. După o perioadă de timp stabilită, fiecare imagine va trece automat la următoarea. Cu toate acestea, utilizatorul poate naviga înainte sau înapoi.

cum să rotiți videoclipul în media player

Aceasta este o treabă ușoară cu jQuery. Trebuie creat un cronometru pentru a vă executa codul în fiecare X secunde. În loc să scrieți un cod nou, totuși, cel mai ușor lucru de făcut este să emulați un „clic” pe următorul buton de imagine și să lăsați codul existent să facă toată treaba.

Iată noul JavaScript de care aveți nevoie - adăugați acest lucru după Imagine funcţie:

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

Nu se întâmplă multe aici. The window.setInterval metoda va rula o bucată de cod în mod regulat, așa cum este definit de timpul specificat la sfârșit. Timpul 2500 (în milisecunde) înseamnă că această prezentare va avansa la fiecare 2,5 secunde. Un număr mai mic înseamnă că fiecare imagine va avansa într-un ritm mai rapid. The clic metoda declanșează butoanele pentru a rula codul ca și cum un utilizator ar fi făcut clic pe buton cu mouse-ul.

Dacă sunteți pregătit pentru următoarea dvs. provocare JavaScript, încercați să creați un site web cu un constructor de site-uri statice, cum ar fi GatsbyJS, sau un cadru front-end precum Vue. Dacă sunteți un student Ruby, Jekyll este, de asemenea, o opțiune. Iată cum se descurcă Jekyll și GatsbyJS unul împotriva celuilalt.

Credit de imagine: Tharanat Sardsri prin Shutterstock.com

Acțiune Acțiune Tweet E-mail Cele mai bune 8 site-uri web pentru a descărca cărți audio gratuit

Cărțile audio sunt o sursă excelentă de divertisment și mult mai ușor de digerat. Iată cele mai bune opt site-uri web de unde le puteți descărca gratuit.

Citiți în continuare Subiecte asemănătoare

Programare
JavaScript
Web design

Despre autor Joe Coburn(136 articole publicate)

Joe este absolvent de Informatică de la Universitatea Lincoln, Marea Britanie. Este un dezvoltator de software profesionist și, atunci când nu zboară cu drone sau nu scrie muzică, poate fi găsit adesea făcând fotografii sau producând videoclipuri.

Mai multe de la Joe Coburn

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona