Kuidas luua lihtsat pildigaleriid HTML-i, CSS-i ja JavaScripti abil

Lihtsa pildigalerii loomine HTML-i, CSS-i ja JavaScripti abil on suurepärane viis veebiarenduse põhitõdede õppimiseks. Pildigaleriis saate pilte sirvida, valides veebilehel oleva pildi suurendamiseks pisipilte.

Galerii loomiseks saate veebilehe sisu lisamiseks kasutada HTML-i ja stiili lisamiseks CSS-i. Saate kasutada JavaScripti, et muuta galerii interaktiivseks, kui kasutaja klõpsab mõnel pisipildil.

Kuidas luua pildigalerii kasutajaliidest

Lisage pildigalerii kasutajaliides, kasutades HTML-i ja CSS-i. See hõlmab suure pildi lisamist veebilehe keskele, mis muutub vastavalt valitud pisipildile. Saate vaadata ka täielikku näidet lähtekood GitHubis.

1. Looge uus fail nimega "index.html".
instagram viewer
2. Lisage sellesse faili põhiline HTML-koodi struktuur:

   html>
   <htmllang="en-US">
   <pea>
   <pealkiri>Pildigaleriipealkiri>
   pea>
   <keha>
   <divklass="sissejuhatus">
   <h2>Pildigaleriih2>
   <lk>Pildi vaatamiseks valige altpoolt pisipiltlk>
   div>
   keha>
   html>

3. Looge alamkaust nimega "images". Täitke see mitme pildiga ja nimetage need vahemikust "pilt1.jpg" kuni "pilt10.jpg".
4. Lisage oma HTML-faili pildigalerii div:

   <divid="pildigalerii">
   div>

5. Lisage pildigalerii divisjoni sisse pildisilt, et kuvada suurendatud valitud pilt. Vaikimisi kuvage esimene pilt kaustas "images":

   <imgid="praegune pilt"src="images/image1.jpg"alt="Pilt 1">

6. Lisage HTML-failiga samasse kausta uus fail nimega "styles.css" järgmise CSS-iga. Muutke lisamiseks CSS-i neumorfse disaini komponendid või tehke muid disainilahendusi kasutades need CSS-i näpunäited ja nipid.

7. .intro { 
   teksti joondamine: Keskus; 
   font-perekond: Arial;
   }
   h2 { 
   fondi suurus: 36px;
   }
   lk { 
   fondi suurus: 14pt;
   }
   #pildigalerii { 
   laius: 600px; 
   marginaal: 0 auto;
   }
   #praegune-pilt { 
   laius: 100%;
   } 

8. Lisage oma HTML-faili head-märgendisse link oma CSS-failile:

   <linkrel="laadileht"tüüp="text/css"href="stiilid.css">

Kuidas lisada galerii muudele piltidele pisipilte

Praegu kuvab pildigalerii ainult esimest pilti. Lisage valitud pildi alla pisipiltide loend. Need pisipildid kuvavad kõigi kaustas "images" olevate piltide eelvaate.

1. Lisage HTML-faili pildigalerii div sisse veel üks div, et kuvada teiste piltide pisipildid:

   <divid="pildi-pöidlad">div>

2. Lisage CSS-faili pisipiltide loendi stiil:

   #pilt-pöidlad { 
   kuva: painduv; 
   õigustama-sisu: Keskus; 
   margin-top: 20px;
   }

3. Lisage HTML- ja CSS-failidega samasse kausta uus fail nimega "script.js".
4. Lisage link oma JavaScripti failile HTML-i body-märgendi allosas:

   <keha>
    Sinu kood siin 
   <stsenaariumsrc="script.js">stsenaarium>
   keha>

5. Hankige JavaScripti failis HTML-i element div, mis salvestab pisipiltide loendi:

   var imagePöial = dokument.getElementById("pildi-pöidlad");

6. Lisage silmus, et sirvida läbi galerii 10 kujutist:

   jaoks (var i = 1; mina <= 10; i++) {
   }

7. Loo tsükli sees iga pildi jaoks uus img-element:

   var pöial = dokument.createElement("img");

8. Lisage väärtused atribuutidele "src" ja "alt". Sel juhul on atribuut "src" kaustas "images" oleva pildi failitee samas registris:

   thumb.src = "pildid/pilt" + i + ".jpg";
   pöial.alt = "Pilt" + i;

9. Lisage oma CSS-faili uus klass, et kujundada pildi pisipildi stiil. Saate pisipiltidele lisada ka muid hõljutus- või ülemineku-CSS-stiile muuta oma veebisait tundlikuks ja interaktiivseks.

   .pöial { 
   laius: 80px; 
   kõrgus: 80px; 
   objektile sobiv: kaas; 
   margin-parem: 10px; 
   kursor: osuti;
   }

10. Lisage JavaScripti failis uuele pisipildile ülaltoodud klass:

    thumb.classList.add("pöial");

11. Lisage uus pisipilt HTML-i elemendile, mis sisaldab pisipiltide loendit:

    imageThumbs.appendChild (pöial);

Kuidas muuta pilti, kui kasutaja klõpsab pisipildil

Kui kasutaja klõpsab ühel pisipildil, muutke lehe keskel olev suurendatud pilt valitud pildiks. Selle funktsiooni saate lisada JavaScripti faili.

1. Hankige JavaScripti faili ülaosas praegu valitud pildi HTML-element:

   var praegune pilt = dokument.getElementById("praegune pilt");

2. For-loopi sees lisage sündmuste töötleja mis käivitub, kui kasutaja valib mõne lehe allosas oleva pisipildi:

   thumb.addEventListener(
   "klõpsake", funktsiooni() {
    }
   );

3. Muutke sündmuste käitlejas praeguse pildi atribuut "src" äsja valitud pildiks. Samuti saate värskendada atribuuti "alt".

   currentImage.src = see.src;
   currentImage.alt = see.alt;

4. Klõpsake failil "index.html", et see veebibrauseris avada.
5. Pildi vaatamiseks valige mõni pisipilt.

Jätkake oma JavaScripti teadmiste laiendamist

Olenemata teie kogemusest on oluline jätkata ehitusprojekte, et oma teadmisi laiendada. Jätkake muude projektide uurimist, nagu malemängu, kalkulaatori või ülesannete nimekirja koostamine.