Kā izveidot vienkāršu attēlu galeriju, izmantojot HTML, CSS un JavaScript

Vienkāršas attēlu galerijas izveide, izmantojot HTML, CSS un JavaScript, ir lielisks veids, kā apgūt tīmekļa izstrādes pamatus. Attēlu galerijā varēsiet pārlūkot attēlus, atlasot sīktēlus, lai palielinātu attēlu tīmekļa lapā.

Lai izveidotu galeriju, varat izmantot HTML, lai pievienotu tīmekļa lapas saturu, un CSS, lai pievienotu stilu. Varat izmantot JavaScript, lai padarītu galeriju interaktīvu, kad lietotājs noklikšķina uz jebkura sīktēla.

Kā izveidot attēlu galerijas lietotāja interfeisu

Pievienojiet attēlu galerijas lietotāja saskarni, izmantojot HTML un CSS. Tas ietver liela attēla pievienošanu tīmekļa lapas centrā, kas mainīsies atkarībā no atlasītā sīktēla. Varat arī apskatīt pilnu piemēru pirmkods vietnē GitHub.

1. Izveidojiet jaunu failu ar nosaukumu "index.html".
2. Šajā failā pievienojiet pamata HTML koda struktūru:

   html>
   <htmllang="en-US">
   <galvu>
   <virsraksts>Attēlu galerijavirsraksts>
   galvu>
   <ķermeni>
   <divklasē="ievads">
   <h2>Attēlu galerijah2>
   <lpp>Tālāk atlasiet sīktēlu, lai skatītu attēlulpp>
   div>
   ķermeni>
   html>

3. Izveidojiet apakšmapi ar nosaukumu "attēli". Aizpildiet to ar vairākiem attēliem un nosauciet tos no “attēls1.jpg” līdz “attēls10.jpg”.
4. HTML failā pievienojiet attēlu galerijai div:

   <divid="attēlu galerija">
   div>

5. Attēlu galerijas sadaļā pievienojiet attēla tagu, lai parādītu palielināto atlasīto attēlu. Pēc noklusējuma parādiet pirmo attēlu mapē "images":

   <imgid="pašreizējais attēls"src="images/image1.jpg"alt="1. attēls">

6. Tajā pašā mapē, kur atrodas jūsu HTML fails, pievienojiet jaunu failu ar nosaukumu "styles.css" ar šādu CSS. Jūtieties brīvi modificēt CSS, lai pievienotu Neimorfās konstrukcijas sastāvdaļas vai veiciet citus dizaina uzlabojumus, izmantojot šos CSS padomus un trikus.

7. .intro { 
   teksta līdzināšana: centrs; 
   fontu ģimene: Arial;
   }
   h2 { 
   fonta izmērs: 36px;
   }
   lpp { 
   fonta izmērs: 14pt;
   }
   #attēlu galerija { 
   platums: 600px; 
   starpība: 0 auto;
   }
   #pašreizējais attēls { 
   platums: 100%;
   } 

8. Pievienojiet saiti uz savu CSS failu HTML faila head tagā:

   <saiterel="stila lapa"veids="text/css"href="styles.css">

Kā pievienot sīktēlus citiem galerijas attēliem

Pašlaik attēlu galerijā tiek rādīts tikai pirmais attēls. Zem atlasītā attēla pievienojiet sīktēlu sarakstu. Šie sīktēli parādīs visu attēlu priekšskatījumu, kas atrodas mapē "attēli".

1. Attēlu galerijas div HTML failā pievienojiet vēl vienu div, lai parādītu citu attēlu sīktēlus:

   <divid="attēla īkšķi">div>

2. CSS failā pievienojiet sīktēlu saraksta stilu:

   #attēls-īkšķi { 
   displejs: flex; 
   attaisnot-saturs: centrs; 
   margin-top: 20px;
   }

3. Tajā pašā mapē, kur atrodas jūsu HTML un CSS faili, pievienojiet jaunu failu ar nosaukumu "script.js".
4. Pievienojiet saiti uz JavaScript failu HTML body taga apakšā:

   <ķermeni>
    Tavs kods šeit 
   <skriptssrc="script.js">skripts>
   ķermeni>

5. JavaScript failā iegūstiet div HTML elementu, kurā tiks saglabāts sīktēlu saraksts:

   var imageĪkšķi = dokumentu.getElementById("attēla īkšķi");

6. Pievienojiet cilpu, lai skatītu katru no 10 galerijas attēliem:

   priekš (var i = 1; es <= 10; i++) {
   }

7. Cilpas iekšpusē katram attēlam izveidojiet jaunu img elementu:

   var īkšķis = dokumentu.createElement("img");

8. Pievienojiet vērtības atribūtiem "src" un "alt". Šajā gadījumā atribūts "src" ir faila ceļš uz attēlu tajā pašā rādītājā mapē "images":

   thumb.src = "attēli/attēls" + es + ".jpg";
   thumb.alt = "Attēls" + i;

9. CSS failā pievienojiet jaunu klasi, lai veidotu attēla sīktēla stilu. Sīktēliem varat pievienot arī citu kursora novietošanas vai pārejas CSS stilu padariet savu vietni adaptīvu un interaktīvu.

   .īkšķis { 
   platums: 80px; 
   augstums: 80px; 
   objektam piemērots: piesegt; 
   mala-labais: 10px; 
   kursors: rādītājs;
   }

10. JavaScript failā pievienojiet iepriekš minēto klasi jaunajam sīktēlam:

    thumb.classList.add("īkšķis");

11. Pievienojiet jauno sīktēlu HTML elementam, kas satur sīktēlu sarakstu:

    imageThumbs.appendChild (īkšķis);

Kā nomainīt attēlu, kad lietotājs noklikšķina uz sīktēla

Kad lietotājs noklikšķina uz kāda no sīktēliem, nomainiet palielināto attēlu lapas centrā uz atlasīto attēlu. Šo funkcionalitāti varat pievienot JavaScript failā.

1. JavaScript faila augšdaļā iegūstiet pašlaik atlasītā attēla HTML elementu:

   var pašreizējais attēls = dokumentu.getElementById("pašreizējais attēls");

2. For-cilpas iekšpusē pievienojiet notikumu apstrādātāju kas tiek aktivizēts, kad lietotājs lapas apakšā atlasa kādu no sīktēliem:

   thumb.addEventListener(
   "klikšķis", funkciju() {
    }
   );

3. Notikumu apstrādātājā mainiet pašreizējā attēla atribūtu "src" uz tikko atlasīto attēlu. Varat arī atjaunināt atribūtu "alt":

   currentImage.src = šis.src;
   currentImage.alt = šis.alt;

4. Noklikšķiniet uz faila "index.html", lai to atvērtu tīmekļa pārlūkprogrammā.
5. Lai skatītu attēlu, atlasiet jebkuru no sīktēliem.

Turpiniet paplašināt savas JavaScript zināšanas

Neatkarīgi no jūsu pieredzes ir svarīgi turpināt būvniecības projektus, lai paplašinātu savas zināšanas. Turpiniet izpētīt citus projektus, piemēram, šaha spēles, kalkulatora vai uzdevumu saraksta izveidi.