Kaip sukurti paprastą vaizdų galeriją naudojant HTML, CSS ir JavaScript

Paprastos vaizdų galerijos kūrimas naudojant HTML, CSS ir JavaScript yra puikus būdas išmokti žiniatinklio kūrimo pagrindus. Vaizdų galerijoje galėsite naršyti per vaizdus pasirinkę miniatiūras, kad padidintumėte vaizdą tinklalapyje.

Norėdami sukurti galeriją, galite naudoti HTML, kad pridėtumėte tinklalapio turinį, ir CSS, kad pridėtumėte stilių. Galite naudoti JavaScript, kad galerija taptų interaktyvi, kai vartotojas spustelėja bet kurią miniatiūrą.

Kaip sukurti vaizdų galerijos vartotojo sąsają

Pridėkite vaizdų galerijos vartotojo sąsają naudodami HTML ir CSS. Tai apima didelio vaizdo pridėjimą tinklalapio centre, kuris keisis atsižvelgiant į pasirinktą miniatiūrą. Taip pat galite peržiūrėti visą pavyzdį

1. Sukurkite naują failą pavadinimu „index.html“.
2. Šiame faile pridėkite pagrindinę HTML kodo struktūrą:

   html>
   <htmllang="en-US">
   <galva>
   <titulą>Vaizdų galerijatitulą>
   galva>
   <kūnas>
   <divklasė="įvadas">
   <h2>Vaizdų galerijah2>
   <p>Norėdami peržiūrėti vaizdą, pasirinkite žemiau esančią miniatiūrąp>
   div>
   kūnas>
   html>

3. Sukurkite poaplankį pavadinimu „vaizdai“. Užpildykite jį keliais vaizdais ir pavadinkite juos nuo „vaizdas1.jpg“ iki „vaizdas10.jpg“.
4. HTML faile pridėkite vaizdų galerijos div:

   <divid="vaizdų galerija">
   div>

5. Vaizdų galerijos skyrelyje pridėkite vaizdo žymą, kad būtų rodomas padidintas pasirinktas vaizdas. Pagal numatytuosius nustatymus rodyti pirmąjį vaizdą aplanke „vaizdai“:

   <imgid="dabartinis vaizdas"src="images/image1.jpg"alt="1 vaizdas">

6. Tame pačiame aplanke kaip ir HTML failas, pridėkite naują failą pavadinimu "styles.css" su toliau nurodytu CSS. Nedvejodami pakeiskite CSS, kad pridėtumėte neumorfinės konstrukcijos komponentai arba atlikite kitus dizaino pakeitimus naudodami šiuos CSS patarimus ir gudrybes.

7. .įvadas { 
   teksto lygiavimas: centras; 
   šrifto šeima: Arial;
   }
   h2 { 
   šrifto dydis: 36px;
   }
   p { 
   šrifto dydis: 14pt;
   }
   #vaizdų galerija { 
   plotis: 600px; 
   marža: 0 automatinis;
   }
   #dabartinis vaizdas { 
   plotis: 100%;
   } 

8. Pridėkite nuorodą į savo CSS failą HTML failo žymoje head:

   <nuorodarel="stiliaus lapas"tipo="text/css"href="styles.css">

Kaip pridėti kitų galerijos vaizdų miniatiūras

Šiuo metu vaizdų galerijoje rodomas tik pirmasis vaizdas. Po pasirinktu vaizdu pridėkite miniatiūrų sąrašą. Šios miniatiūros parodys visų vaizdų, esančių aplanke „vaizdai“, peržiūrą.

1. Vaizdų galerijos div HTML faile pridėkite kitą div, kad būtų rodomos kitų vaizdų miniatiūros:

   <divid="vaizdo nykščiai">div>

2. CSS faile pridėkite tam tikrą miniatiūrų sąrašo stilių:

   #vaizdas-nykščiai { 
   ekranas: lankstus; 
   pateisinti-turinys: centras; 
   paraštė-viršus: 20px;
   }

3. Tame pačiame aplanke, kuriame yra HTML ir CSS failai, pridėkite naują failą pavadinimu „script.js“.
4. Pridėkite nuorodą į savo „JavaScript“ failą HTML body žymos apačioje:

   <kūnas>
    Jūsų kodas čia 
   <scenarijussrc="script.js">scenarijus>
   kūnas>

5. „JavaScript“ faile gaukite „div“ HTML elementą, kuriame bus saugomas miniatiūrų sąrašas:

   var imageThumbs = dokumentas.getElementById("vaizdo nykščiai");

6. Pridėkite kilpą, kad peržiūrėtumėte kiekvieną iš 10 vaizdų galerijoje:

   dėl (var aš = 1; aš <= 10; i++) {
   }

7. Ciklo viduje kiekvienam vaizdui sukurkite naują img elementą:

   var nykštis = dokumentas.createElement("img");

8. Pridėkite atributų „src“ ir „alt“ reikšmes. Šiuo atveju atributas "src" yra failo kelias į vaizdą, esantį toje pačioje rodyklėje aplanke "images":

   thumb.src = "vaizdai / vaizdas" + aš + ".jpg";
   nykštis.alt = "Vaizdas" + i;

9. CSS faile pridėkite naują klasę, kad sukurtumėte vaizdo miniatiūros stilių. Taip pat galite pridėti kitokį miniatiūrų užvedimą arba pereinamąjį CSS stilių kad jūsų svetainė būtų interaktyvi ir interaktyvi.

   .nykštys { 
   plotis: 80px; 
   aukščio: 80px; 
   tinkamas objektui: viršelis; 
   paraštė-dešinė: 10px; 
   žymeklį: rodyklė;
   }

10. „JavaScript“ faile pridėkite aukščiau nurodytą klasę prie naujos miniatiūros:

    thumb.classList.add("nykštys");

11. Pridėkite naują miniatiūrą prie HTML elemento, kuriame yra miniatiūrų sąrašas:

    imageThumbs.appendChild (nykštis);

Kaip pakeisti vaizdą, kai vartotojas spusteli miniatiūrą

Kai vartotojas spusteli vieną iš miniatiūrų, pakeiskite padidintą vaizdą puslapio centre į pasirinktą vaizdą. Šią funkciją galite pridėti „JavaScript“ faile.

1. „JavaScript“ failo viršuje gaukite šiuo metu pasirinkto vaizdo HTML elementą:

   var dabartinis vaizdas = dokumentas.getElementById("dabartinis vaizdas");

2. For-kilpos viduje, pridėti įvykių tvarkyklę kuris suaktyvinamas, kai vartotojas pasirenka bet kurią iš miniatiūrų puslapio apačioje:

   thumb.addEventListener(
   "spausti", funkcija() {
    }
   );

3. Įvykių tvarkyklėje pakeiskite dabartinio vaizdo atributą „src“ į naujai pasirinktą vaizdą. Taip pat galite atnaujinti „alt“ atributą:

   currentImage.src = tai.src;
   currentImage.alt = tai.alt;

4. Spustelėkite failą „index.html“, kad atidarytumėte jį žiniatinklio naršyklėje.
5. Norėdami peržiūrėti vaizdą, pasirinkite bet kurią iš miniatiūrų.

Toliau plėskite savo „JavaScript“ žinias

Nepriklausomai nuo jūsų patirties, svarbu tęsti statybos projektus, kad išplėstumėte savo žinias. Toliau tyrinėkite kitus projektus, pvz., šachmatų žaidimo, skaičiuoklės ar darbų sąrašo kūrimą.