Cum de a construi un slideshow JavaScript în 3 pași simpli

Dacă ați citit ghidul nostru despre cum să faceți un site web Cum să faceți un site web: Pentru începători Cum să faceți un site web: Pentru începători Azi vă voi îndruma prin procesul de realizare a unui site complet de la zero. Nu vă faceți griji dacă acest lucru pare dificil. Te voi îndruma în fiecare pas al drumului. Citiți mai multe, s-ar putea să vă întrebați ce să faceți în continuare pentru a vă îmbunătăți abilitățile. Efectuarea unei prezentări de fotografii este o sarcină surprinzător de ușoară și una care vă poate învăța abilitățile valoroase necesare pentru a obține un program de programare 10 Locuri de muncă de programare pe calculator care sunt în cerere chiar acum 10 locuri de muncă pentru programare pe calculator care sunt în cerere chiar acum De când aterizarea unui program de lucru poate să fie greu în peisajul actual, să vă concentrați asupra uneia dintre următoarele concentrații pentru a vă îmbunătăți șansele de succes. Citeste mai mult .

Astăzi vă voi arăta cum să creați un slideshow JavaScript de la zero. Să mergem imediat!

Cerințe preliminare

Va trebui să știți câteva lucruri înainte de a putea începe codarea. Pe lângă un browser web și un editor de text dorit (vă recomandăm textul sublim), veți avea nevoie de experiență HTML, CSS, JavaScript, și jQuery.

Dacă nu sunteți atât de încrezător în aptitudinile dvs., asigurați-vă că ați citit ghidurile noastre de utilizare a modelului de obiect de document JavaScript și dezvoltare web: Utilizarea modelului de obiect de documente JavaScript și dezvoltarea web: Utilizarea modelului de obiect document Acest articol vă va prezenta scheletul cu care lucrează JavaScript. Având o cunoaștere de lucru a acestui model de obiect abstract, puteți scrie JavaScript care funcționează pe orice pagină web. Citeste mai mult si 5 pasi de bebelusi pentru a invata CSS 5 Pasi de bebelusi pentru a invata CSS si a deveni un Kick-Ass CSS Sorcerer 5 Pasi de bebelusi pentru a invata CSS si a deveni un Kick Ass CSS Sorcerer CSS este cel mai important schimbari pe care paginile web le-au vazut in ultima deceniu, și a deschis calea pentru separarea stilului și a conținutului. În mod modern, XHTML definește structura semantică ... Citește mai mult. Dacă sunteți încrezător cu JavaScript, dar nu ați folosit jQuery înainte, consultați ghidul nostru de bază pentru jQuery Un ghid de bază pentru JQuery pentru programatori Javascript Un ghid de bază pentru JQuery pentru programatori Javascript Dacă sunteți un programator Javascript, acest ghid pentru JQuery va vă ajută să începeți codarea ca un ninja. Citeste mai mult .

1. Noțiuni de bază

Această prezentare de diapozitive necesită mai multe caracteristici:

1. Suport pentru imagini
2. Controale pentru schimbarea imaginilor
3. O subtitrare text
4. Mod automat

Se pare o listă simplă de caracteristici. Modul automat va avansa în mod automat imaginile la următorul în secvență. Iată schita grosieră pe care am făcut-o înainte de a scrie orice cod:

Dacă vă întrebați de ce vă deranjez planificarea, atunci aruncați o privire la cele mai grave greșeli de programare din istorie Cele mai grele 10 greșeli de programare din istorie Cele mai grele 10 greșeli de programare din istorie În trecutul său vechi, codificarea distrugerii cauzate de asemenea. Instanțele unui pic de cod rău au provocat dezastre la un nivel major. Următoarele sunt 10 dintre cele mai grave greșeli de programare din istorie. Citeste mai mult . Acest proiect nu va face nimeni ucis, dar este esențial să avem o înțelegere solidă a procedurilor de cod și de planificare înainte de a lucra la un cod mai mare - chiar dacă este doar o schiță grosieră.

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

         
 
  
 Moara de vant 
 
 
  
 Plantă 
 
 
  
 Câine 
 
 
❮
 
❯
 
  

Iată cum arată codul:

E un pic de gunoi, nu-i așa? Să o desființăm î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 Google CDN - 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 mai târziu acest lucru cu CSS. În interiorul acestui container, există trei blocuri de cod, fiecare având un scop similar.

O clasă parentală este definită cu un nume de clasă de imageContainer:

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

Ca o ultimă etapă, se face referire la o imagine, iar legenda este stocată în interiorul unui div cu legendă clasă:

 
 Câine 

Mi-am creat imaginile cu nume de fișiere numerice și le-am păstrat în interiorul unui dosar numit Imagini. Puteți să apelați orice doriți, cu condiția să actualizați codul HTML pentru a se potrivi.

Dacă doriți să aveți mai mult sau mai puțin imagini în prezentarea dvs., copiați și inserați sau ștergeți blocurile de coduri cu imageContainer clasă, amintindu-și să actualizeze numele de fișiere ș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 folosite pentru a afișa săgețile înainte și înapoi, în mod similar cu modul în care funcționează fonturile de pictograme Fonturile Iconului sunt minunate pentru site-ul dvs.: Iată de ce Fonturile de Icon sunt minunate pentru site-ul dvs.: Iată de ce astăzi vă voi arăta ce pictograme de pictograme și cum le puteți folosi pentru a vă îmbogăți site-ul. Citeste mai mult .

2. CSS

Acum, că structura de bază este în loc, este timpul să se uite frumos. Iată cum va arăta după acest nou cod:

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

html font-family: helvetica, arial;  #showContainer / * Învelișul principal pentru toate imaginile * / lățimea: 670px; umplutura: 0; marja: 0 auto; overflow: ascuns; poziție: relativă;  .navButton / * Face butoanele să arate frumos * / cursor: pointer; plutește la stânga; lățime: 25px; înălțime: 22px; padding: 10px; margin-dreapta: 5px; overflow: ascuns; text-align: centru; culoare albă; font-weight: bold; font-size: 18px; fundal: # 000000; opacitate: 0,65; user-select: none;  .navButton: mutați opacity: 1;  .caption float: right;  .imageContainer: nu (: first-child) / * Ascunde toate imaginile cu excepția primului * / display: none; 

Asta arata mult mai bine acum? Să aruncăm o privire la cod.

Panasonic Lumix DMC-G80 / G85 Recenzie Panasonic Lumix DMC-G80 / G85 Recenzie Lumix G85 este cea mai recentă cameră de fotografiat fără oglindă a Panasonic și împachetează în departamentul video, cu HDMI out și 4K de înregistrare - toate pentru $ 1000! Citiți mai multe recenzii. Aceste imagini sunt toate 670 x 503 pixeli, astfel încât această prezentare de diapozitive a fost în mare parte proiectată în jurul unor imagini de acea dimensiune. Va trebui să ajustați în mod corespunzător CSS dacă doriți să utilizați imagini cu o altă dimensiune. Vă recomandăm să redimensionați imaginile la dimensiunile potrivite - diferite imagini de dimensiuni diferite vor cauza probleme de styling.

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

1. cursor: pointer - Acest lucru schimbă cursorul de la o săgeată la un deget de orientare atunci când mutați cursorul peste butoane.
2. opacitate: 0,65 - Aceasta crește transparența butoanelor.
3. user-select: niciuna - Acest lucru vă asigură că nu puteți evidenția accidental textul de pe butoane.

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

Partea cea mai complexă aici este această linie ciudată:

.imageContainer: nu (: first-child) 

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

În primul rând, vizează orice elemente cu imageContainer clasă. :nu() sintaxa afirmă că elementele din interiorul parantezelor 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 primul.

3. JavaScript-ul

Ultima piesă a puzzle-ului este JavaScript. Aceasta este logica pentru ca prezentarea să funcționeze corect.

Adăugați acest cod la adresa dvs. scenariu etichetă:

$ (()) () () ($ ('# precedent')) (). fadeOut (1); decreaseImage (); $ ('# im_' + currentImage) .stop () fadeIn (1) / Schimbarea la următoarea imagine $ ('# im_' + currentImage) .stop () fadeOut (1); increaseImage (); $ ('# im_' + currentImage) ; var actualImage = 1; var totalImages = 3; funcția increaseImage () / * Creșteți currentImage cu 1. * Resetează la 1 dacă este mai mare decât totalImages * / ++ currentImage; function decreaseImage () / * Decrease currentImage by 1. * Reseta la totalImages daca este mai mica de 1 * / --currentImage; daca (currentImage < 1)  currentImage = totalImages;   );

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

Trebuie să definiți două variabile. Acestea pot fi considerate drept variabilele principale de configurare pentru prezentarea de diapozitive:

var currentImage = 1; var totalImages = 3;

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

Cele două funcții increaseImage și decreaseImage avansați sau retrageți currentImage variabil. Dacă această variabilă este mai mică decât una sau mai mare decât totalImages, devine resetat la unul sau totalImages. Acest lucru asigură faptul că prezentarea de diapozitive se va realiza odată ce va ajunge la final.

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

Stop() metoda este construită în jQuery. Aceasta anulează toate evenimentele în așteptare. Acest lucru asigură că fiecare apăsare a butonului este netedă și înseamnă că nu aveți 100 de butoane apăsând pe tot ce așteaptă să execute dacă mergeți puțin nebun pe mouse. fadeIn (1) și fadeOut (1) metode se estompează în sau în afara imaginilor, după cum este necesar. Numărul specifică durata fadei în milisecunde. Încercați să schimbați acest număr î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. Mergeți prea departe și puteți începe să vedeți evenimente ciudate sau “flickers” între modificările imaginii. Iată slideshow-ul în acțiune:

Progresul automat

Această prezentare arată destul de bine acum, dar este nevoie de o ultimă atingere finală. Progresul automat este o caracteristică care va face ca această prezentare să strălucească. După o anumită perioadă de timp, fiecare imagine va avansa automat la următoarea. Cu toate acestea, utilizatorul poate naviga înainte sau înapoi.

Aceasta este o treabă ușoară cu jQuery. Trebuie să fie creat un cronometru pentru a executa fiecare cod X secunde. În loc să scrie un cod nou, cu toate acestea, cel mai ușor de făcut este să emulați a “clic” pe următorul buton de imagine și lăsați codul existent să facă toate lucrările.

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

window.setInterval (functie () $ ('# previous'). click ();, 2500);

Nu se întâmplă prea multe aici. 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. clic metoda declanșează butoanele pentru a rula codul ca și cum un utilizator ar fi dat clic pe buton cu ajutorul mouse-ului.

Învățați astăzi niște abilități noi? Care este trucul tău preferat pentru a distra slideshow-uri? Spuneți-ne în comentariile de mai jos!

Imagine de credit: Tharanat Sardsri prin Shutterstock.com

Explorați mai multe despre: JavaScript, Web Design.