JavaScript -diaesityksen luominen 3 helpolla askeleella

Jos olet lukenut oppaamme kuinka tehdä verkkosivusto , saatat miettiä, mitä tehdä seuraavaksi parantaaksesi taitojasi. Kuvaesityksen tekeminen on yllättävän helppo tehtävä, ja se voi opettaa sinulle arvokkaita taitoja, joita tarvitaan ohjelmointityön saamiseen.

Tänään näytän sinulle, kuinka rakentaa JavaScript -diaesitys tyhjästä. Hyppäämme suoraan!

Edellytykset

Sinun on tiedettävä muutama asia, ennen kuin voit aloittaa koodauksen. Sopivan verkkoselaimen ja valitsemasi tekstieditorin rinnalla (suosittelen Ylellinen teksti ), tarvitset kokemusta HTML , CSS , JavaScript ja jQuery .

Jos et ole niin varma taidoistasi, muista lukea oppaamme asiakirjaobjektimallin käytöstä ja nämä vinkit CSS: n oppimiseen. Jos olet luottavainen JavaScriptin kanssa, mutta et ole koskaan käyttänyt jQueryä aiemmin, tutustu jQueryn perusoppaaseemme.

1. Aloittaminen

Tämä diaesitys vaatii useita ominaisuuksia:

Tuki kuville
Kuvanvaihtosäätimet
Tekstiteksti
Automaattinen tila

Se näyttää yksinkertaiselta ominaisuuksien luettelolta. Automaattinen tila siirtää kuvat automaattisesti seuraavaan sarjaan. Tässä on karkea luonnos, jonka tein ennen minkään koodin kirjoittamista:

Jos mietit, miksi vaivautua suunnitteluun, katso sitten näitä historian pahimpia ohjelmointivirheitä. Tämä projekti ei tapa ketään, mutta on erittäin tärkeää, että ymmärrät koodin ja suunnittelumenettelyt ennen kuin käsittelet isompaa koodia - vaikka se olisi vain karkea luonnos.

Tässä on aluksi tarvittava HTML -koodi. Tallenna tämä tiedostoon, jolla on sopiva nimi, kuten index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Tältä koodi näyttää:

Eikö ole vähän roskaa? Hajotetaan se ennen kuin parannamme sitä.

Tämä koodi sisältää standardin HTML , pää , tyyli , käsikirjoitus ja vartalo tunnisteita. Nämä osat ovat olennainen osa mitä tahansa verkkosivustoa. JQuery sisältyy Googlen CDN: n kautta - mitään ainutlaatuista tai erikoista tähän mennessä.

Kehon sisällä on div, jonka tunnus on showContainer . Tämä on kääre tai ulompi säiliö diaesityksen tallentamiseksi. Parannat tätä myöhemmin CSS: llä. Tämän säiliön sisällä on kolme koodilohkoa, joista jokaisella on sama tarkoitus.

Pääluokka määritellään luokan nimellä imageContainer :

Tätä käytetään yksittäisen dian tallentamiseen - kuva ja kuvateksti tallennetaan tähän säiliöön. Jokaisella säilöllä on yksilöllinen tunnus, joka koostuu merkeistä in_ ja numero. Jokaisella säiliöllä on eri numero yhdestä kolmeen.

Viimeisenä vaiheena kuvaan viitataan ja kuvateksti tallennetaan divin sisälle kuvateksti luokka:

Dog

Olen luonut kuvat numeerisilla tiedostonimillä ja tallentanut ne kansioon nimeltä Kuvat . Voit kutsua omasi haluamallasi tavalla, jos päivität HTML -koodin vastaamaan sitä.

Jos haluat diaesityksessäsi olevan enemmän tai vähemmän kuvia, kopioi ja liitä tai poista koodilohko imageContainer luokka, muista päivittää tiedostonimet ja tunnukset tarpeen mukaan.

Lopuksi luodaan navigointipainikkeet. Näiden avulla käyttäjä voi selata kuvia:

 ❮  
 ❯

Nämä HTML -entiteetti koodeja käytetään eteen- ja taaksepäin osoittavien nuolien näyttämiseen samalla tavalla kuin kuvakefonttien toiminta.

2. CSS

Nyt kun ydinrakenne on paikallaan, on aika saada se näyttämään nätti . Tältä se näyttää tämän uuden koodin jälkeen:

Lisää tämä CSS välilehtesi väliin tyyli tunnisteet:

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

Näyttääkö se nyt paljon paremmalta? Katsotaanpa koodia.

Käytän esimerkkikuvia, jotka ovat kaikki 670 x 503 pikseliä , joten tämä diaesitys on enimmäkseen suunniteltu tämän kokoisten kuvien ympärille. Sinun on säädettävä CSS -tiedosto oikein, jos haluat käyttää erikokoisia kuvia. Suosittelen, että muutat kuvasi vastaaviin kokoihin - eri kokoiset kuvat aiheuttavat muotoiluongelmia.

Suurin osa Tämä CSS on itsestään selvä. Siellä on koodi, joka määrittää säiliön koon kuvien tallentamista varten, keskittää kaiken keskelle, määrittää fontin sekä painikkeen ja tekstin värin. On olemassa muutamia tyylejä, joihin et ehkä ole törmännyt aiemmin:

kohdistin: osoitin - Tämä muuttaa kohdistimen nuolesta osoittavaksi sormeksi, kun siirrät kohdistimen painikkeiden päälle.
opasiteetti: 0,65 - Tämä lisää painikkeiden läpinäkyvyyttä.
user-select: ei mitään - Tämä varmistaa, ettet voi vahingossa korostaa painikkeiden tekstiä.

Näet suurimman osan koodista tuloksen painikkeista:

Monimutkaisin osa tässä on tämä outo näköinen rivi:

.imageContainer:not(:first-child) {

Se voi näyttää melko epätavalliselta, mutta se on melko itsestään selvää.

Ensinnäkin se kohdistaa kaikki elementit imageContainer luokka. The :ei() syntaksi sanoo, että kaikkien hakasulkeiden sisällä olevien elementtien tulee olla ulkopuolelle tästä tyylistä. Lopuksi, :ensimmäinen lapsi syntaksi sanoo, että tämän CSS: n tulisi kohdistaa mihin tahansa nimeä vastaavaan elementtiin mutta jätä ensimmäinen elementti huomiotta. Syy tähän on yksinkertainen. Koska tämä on diaesitys, vaaditaan vain yksi kuva kerrallaan. Tämä CSS piilottaa kaikki kuvat ensimmäistä lukuun ottamatta.

3. JavaScript

Palapelin viimeinen osa on JavaScript. Tämä on logiikka, jolla diaesitys toimii oikein.

Lisää tämä koodi käsikirjoitus tag:

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

Se voi vaikuttaa intuitiiviselta, mutta aion ohittaa koodin ensimmäiset lohkot ja hypätä suoraan selittämään koodin puolivälistä-älä huoli, selitän koko koodin!

Sinun on määritettävä kaksi muuttujaa. (Näin määrität muuttujat JavaScriptissä.) Näitä muuttujia voidaan pitää diaesityksen tärkeimpinä kokoonpanomuuttujina:

var currentImage = 1;  
var totalImages = 3;

Nämä tallentavat diaesityksen kuvien kokonaismäärän ja aloitettavan kuvan määrän. Jos sinulla on enemmän kuvia, muuta vain totalImages muuttuva kuvien kokonaismäärään.

Kaksi toimintoa kuva ja kuva eteenpäin tai perääntyä currentImage muuttuja. Pitäisikö tämän muuttujan laskea alle yhden tai korkeammaksi kuin totalImages , se palautetaan yhdeksi tai totalImages . Tämä varmistaa, että diaesitys toistuu loppuun asti.

Palaa koodin alkuun. Tämä koodi 'kohdistaa' seuraavan ja edellisen painikkeen. Kun napsautat kutakin painiketta, se kutsuu sopivaa lisääntyä tai väheneminen menetelmiä. Kun se on valmis, se yksinkertaisesti häivyttää näytön kuvan ja häivyttää uuden kuvan (kuten currentImage muuttuja).

The lopettaa() menetelmä on rakennettu jQueryyn. Tämä peruuttaa kaikki odottavat tapahtumat. Tämä varmistaa, että jokainen painikkeen painallus on sujuvaa, eikä sinulla ole 100 painikkeen painallusta, jotka odottavat suoritusta, jos hiukan hiiput. The fadeIn (1) ja fadeOut (1) menetelmät häivyttävät tai poistavat kuvia tarpeen mukaan. Luku määrittää häipymisen keston millisekunteina. Yritä muuttaa tämä suuremmalle numerolle, kuten 500. Suurempi luku johtaa pidempään siirtymäaikaan. Mene kuitenkin liian pitkälle ja saatat alkaa nähdä outoja tapahtumia tai 'välkkymiä' kuvanmuutosten välillä. Tässä diaesitys toiminnassa:

Automaattinen eteneminen

Tämä diaesitys näyttää nyt hyvältä, mutta viimeinen viimeistely tarvitaan. Automaattinen siirtyminen on ominaisuus, joka todella tekee tästä diaesityksestä loistavan. Määritetyn ajan kuluttua jokainen kuva siirtyy automaattisesti seuraavaan kuvaan. Käyttäjä voi silti navigoida eteen- tai taaksepäin.

joka etsii minua ilmaiseksi

Tämä on helppo työ jQueryn kanssa. Sinun on luotava ajastin suorittaaksesi koodisi joka kerta X sekuntia. Uuden koodin kirjoittamisen sijaan helpoin asia on kuitenkin jäljitellä seuraavan kuvan painikkeen napsautusta ja antaa olemassa olevan koodin tehdä kaikki työt.

Tässä on uusi JavaScript, jota tarvitset - lisää tämä kuva toiminto:

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

Täällä ei tapahdu paljon. The window.setInterval menetelmä suorittaa koodinpalan säännöllisesti lopussa määritetyn ajan mukaan. Aika 2500 (millisekunteina) tarkoittaa, että tämä diaesitys etenee 2,5 sekunnin välein. Pienempi määrä tarkoittaa, että jokainen kuva siirtyy nopeammin. The klikkaus menetelmä laukaisee painikkeet suorittamaan koodin ikään kuin käyttäjä olisi napsauttanut painiketta hiirellä.

Jos olet valmis seuraavaan JavaScript-haasteeseesi, kokeile rakentaa verkkosivusto, jossa on staattinen verkkosivustojen rakentaja, kuten GatsbyJS, tai käyttöliittymä, kuten Vue. Jos olet Ruby -oppija, Jekyll on myös vaihtoehto. Näin Jekyll ja GatsbyJS pärjäävät toisiaan vastaan.

Kuva: Tharanat Sardsri Shutterstock.comin kautta

Jaa Jaa Tweet Sähköposti 8 parasta verkkosivustoa, joilla voit ladata äänikirjoja ilmaiseksi

Äänikirjat ovat loistava viihde ja paljon helpompi sulattaa. Tässä on kahdeksan parasta verkkosivustoa, joista voit ladata ne ilmaiseksi.

Lue seuraava Liittyvät aiheet

Ohjelmointi
JavaScript
Web-suunnittelu

Kirjailijasta Joe Coburn(136 artikkelia julkaistu)

Joe on valmistunut tietojenkäsittelytieteestä Lincolnin yliopistosta Iso -Britanniasta. Hän on ammattimainen ohjelmistokehittäjä, ja kun hän ei lentä droneilla tai kirjoita musiikkia, hänet voidaan usein ottaa valokuvista tai videoista.

Lisää Joe Coburnilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi