Kako sestaviti diaprojekcijo JavaScript v 3 preprostih korakih

Če ste prebrali naš vodnik kako narediti spletno stran , se morda sprašujete, kaj morate narediti, da izboljšate svoje sposobnosti. Izdelava diaprojekcije s fotografijami je presenetljivo lahka naloga, ki vas lahko nauči dragocenih veščin, potrebnih za delo pri programiranju.

Danes vam bom pokazal, kako ustvariti diaprojekcijo JavaScript iz nič. Skočimo takoj!

Predpogoji

Preden začnete s kodiranjem, morate vedeti nekaj stvari. Poleg ustreznega spletnega brskalnika in urejevalnika besedil po vaši izbiri (priporočam Vrhunsko besedilo ), potrebovali boste nekaj izkušenj HTML , CSS , JavaScript , in jQuery .

Če niste prepričani v svoje sposobnosti, preberite naš vodnik po uporabi Objektnega modela dokumenta in te nasvete za učenje CSS. Če ste prepričani v JavaScript, vendar še nikoli niste uporabljali jQuery, si oglejte naš osnovni vodnik po jQuery.

1. Začetek

Ta diaprojekcija zahteva več funkcij:

Podpora za slike
Nadzor za spreminjanje slik
Naslov besedila
Samodejni način

Zdi se preprost seznam funkcij. Samodejni način bo samodejno pomaknil slike na naslednjo v zaporedju. Tukaj je groba skica, ki sem jo naredil, preden sem napisal kodo:

Če se sprašujete, zakaj se trudite načrtovati, si oglejte te najhujše programske napake v zgodovini. Ta projekt ne bo ubil nikogar, ključno pa je, da dobro razumete kodo in postopke načrtovanja, preden delate na večji kodi - tudi če gre le za grobo skico.

Tukaj je začetni HTML, ki ga potrebujete za začetek. To shranite v datoteko z ustreznim imenom, na primer index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Tako izgleda koda:

To je malo smeti, kajne? Razčlenimo jo, preden jo izboljšamo.

Ta koda vsebuje 'standard' HTML , glavo , slog , skript , in telo oznake. Ti deli so bistveni sestavni deli vsakega spletnega mesta. JQuery je vključen prek Googlovega CDN -a - zaenkrat nič posebnega ali posebnega.

V notranjosti telesa je div z ID -jem showContainer . To je ovoj ali zunanji vsebnik za shranjevanje diaprojekcije. To boste kasneje izboljšali s CSS. Znotraj tega vsebnika so trije bloki kode, od katerih ima vsak podoben namen.

Nadrejeni razred je definiran z imenom razreda imageContainer :

To se uporablja za shranjevanje enega diapozitiva - slika in napis sta shranjena v tem vsebniku. Vsak vsebnik ima edinstven ID, sestavljen iz znakov v_ in številko. Vsaka posoda ima drugačno število, od enega do treh.

Kot zadnji korak se sklicuje na sliko, napis pa se shrani v div z oznako napis razred:

Dog

Ustvaril sem slike s številčnimi imeni datotek in jih shranil v mapo z imenom Slike . Svojega lahko pokličete karkoli želite, če posodobite HTML tako, da se ujema.

Če želite v diaprojekciji imeti več ali manj slik, preprosto kopirajte in prilepite ali izbrišite bloke kode z imageContainer razred, ne pozabite posodobiti imen datotek in ID -jev po potrebi.

Končno so ustvarjeni navigacijski gumbi. Ti uporabniku omogočajo krmarjenje po slikah:

 ❮  
 ❯

Te Entiteta HTML kode se uporabljajo za prikaz puščic naprej in nazaj, na podoben način, kot delujejo pisave ikon.

2. CSS

Zdaj, ko je jedrna struktura postavljena, je čas, da jo pogledamo lepa . Tako bo videti po tej novi kodi:

Dodajte ta CSS med svoje slog oznake:

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

To zdaj izgleda veliko bolje, kajne? Oglejmo si kodo.

Uporabljam vse vzorčne slike 670 x 503 slikovnih pik , zato je bila ta diaprojekcija večinoma zasnovana okoli slik te velikosti. CSS boste morali ustrezno prilagoditi, če želite uporabiti slike drugačne velikosti. Priporočam, da spremenite velikost slik na ustrezne velikosti - različne slike različnih dimenzij bodo povzročile težave pri oblikovanju.

Večina tega CSS je samoumevno. Obstaja koda, ki določa velikost vsebnika za shranjevanje slik, poravna vse po sredini, določi pisavo, skupaj z gumbom in barvo besedila. Obstaja nekaj stilov, na katere morda še niste naleteli:

kazalec: kazalec - S tem premaknete kazalec iz puščice v kazalni prst, ko premaknete kazalec nad gumbe.
motnost: 0,65 - To poveča preglednost gumbov.
uporabniški izbor: nič - To zagotavlja, da ne morete pomotoma označiti besedila na gumbih.

Rezultat večine te kode si lahko ogledate v gumbih:

Najbolj zapleten del tukaj je ta čudno videti linija:

.imageContainer:not(:first-child) {

Morda je videti precej nenavadno, vendar je precej samoumevno.

Najprej cilja na vse elemente z imageContainer razred. The : ne () sintaksa navaja, da morajo biti vsi elementi v oklepajih izključeno iz tega sloga. Končno, : prvorojenček sintaksa navaja, da bi moral ta CSS ciljati na kateri koli element, ki se ujema z imenom ampak prezreti prvega elementa. Razlog za to je preprost. Ker je to diaprojekcija, je potrebna le ena slika naenkrat. Ta CSS skrije vse slike razen prve.

3. JavaScript

Zadnji del sestavljanke je JavaScript. To je logika pravilnega delovanja diaprojekcije.

To kodo dodajte v svojo skript oznaka:

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

Morda se zdi ne-intuitivno, vendar bom preskočil začetne bloke kode in skočil k razlagi kode od polovice-ne skrbite, razložim vso kodo!

Določiti morate dve spremenljivki. (Evo, kako določiti spremenljivke v JavaScript.) Te spremenljivke lahko razumemo kot glavne konfiguracijske spremenljivke za diaprojekcijo:

var currentImage = 1;  
var totalImages = 3;

Ti shranijo skupno število slik v diaprojekciji in številko slike za začetek. Če imate več slik, preprosto spremenite skupne slike spremenljivo na skupno število slik, ki jih imate.

Dve funkciji povečaj sliko in zmanjšanje slike napredovati ali se umakniti currentImage spremenljivka. Če naj bo ta spremenljivka nižja od enega ali višja od skupne slike , se ponastavi na eno oz skupne slike . To zagotavlja, da se diaprojekcija vrti, ko pride do konca.

Nazaj na kodo na začetku. Ta koda 'cilja' na naslednje in prejšnje gumbe. Ko kliknete vsak gumb, pokliče ustrezen porast ali zmanjšati metode. Ko je dokončana, preprosto zbledi slika na zaslonu in zbledi na novi sliki (kot jo definira currentImage spremenljivo).

The stop () metoda je vgrajena v jQuery. S tem prekličete vse nerešene dogodke. To zagotavlja, da je vsak pritisk na gumb nemoten, in pomeni, da nimate 100 pritiskov na vse gumbe, ki čakajo na izvedbo, če se nekoliko pomahnita za miško. The fadeIn (1) in fadeOut (1) metode po potrebi pomanjšajo ali pomanjšajo slike. Število določa trajanje zbledenja v milisekundah. Poskusite to spremeniti na večje število, na primer 500. Večje število povzroči daljši čas prehoda. Vendar pojdite predaleč in med spremembami slike boste morda začeli opažati čudne dogodke ali 'utripanje'. Tukaj je diaprojekcija v akciji:

Samodejno napredovanje

Ta diaprojekcija je zdaj videti precej dobro, vendar je potreben še zadnji zaključek. Samodejni napredek je funkcija, zaradi katere bo ta diaprojekcija resnično zasijala. Po določenem času bo vsaka slika samodejno prešla na naslednjo. Uporabnik se lahko kljub temu pomika naprej ali nazaj.

je kindle neomejeno vredno?

To je enostavno delo z jQuery. Za vsako izvedbo kode je treba ustvariti časovnik X sekunde. Namesto pisanja nove kode je najlažje posnemati 'klik' na gumb za naslednjo sliko in pustiti, da obstoječa koda opravi vse delo.

Tukaj je nov JavaScript, ki ga potrebujete - dodajte ga po zmanjšanje slike funkcija:

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

Tu se ne dogaja veliko. The window.setInterval method bo redno izvajala del kode, kot je določeno s časom, navedenim na koncu. Čas 2500 (v milisekundah) pomeni, da se bo ta diaprojekcija premikala vsakih 2,5 sekunde. Manjša številka pomeni, da bo vsaka slika napredovala hitreje. The kliknite method sproži gumbe za izvajanje kode, kot da bi uporabnik gumb pritisnil z miško.

Če ste pripravljeni na naslednji izziv JavaScript, poskusite zgraditi spletno mesto s statičnim graditeljem spletnih mest, kot je GatsbyJS, ali vmesnim okvirom, kot je Vue. Če ste učenec Rubyja, je možnost tudi Jekyll. Evo, kako se Jekyll in GatsbyJS spopadata.

Zasluge za sliko: Tharanat Sardsri prek Shutterstock.com

Deliti Deliti Cvrkutati E-naslov 8 najboljših spletnih mest za brezplačen prenos zvočnih knjig

Zvočne knjige so odličen vir zabave in so veliko lažje prebavljive. Tu je osem najboljših spletnih mest, kjer jih lahko brezplačno prenesete.

Preberite Naprej Sorodne teme

Programiranje
JavaScript
Oblikovanje spletnih strani

O avtorju Joe Coburn(136 objavljenih člankov)

Joe je diplomiral iz računalništva na Univerzi v Lincolnu v Veliki Britaniji. Je poklicni razvijalec programske opreme in kadar ne leti z brezpilotnimi letali ali ne piše glasbe, ga pogosto najdejo pri fotografiranju ali ustvarjanju videoposnetkov.

Več od Joea Coburna

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite