Ako vytvoriť prezentáciu JavaScript v 3 jednoduchých krokoch

Ak ste si prečítali nášho sprievodcu na ako vytvoriť webovú stránku , možno premýšľate, čo robiť ďalej, aby ste zlepšili svoje schopnosti. Vytvorenie prezentácie fotografií je prekvapivo ľahká úloha a môže vás naučiť cenné zručnosti potrebné na získanie práce v oblasti programovania.

Dnes vám ukážem, ako vytvoriť prezentáciu v jazyku JavaScript od začiatku. Poďme rovno naskočiť!

Predpoklady

Predtým, ako začnete s kódovaním, budete potrebovať vedieť niekoľko vecí. Spolu s vhodným webovým prehliadačom a textovým editorom podľa vášho výberu (odporúčam Vznešený text ), budete potrebovať nejaké skúsenosti s HTML , CSS , JavaScript a jQuery .

Ak si nie ste takí istí svojimi schopnosťami, prečítajte si nášho sprievodcu používaním objektového modelu dokumentu a tieto tipy na naučenie sa CSS. Ak ste si istí jazykom JavaScript, ale jQuery ste nikdy predtým nepoužívali, pozrite sa na nášho základného sprievodcu jQuery.

1. Začíname

Táto prezentácia vyžaduje niekoľko funkcií:

Podpora pre obrázky
Ovládacie prvky na zmenu obrázkov
Textový nadpis
Automatický režim

Zdá sa, že je to jednoduchý zoznam funkcií. Automatický režim automaticky posunie obrázky na nasledujúci v poradí. Tu je hrubý náčrt, ktorý som urobil pred napísaním akéhokoľvek kódu:

Ak sa čudujete, prečo sa trápiť s plánovaním, pozrite sa na tieto najhoršie chyby v programovaní v histórii. Tento projekt nikoho nezabije, ale je nevyhnutné, aby ste pred prácou na väčšom kóde dobre porozumeli kódu a postupom plánovania - aj keď je to len hrubý náčrt.

Tu je počiatočný HTML, ktorý potrebujete, aby ste mohli začať. Uložte to do súboru s príslušným názvom, ako napríklad index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Takto vyzerá kód:

Je to trochu svinstvo, však? Rozoberme si to, než to vylepšíme.

Tento kód obsahuje „štandardné“ HTML , hlava , štýl , skript a telo tagy. Tieto časti sú základnými súčasťami akejkoľvek webovej stránky. JQuery je súčasťou služby Google CDN - zatiaľ nejde o nič jedinečné ani špeciálne.

Vnútri tela je div s id showContainer . Jedná sa o obal alebo vonkajší obal na uloženie prezentácie. Neskôr to zlepšíte pomocou CSS. Vnútri tohto kontajnera sa nachádzajú tri bloky kódu, každý s podobným účelom.

Nadradená trieda je definovaná názvom triedy imageContainer :

Slúži na uloženie jednej snímky - obrázok a popis sú uložené v tomto kontajneri. Každý kontajner má jedinečné ID, ktoré pozostáva zo znakov v_ a číslo. Každý kontajner má iné číslo, od jedného do troch.

V poslednom kroku sa odkazuje na obrázok a popis sa uloží do súboru div s príponou nadpis trieda:

Dog

Vytvoril som svoje obrázky s číselnými názvami súborov a uložil ich do priečinka s názvom snímky . Môžete ich nazvať, ako chcete, za predpokladu, že aktualizujete HTML tak, aby sa zhodovalo.

Ak chcete mať v prezentácii viac alebo menej obrázkov, jednoducho skopírujte a prilepte alebo odstráňte bloky kódu pomocou súboru imageContainer triedy, pričom si nezabudnite podľa potreby aktualizovať názvy súborov a ID.

Nakoniec sú vytvorené navigačné tlačidlá. Umožňujú používateľovi prechádzať obrázkami:

 ❮  
 ❯

Títo HTML entita kódy sa používajú na zobrazenie šípok vpred a vzad podobne, ako fungujú písma ikon.

2. CSS

Teraz, keď je základná štruktúra na svojom mieste, je načase, aby vyzerala pekná . Ako to bude vyzerať po tomto novom kóde:

Pridajte tento CSS medzi svoje štýl značky:

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

Teraz to vyzerá oveľa lepšie, nie? Pozrime sa na kód.

Používam ukážkové obrázky, ktoré sú všetky 670 x 503 pixelov , takže táto prezentácia bola väčšinou navrhnutá okolo obrázkov tejto veľkosti. Ak chcete použiť obrázky inej veľkosti, budete musieť CSS vhodne upraviť. Odporúčame vám zmeniť veľkosť obrázkov na zodpovedajúce veľkosti - rôzne obrázky rôznych rozmerov spôsobia problémy so štýlom.

Väčšina tohto CSS je samovysvetľujúci. Existuje kód, ktorý definuje veľkosť kontajnera na ukladanie obrázkov, zarovnáva všetko na stred, určuje písmo spolu s farbou tlačidiel a textu. Existuje niekoľko štýlov, s ktorými ste sa možno predtým nestretli:

kurzor: ukazovateľ - Keď umiestnite kurzor na tlačidlá, zmení sa kurzor zo šípky na ukazujúci prst.
krycia schopnosť: 0,65 - To zvyšuje transparentnosť tlačidiel.
užívateľský výber: žiadny - To zaisťuje, že nemôžete omylom zvýrazniť text na tlačidlách.

Výsledok väčšiny tohto kódu môžete vidieť na tlačidlách:

Najkomplexnejšou časťou je táto podivne vyzerajúca čiara:

.imageContainer:not(:first-child) {

Môže to vyzerať celkom neobvykle, ale je to celkom samozrejmé.

Najprv zacieli na všetky prvky pomocou imageContainer trieda. The : nie () syntax uvádza, že všetky prvky v zátvorkách by mali byť vylúčené z tohto štýlu. Nakoniec, : prvé dieťa syntax uvádza, že tento CSS by mal zacieľovať na akýkoľvek prvok zodpovedajúci názvu ale ignorujte prvý prvok. Dôvod je jednoduchý. Pretože ide o prezentáciu, je potrebný iba jeden obrázok súčasne. Tento CSS skryje všetky obrázky okrem prvého.

3. JavaScript

Posledným kúskom skladačky je JavaScript. Toto je logika, aby vlastne funkcia prezentácie fungovala správne.

Pridajte tento kód do svojho skript značka:

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

Môže sa to zdať neintuitívne, ale preskočím počiatočné bloky kódu a od polovice prejdem k vysvetleniu kódu-nebojte sa, vysvetlím celý kód!

Musíte definovať dve premenné. (Tu je návod, ako definovať premenné v JavaScripte.) Tieto premenné je možné považovať za hlavné konfiguračné premenné prezentácie:

var currentImage = 1;  
var totalImages = 3;

Tieto ukladajú celkový počet obrázkov v prezentácii a číslo obrázka, od ktorého sa má začať. Ak máte viac obrázkov, jednoducho zmeňte súbor totalImages premenná na celkový počet obrázkov, ktoré máte.

Dve funkcie zvýšiť obrázok a zmenšiťObrázok postúpiť alebo ustúpiť currentImage premenná. Ak by mala byť táto premenná nižšia ako jedna alebo vyššia ako totalImages , resetuje sa na jednu alebo totalImages . To zaisťuje, že sa prezentácia bude opakovať, akonáhle sa dostane na koniec.

Späť ku kódu na začiatku. Tento kód „zacieľuje“ na nasledujúce a predchádzajúce tlačidlá. Keď kliknete na každé tlačidlo, vyvolá sa príslušné zvýšiť alebo znížiť metódy. Po dokončení jednoducho zmizne obraz na obrazovke a zmizne v novom obrázku (podľa definície súboru currentImage premenná).

The zastaviť () metóda je zabudovaná do jQuery. Týmto sa rušia všetky čakajúce udalosti. To zaisťuje, že každé stlačenie tlačidla je plynulé a znamená to, že nemáte k dispozícii 100 stlačení všetkých tlačidiel, pokiaľ sa na myši trochu zbláznite. The fadeIn (1) a fadeOut (1) metódy podľa potreby obrázky zoslabujú alebo zmenšujú. Číslo udáva trvanie vyblednutia v milisekundách. Skúste to zmeniť na väčšie číslo, napríklad 500. Vyššie číslo bude mať za následok dlhší čas prechodu. Choďte však príliš ďaleko a môžete začať vidieť podivné udalosti alebo „mihotanie“ medzi zmenami obrazu. Tu je prezentácia v prevádzke:

Automatické napredovanie

Táto prezentácia teraz vyzerá celkom dobre, ale je potrebný posledný dotyk. Automatické napredovanie je funkcia, vďaka ktorej bude táto prezentácia skutočne žiariť. Po uplynutí stanoveného času každý obrázok automaticky prejde na nasledujúci. Užívateľ sa však môže pohybovať dopredu alebo dozadu.

ako odstrániť správy na mac

S jQuery je to jednoduchá práca. Na spustenie kódu je potrebné vytvoriť časovač X sekúnd. Namiesto písania nového kódu je však najľahšie napodobniť „kliknutie“ na tlačidlo nasledujúceho obrázka a všetku prácu nechať na existujúcom kóde.

Tu je nový JavaScript, ktorý potrebujete - pridajte ho po zmenšiťObrázok funkcia:

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

Tu sa toho veľa nedeje. The window.setInterval metóda bude pravidelne spúšťať časť kódu, definovanú časom uvedeným na konci. Čas 2 500 (v milisekundách) znamená, že táto prezentácia bude postupovať každých 2,5 sekundy. Menšie číslo znamená, že každý obrázok bude postupovať rýchlejšie. The kliknite metóda spúšťa tlačidlá na spustenie kódu, ako keby používateľ klikol na tlačidlo myšou.

Ak ste pripravení na ďalšiu výzvu JavaScriptu, skúste vytvoriť webovú stránku pomocou statického nástroja na tvorbu webových stránok, akým je GatsbyJS, alebo front-endového rámca, akým je Vue. Ak ste študentom Ruby, Jekyll je tiež možnosťou. Tu je návod, ako si proti sebe stoja Jekyll a GatsbyJS.

Obrazový kredit: Tharanat Sardsri cez Shutterstock.com

zdieľam zdieľam Tweet E -mail 8 najlepších webových stránok na bezplatné stiahnutie zvukových kníh

Audioknihy sú skvelým zdrojom zábavy a oveľa jednoduchšie stráviteľné. Tu je osem najlepších webových stránok, na ktorých si ich môžete zadarmo stiahnuť.

Čítajte ďalej Súvisiace témy

Programovanie
JavaScript
Vzhľad stránky

O autorovi Joe Coburn(136 publikovaných článkov)

Joe je absolventom počítačových vied na University of Lincoln, UK. Je profesionálnym softvérovým vývojárom a keď nelieta s dronmi alebo nepíše hudbu, často ho zastihne fotografovanie alebo vytváranie videí.

Viac od Joe Coburn

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber