Jak vytvořit prezentaci JavaScriptu ve 3 snadných krocích

Pokud jste si přečetli našeho průvodce na jak vytvořit web Možná si říkáte, co dělat dál, abyste zlepšili své dovednosti. Vytvoření prezentace fotografií je překvapivě snadný úkol, který vás může naučit cenné dovednosti potřebné k získání práce s programováním.

Dnes vám ukážu, jak vytvořit JavaScriptovou prezentaci od začátku. Pojďme skočit přímo dovnitř!

Předpoklady

Než začnete s kódováním, musíte vědět pár věcí. Vedle vhodného webového prohlížeče a textového editoru podle vašeho výběru (doporučuji Vznešený text ), budete potřebovat nějaké zkušenosti s HTML , CSS , JavaScript , a jQuery .

Pokud si nejste tak jistí svými dovednostmi, přečtěte si našeho průvodce používáním objektového modelu dokumentu a tyto tipy k osvojení CSS. Pokud jste si jisti JavaScriptem, ale jQuery jste nikdy předtím nepoužívali, podívejte se na náš základní průvodce jQuery.

1. Začínáme

Tato prezentace vyžaduje několik funkcí:

Podpora obrázků
Ovládací prvky pro změnu obrázků
Textový popisek
Automatický režim

Vypadá to na jednoduchý seznam funkcí. Automatický režim automaticky posune obrázky na další v pořadí. Zde je hrubý náčrt, který jsem udělal před napsáním jakéhokoli kódu:

Pokud přemýšlíte, proč si dělat starosti s plánováním, podívejte se na tyto nejhorší chyby v programování v historii. Tento projekt nikoho nezabije, ale před prací na větším kódu je zásadní dobře porozumět kódu a postupům plánování - i když je to jen hrubý náčrt.

Zde je počáteční HTML, které potřebujete, abyste mohli začít. Uložte to do souboru s příslušným názvem, například index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Zde vypadá kód:

Je to trochu nesmysl, že? Pojďme to rozebrat, než to vylepšíme.

Tento kód obsahuje 'standardní' HTML , hlava , styl , skript , a tělo tagy. Tyto části jsou nezbytnou součástí jakékoli webové stránky. JQuery je zahrnut prostřednictvím Google CDN - zatím nic jedinečného ani zvláštního.

Uvnitř těla je div s id showContainer . Toto je obal nebo vnější kontejner pro uložení prezentace. Později to zlepšíte pomocí CSS. Uvnitř tohoto kontejneru jsou tři bloky kódu, každý s podobným účelem.

Nadřazená třída je definována názvem třídy imageContainer :

Slouží k uložení jednoho snímku - uvnitř tohoto kontejneru je uložen obrázek a popisek. Každý kontejner má jedinečné ID, které se skládá ze znaků v_ a číslo. Každý kontejner má jiné číslo, od jednoho do tří.

Jako poslední krok se odkazuje na obrázek a titulek se uloží do souboru div s příponou titulek třída:

Dog

Vytvořil jsem své obrázky s číselnými názvy souborů a uložil je do složky s názvem snímky . Můžete si říkat, co chcete, za předpokladu, že aktualizujete HTML tak, aby odpovídalo.

Pokud chcete mít v prezentaci více nebo méně obrázků, jednoduše zkopírujte a vložte nebo odstraňte bloky kódu pomocí imageContainer třídy, nezapomeňte podle potřeby aktualizovat názvy souborů a ID.

Nakonec jsou vytvořena navigační tlačítka. Ty umožňují uživateli procházet obrázky:

 ❮  
 ❯

Tyto HTML entita kódy se používají k zobrazení šipek vpřed a vzad, podobně jako fungují písma ikon.

2. CSS

Nyní, když je základní struktura na svém místě, je načase, aby vypadala pěkný . Jak to bude vypadat po tomto novém kódu:

Přidejte tento CSS mezi své styl tagy:

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

Vypadá to teď mnohem lépe, že? Pojďme se podívat na kód.

Používám ukázkové obrázky, které jsou všechny 670 x 503 pixelů , takže tato prezentace byla většinou navržena kolem obrázků této velikosti. Pokud chcete použít obrázky jiné velikosti, budete muset CSS vhodně upravit. Doporučuji změnit velikost obrázků na odpovídající velikosti - různé obrázky různých rozměrů způsobí problémy se stylem.

Většina tohoto CSS je samozřejmé. Existuje kód, který definuje velikost kontejneru pro ukládání obrázků, zarovnání na střed, určení písma, barvu tlačítka a textu. Existuje několik stylů, se kterými jste se možná dosud nesetkali:

kurzor: ukazatel - Při přesunu kurzoru nad tlačítka se kurzor změní ze šipky na ukazující prst.
krytí: 0,65 - To zvyšuje průhlednost tlačítek.
uživatelský výběr: žádný - Tím je zajištěno, že nemůžete omylem zvýraznit text na tlačítkách.

Výsledek většiny tohoto kódu můžete vidět v tlačítkách:

Nejsložitější částí je tato podivně vypadající linie:

.imageContainer:not(:first-child) {

Může to vypadat docela neobvykle, ale je to docela samozřejmé.

Nejprve zacílí na všechny prvky pomocí imageContainer třída. The :ne() syntaxe uvádí, že všechny prvky v závorkách by měly být vyloučeno z tohoto stylu. Nakonec, :první dítě syntax uvádí, že tento CSS by měl cílit na jakýkoli prvek odpovídající názvu ale ignorovat první prvek. Důvod je jednoduchý. Protože se jedná o prezentaci, je vyžadován vždy pouze jeden obrázek. Tento CSS skrývá všechny obrázky kromě prvního.

3. JavaScript

Poslední část skládačky je JavaScript. To je logika, aby prezentace fungovala správně.

Přidejte tento kód do svého skript štítek:

$(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 se to zdát neintuitivní, ale přeskočím počáteční bloky kódu a přeskočím rovnou k vysvětlení kódu od poloviny-nebojte se, vysvětlím celý kód!

Musíte definovat dvě proměnné. (Zde je návod, jak definovat proměnné v JavaScriptu.) Tyto proměnné lze považovat za hlavní konfigurační proměnné prezentace:

var currentImage = 1;  
var totalImages = 3;

Ty ukládají celkový počet obrázků v prezentaci a číslo obrázku, od kterého se má začít. Pokud máte více obrázků, jednoduše změňte totalImages proměnná na celkový počet obrázků, které máte.

Dvě funkce zvětšitObrázek a zmenšitObrázek postoupit nebo ustoupit currentImage proměnná. Pokud by tato proměnná byla nižší než jedna nebo vyšší než totalImages , resetuje se na jednu nebo totalImages . Tím je zajištěno, že se prezentace bude opakovat, jakmile dosáhne konce.

Zpět ke kódu na začátku. Tento kód „cílí“ na další a předchozí tlačítka. Když kliknete na každé tlačítko, vyvolá příslušné zvýšit nebo pokles metody. Po dokončení jednoduše zmizí obraz na obrazovce a zmizí v novém obrázku (podle definice currentImage proměnná).

The stop() metoda je integrována do jQuery. Tím se ruší všechny čekající události. Tím je zajištěno, že každé stisknutí tlačítka je plynulé, a znamená to, že nemáte 100 stisknutí všech tlačítek, která čekají na spuštění, pokud se na myši trochu zblázníte. The fadeIn (1) a fadeOut (1) metody podle potřeby obrázky mizí nebo mizí. Číslo určuje dobu prolínání v milisekundách. Zkuste to změnit na větší číslo, například 500. Čím větší číslo, tím delší doba přechodu. Jděte však příliš daleko a můžete začít pozorovat podivné události nebo „blikání“ mezi změnami obrazu. Zde je prezentace v akci:

Automatický postup

Tato prezentace nyní vypadá docela dobře, ale je zapotřebí ještě poslední dotek. Automatické vylepšení je funkce, díky které bude tato prezentace opravdu zářit. Po uplynutí nastaveného časového období každý obrázek automaticky přejde na další. Uživatel se však může stále pohybovat dopředu nebo dozadu.

jak zmenšit soubor jpeg

S jQuery je to snadná práce. Ke spuštění kódu je třeba vytvořit časovač X sekundy. Spíše než psát nový kód je však nejjednodušší emulovat „kliknutí“ na tlačítko dalšího obrázku a veškerou práci nechat provést stávající kód.

Zde je nový JavaScript, který potřebujete - přidejte ho po zmenšitObrázek funkce:

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

Tady se toho moc neděje. The window.setInterval metoda bude spouštět kus kódu pravidelně, jak je definováno časem uvedeným na konci. Čas 2 500 (v milisekundách) znamená, že tato prezentace bude postupovat každých 2,5 sekundy. Menší číslo znamená, že každý obrázek bude postupovat rychlejším tempem. The klikněte metoda spouští tlačítka ke spuštění kódu, jako kdyby uživatel na tlačítko klikl myší.

Pokud jste připraveni na další výzvu JavaScriptu, zkuste vytvořit web pomocí statického nástroje pro tvorbu webových stránek, jako je GatsbyJS, nebo rozhraní front-end jako Vue. Pokud jste studentem Ruby, Jekyll je také možnost. Zde je návod, jak si proti sobě stojí Jekyll a GatsbyJS.

Uznání: Tharanat Sardsri přes Shutterstock.com

Podíl Podíl tweet E-mailem 8 nejlepších webových stránek ke stažení audioknih zdarma

Audioknihy jsou skvělým zdrojem zábavy a mnohem snáze stravitelné. Zde je osm nejlepších webových stránek, kde si je můžete zdarma stáhnout.

Číst dále Související témata

Programování
JavaScript
Webový design

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

Joe je absolventem informatiky na University of Lincoln, UK. Je profesionálním vývojářem softwaru, a když zrovna neletí drony nebo nepíše hudbu, často ho lze zastihnout při fotografování nebo produkci videí.

Více od Joe Coburn

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru