Kako izgraditi JavaScript SlideShow u 3 jednostavna koraka

Oglas

Ako ste pročitali naš vodič na kako napraviti web stranicu, možda se pitate što poduzeti sljedeće kako biste poboljšali svoje vještine. Izrada prezentacije fotografija je iznenađujuće lak zadatak i onaj koji vas može naučiti vrijedne vještine potrebne za posao programiranja.

Danas ću vam pokazati kako iz temelja napraviti JavaScript prezentaciju. Uđite!

Preduvjeti

Morat ćete znati nekoliko stvari prije nego što započnete s kodiranjem. Pored odgovarajućeg web preglednika i uređivača teksta po vašem izboru (preporučujem Uzvišeni tekst), trebat će vam neko iskustvo sa HTML, CSS, JavaScript, i jQuery.

Ako niste toliko sigurni u svoje vještine, pročitajte naš vodič za pomoću modela objekta dokumenta JavaScript i web razvoj: Korištenje modela objekta dokumentaOvaj će vam članak predstaviti kostur dokumenta s kojim radi JavaScript. Poznavajući rad ovog apstraktnog modela objekta dokumenta, možete napisati JavaScript koji radi na bilo kojoj web stranici. Čitaj više i ove savjeti za učenje CSS-a

5 bebi koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjakCSS je najvažnija promjena web stranica u posljednjem desetljeću, a utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu ... Čitaj više . Ako ste sigurni u JavaScript, ali nikad prije niste koristili jQuery, pogledajte naš osnovni vodič za jQuery Osnovni vodič za JQuery za programere JavascriptAko ste Javascript programer, ovaj će vam vodič za JQuery pomoći da započnete kodiranje poput nindže. Čitaj više .

1. Početak rada

Ovaj slajd show zahtijeva nekoliko značajki:

1. Podrška za slike
2. Kontrole za promjenu slike
3. Opis teksta
4. Automatski način rada

Čini se jednostavan popis značajki. Automatski način rada automatski prebacuje slike na sljedeću u nizu. Evo grube skice koju sam učinio prije pisanja bilo kojeg koda:

Ako se pitate zašto gnjaviti planiranje, pogledajte ove najgore programske pogreške u povijesti 10 najgorih grešaka u programiranju u povijestiU svojoj povijesnoj prošlosti kodirao je i uništenje od kovanih metala. Primjeri malo lošeg koda uzrokovali su katastrofu na velikoj razini. Slijedi 10 najgorih programskih grešaka u povijesti. Čitaj više . Ovim projektom nikoga neće ubiti, no prije rada na većem kodu prijeko je dobro razumjeti kod i postupke planiranja - čak i ako je samo gruba skica.

Evo početnog HTML-a koji vam je potreban da biste započeli. Spremite to u datoteku s odgovarajućim nazivom, kao što je index.html:

 Vjetrenjača 


 Biljka 


 Pas 

❮
❯

Evo kako izgleda kôd:

Malo je to smeće, zar ne? Rastavimo ga prije nego što ga poboljšamo.

Ovaj kôd sadrži "standardno" HTML, glava, stil, skripta, i tijelo oznake. Ovi su dijelovi bitni dijelovi bilo kojeg web mjesta. jQuery je uključen putem Googlea CDN - ništa jedinstveno ili posebno do sada.

Unutar tijela je div s idom showContainer. Ovo je omotač ili vanjski spremnik za pohranu prezentacije. Kasnije ćete to poboljšati pomoću CSS-a. Unutar ovog spremnika nalaze se tri bloka koda, svaki sa sličnom svrhom.

Roditeljska klasa definirana je s nazivom klase imageContainer:

Koristi se za pohranjivanje jednog slajda - unutar ovog spremnika pohranjuju se slika i naslov. Svaki spremnik ima jedinstveni id, koji se sastoji od znakova im_ i broj. Svaki spremnik ima različit broj, od jedan do tri.

Kao posljednji korak navodi se slika, a opis sprema u div s naslov klasa:

 Pas. 

Stvorio sam svoje slike s numeričkim imenima datoteka i spremio ih u mapu nazvanu slike. Možete nazvati svoje što god želite ako ažurirate HTML da odgovara.

Ako želite da u prezentaciji želite imati više ili manje slika, jednostavno kopirajte i zalijepite ili izbrišite blokove koda s imageContainer klase, pamteći da ažurirate imena datoteka i ID-ove prema potrebi.

Na kraju su stvoreni navigacijski gumbi. Omogućuju korisniku da se kreće kroz slike:

❮
❯

To HTML entitet kodovi se koriste za prikaz strelica prema naprijed i nazad na sličan način kako rade fontovi ikona Fontovi ikona su fantastični za vašu web lokaciju: Evo zaštoDanas ću vam pokazati što su fontovi ikona i kako ih možete upotrijebiti za oživljavanje vaše web stranice. Čitaj više .

2. CSS

Sad kad je jezgra na mjestu, vrijeme je da izgledaju prilično. Evo kako će izgledati nakon ovog novog koda:

Dodajte ovaj CSS između svog stil oznake:

html {obitelj fontova: helvetica, arial; } #showContainer {/ * Glavni omotač za sve slike * / širina: 670px; obloga: 0; marža: 0 auto; preljev: skriven; položaj: relativan; } .navButton {/ * Neka gumbi izgledaju lijepo * / pokazivač: pokazivač; plovak: lijevo; širina: 25px; visina: 22px; padding: 10px; margina-desno: 5px; preljev: skriven; poravnavanje teksta: središte; boja: bijela; težina slova: podebljano; veličina fonta: 18px; pozadina: # 000000; neprozirnost: 0,65; odabir korisnika: nijedan; } .navButton: zadržite pokazivač {neprozirnost: 1; } .zapis {float: desno; } .imageContainer: nije (: prvo dijete) {/ * Sakrij sve slike osim prvog * / zaslon: nijedan; }

To sada izgleda mnogo bolje, zar ne? Pogledajmo kôd.

Koristim uzorke slika koje su sve 670 x 503 piksela, tako da je ovaj prezentacijski prikaz uglavnom dizajniran oko slika te veličine. Ako želite koristiti slike druge veličine, morat ćete na odgovarajući način prilagoditi CSS. Preporučam da promijenite veličinu slika na odgovarajuće veličine - različite slike različitih dimenzija uzrokovat će probleme sa stiliziranjem.

Najviše ovog CSS-a samo po sebi objašnjava. Postoji kôd za određivanje veličine spremnika za pohranu slika, centriranje svega, određivanje fonta, zajedno s gumbom i bojom teksta. Postoji nekoliko stilova u kojima možda niste naišli prije:

1. pokazivač: pokazivač - Ovo mijenja pokazivač iz strelice u pokazivački prst kada pomaknete pokazivač preko gumba.
2. neprozirnost: 0,65 - To povećava transparentnost gumba.
3. odabir korisnika: nijedan - To osigurava da ne možete slučajno istaknuti tekst na gumbima.

Rezultat većine ovog koda možete vidjeti na gumbima:

Ovdje je najkompleksniji dio ove čudne linije:

.imageContainer: nije (: prvo dijete) {

To može izgledati prilično neobično, no prilično se objašnjava.

Prvo, cilja sve elemente s imageContainer klase. :ne() sintaksa kaže da bi trebali biti elementi u zagradama isključen iz ovog stila. Napokon : Prvo dijete sintaksa kaže da ovaj CSS treba ciljati bilo koji element koji odgovara imenu ali zanemarite prvi element. Razlog za to je jednostavan. Budući da je ovo prezentacija, potrebna je samo jedna slika odjednom. Ovaj CSS sakriva sve slike, osim prve.

3. JavaScript

Posljednji dio slagalice je JavaScript. To je logika da zapravo prezentacija ispravno funkcionira.

Dodajte ovaj kôd u svoj skripta označiti:

$ (dokument) .ready (funkcija () {$ ('# prethodna'). on ('klik', funkcija () {// Promjena na prethodnu sliku $ ('# im_' + currentImage). stop (). fadeOut (1); decreaseImage (); $ ('# im_' + currentImage). stop (). fadeIn (1); }); $ ('# next'). on ('klik', funkcija () {// Promjena na sljedeću sliku $ ('# im_' + currentImage). stop (). fadeOut (1); increaseImage (); $ ('# im_' + currentImage). stop (). fadeIn (1); }); var currentImage = 1; var totalImages = 3; funkcija povećanjeImage () {/ * Povećaj currentImage za 1. * Resetira se na 1 ako je veći od totalImages * / ++ currentImage; ako je (currentImage> totalImages) {currentImage = 1; }} funkcija smanjenjeImage () {/ * Smanji struju slike za 1. * Resetira se na totalImages ako je manji od 1 * / --currentImage; ako je (currentImage <1) {currentImage = totalImages; } } });

Možda se čini kontrainduktivno, ali preskočit ću početne blokove koda i skoknuti ravno na objašnjenje koda s pola puta - ne brinite, objasnjavam sav kôd!

Trebate definirati dvije varijable. (Evo kako definirati varijable u JavaScript-u.) Ove se varijable mogu smatrati glavnim varijablama konfiguracije za prezentaciju:

var currentImage = 1; var totalImages = 3;

One pohranjuju ukupni broj slika u prezentaciji i broj slike za početak. Ako imate više slika, jednostavno ih promijenite totalImages promjenjiva na ukupni broj slika koje imate.

Dvije funkcije increaseImage i decreaseImage napredovanje ili povlačenje currentImage promjenjiva. Ako ova varijabla mora biti niža od jedne, ili veća od totalImages, vraća se na jedan ili totalImages. To osigurava da će se prezentacija petljati nakon što dođe do kraja.

Natrag na kod. Ovaj kôd "cilja" sljedeće i prethodne tipke. Kada kliknete na svaki gumb, zove se odgovarajuće povećati ili smanjenje metode. Kada je gotov, sliku jednostavno blijedi na ekranu i blijedi u novoj slici (kako je definirano s currentImage varijable).

Stop() metoda je ugrađena u jQuery. To otkazuje sve događaje u tijeku. Ovo osigurava da je svaki pritisak gumba glatki, i znači da nemate 100 pritiska na tipke koje biste čekali da se izvrše ako poludite za mišom. fadeIn (1) i fadeOut (1) metode izblijediti ili ukloniti slike po potrebi. Brojka označava trajanje izblijedjenja u milisekundama. Pokušajte to promijeniti na veći broj, poput 500. Veći broj rezultira dužim prijelaznim vremenom. Prelazite predaleko i možda ćete početi vidjeti čudne događaje ili „treperenja“ između promjena slike. Slijedi prezentacija u akciji:

Automatsko napredovanje

Ovaj prezentacijski izgled sada izgleda prilično dobro, ali potreban je posljednji završni dodir. Automatsko napredovanje značajka je koja će ovaj slajd show zaista zasjati. Nakon određenog vremenskog razdoblja, svaka slika automatski prelazi na sljedeću. Ipak korisnik može kretati prema naprijed ili natrag.

Ovo je lak posao s jQueryjem. Treba stvoriti tajmer da bi se svaki kôd izvršio x sekundi. Umjesto da napišete novi kôd, najlakše je učiniti oponašati klik na sljedeću sliku i pustiti postojeći kod da radi sve.

Evo novog JavaScripta koji vam treba - dodajte to nakon decreaseImage funkcija:

window.setInterval (funkcija () {$ ('# prethodna'). click (); }, 2500);

Ovdje se ne događa puno window.setInterval metoda će redovno pokrenuti dio koda, što je definirano vremenom navedenim na kraju. Vrijeme 2500 (u milisekundama) znači da će se ovaj prezentacijski prikaz odvijati svakih 2,5 sekunde. Manji broj znači da će svaka slika brže napredovati. klik metoda pokreće gumbe za pokretanje koda kao da je korisnik kliknuo gumb mišem.

Ako ste spremni za sljedeći JavaScript izazov, pokušajte izgraditi web mjesto sa statičkim graditeljem web mjesta poput GatsbyJS. Ako ste Ruby učenik, Jekyll je također opcija. Evo kako su Jekyll i GatsbyJS jedni protiv drugih Jekyll vs. GatsbyJS: Koji statički graditelj web stranica gradi najbolju web stranicu?Trebate web mjesto bez dinamike temeljene na bazi podataka? Upotrijebite statički graditelj web stranica poput Jekyll ili GatsbyJS kako biste stvari pojednostavili. Čitaj više .

Kreditna slika: Tharanat Sardsri putem Shutterstock.com