Kā izveidot JavaScript slaidrādi 3 vienkāršos soļos

Ja esat izlasījis mūsu ceļvedi kā izveidot vietni , iespējams, domājat, ko darīt tālāk, lai uzlabotu savas prasmes. Foto slaidrādes izveidošana ir pārsteidzoši vienkāršs uzdevums, un tas var iemācīt jums vērtīgas prasmes, kas nepieciešamas, lai iegūtu programmēšanas darbu.

Šodien es jums parādīšu, kā izveidot JavaScript slaidrādi no nulles. Lecam iekšā!

Priekšnosacījumi

Lai sāktu kodēšanu, jums jāzina dažas lietas. Kopā ar piemērotu tīmekļa pārlūkprogrammu un teksta redaktoru pēc jūsu izvēles (es iesaku Cildens teksts ), jums būs nepieciešama pieredze HTML , CSS , JavaScript , un jQuery .

Ja neesat tik pārliecināts par savām prasmēm, noteikti izlasiet mūsu rokasgrāmatu par dokumenta objekta modeļa izmantošanu un šos padomus, kā apgūt CSS. Ja esat pārliecināts par JavaScript, bet nekad iepriekš neesat izmantojis jQuery, skatiet mūsu pamata ceļvedi par jQuery.

1. Darba sākšana

Šai slaidrādei ir nepieciešamas vairākas funkcijas:

Atbalsts attēliem
Attēlu maiņas vadīklas
Teksta paraksts
Automātiskais režīms

Šķiet vienkāršs funkciju saraksts. Automātiskais režīms automātiski pārsūtīs attēlus uz nākamo secībā. Šeit ir aptuvena skice, ko es izdarīju pirms koda rakstīšanas:

Ja jums rodas jautājums, kāpēc apgrūtināt plānošanu, tad apskatiet šīs sliktākās programmēšanas kļūdas vēsturē. Šis projekts nevienu nenogalinās, taču ir svarīgi, lai pirms darba pie lielāka koda būtu laba izpratne par kodu un plānošanas procedūrām - pat ja tā ir tikai aptuvena skice.

Šeit ir sākotnējais HTML, kas jums nepieciešams, lai sāktu darbu. Saglabājiet to failā ar atbilstošu nosaukumu, piemēram, index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Lūk, kā izskatās kods:

Tas ir mazliet muļķības, vai ne? Sadalīsim to, pirms to uzlabosim.

Šis kods satur “standarta” HTML , galvu , stils , skripts , un ķermenis tagus. Šīs daļas ir jebkuras vietnes būtiskas sastāvdaļas. JQuery ir iekļauts, izmantojot Google CDN - līdz šim nekas unikāls vai īpašs.

Ķermeņa iekšpusē ir div ar ID showContainer . Šis ir iesaiņojums vai ārējais konteiners slaidrādes glabāšanai. Vēlāk to uzlabosiet, izmantojot CSS. Šī konteinera iekšpusē ir trīs koda bloki, no kuriem katram ir līdzīgs mērķis.

Vecāku klase ir definēta ar klases nosaukumu imageContainer :

To izmanto viena slaida glabāšanai - attēls un paraksts tiek glabāti šajā konteinerā. Katram konteineram ir unikāls ID, kas sastāv no rakstzīmēm iekš_ un skaitlis. Katram traukam ir atšķirīgs numurs - no viena līdz trim.

Kā pēdējais solis ir atsauce uz attēlu, un paraksts tiek saglabāts div divos ar paraksts klase:

Dog

Esmu izveidojis savus attēlus ar ciparu failu nosaukumiem un saglabājis tos mapē ar nosaukumu Attēli . Jūs varat saukt savējo par visu, kas jums patīk, ja atjaunināt HTML, lai tas atbilstu.

Ja vēlaties, lai slaidrādē būtu vairāk vai mazāk attēlu, vienkārši kopējiet un ielīmējiet vai izdzēsiet koda blokus, izmantojot imageContainer klasē, atceroties pēc nepieciešamības atjaunināt failu nosaukumus un ID.

Visbeidzot, tiek izveidotas navigācijas pogas. Tie ļauj lietotājam pārvietoties pa attēliem:

 ❮  
 ❯

Šīs HTML vienība kodus izmanto, lai parādītu bultiņas uz priekšu un atpakaļ, līdzīgi kā darbojas ikonu fonti.

2. CSS

Tagad, kad pamatstruktūra ir izveidota, ir pienācis laiks likt tai izskatīties smuki . Lūk, kā tas izskatīsies pēc šī jaunā koda:

Pievienojiet šo CSS starp savu stils tagi:

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

Tas tagad izskatās daudz labāk, vai ne? Apskatīsim kodu.

Es izmantoju visu paraugu attēlus 670 x 503 pikseļi , tāpēc šī slaidrāde lielākoties ir veidota ap šāda izmēra attēliem. Ja vēlaties izmantot cita izmēra attēlus, CSS būs atbilstoši jāpielāgo. Es iesaku mainīt attēlu izmērus līdz atbilstošiem izmēriem - dažādi dažādu izmēru attēli radīs stila problēmas.

Lielākā daļa šī CSS ir pašsaprotama. Tur ir kods, lai definētu konteinera izmēru attēlu glabāšanai, visu izlīdzinātu centrā, norādītu fontu, kā arī pogu un teksta krāsu. Ir daži stili, ar kuriem jūs, iespējams, neesat saskāries:

kursors: rādītājs - Pārvietojot kursoru virs pogām, kursors tiek mainīts no bultiņas uz rādītājpirkstu.
necaurredzamība: 0,65 - Tas palielina pogu caurspīdīgumu.
lietotāja izvēle: nav - Tas nodrošina, ka nevarat nejauši izcelt tekstu uz pogām.

Lielākās daļas šī koda rezultātus varat redzēt pogās:

Sarežģītākā daļa ir šī dīvaini izskata līnija:

.imageContainer:not(:first-child) {

Tas var izskatīties diezgan neparasti, tomēr tas ir diezgan pašsaprotami.

Pirmkārt, tas ir paredzēts visiem elementiem ar imageContainer klase. The : nē () sintakse nosaka, ka iekavās esošajiem elementiem jābūt izslēgts no šī stila. Visbeidzot, : pirmais bērns sintakse nosaka, ka šim CSS jābūt mērķētam uz jebkuru elementu, kas atbilst nosaukumam bet ignorēt pirmo elementu. Iemesls tam ir vienkāršs. Tā kā šī ir slaidrāde, vienlaikus ir nepieciešams tikai viens attēls. Šis CSS slēpj visus attēlus, izņemot pirmo.

3. JavaScript

Pēdējais mīklas gabals ir JavaScript. Šī ir loģika, lai slaidrāde darbotos pareizi.

Pievienojiet šo kodu savam skripts atzīme:

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

Tas var šķist pretintuitīvs, bet es izlaidīšu sākotnējos koda blokus un uzreiz ķēros pie koda skaidrošanas-neuztraucieties, es izskaidroju visu kodu!

Jums ir jādefinē divi mainīgie. (Lūk, kā definēt mainīgos JavaScript.) Šos mainīgos var uzskatīt par galvenajiem slīdrādes konfigurācijas mainīgajiem:

var currentImage = 1;  
var totalImages = 3;

Tie saglabā kopējo attēlu skaitu slaidrādē un attēla skaitu, ar kuru sākt. Ja jums ir vairāk attēlu, vienkārši nomainiet totalImages mainīgajam kopējam attēlu skaitam.

Abas funkcijas palielināt attēlu un samazinājumsImage virzīties uz priekšu vai atkāpties currentImage mainīgais. Vai šim mainīgajam vajadzētu būt zemākam par vienu vai augstākam par totalImages , tas tiek atiestatīts uz vienu vai totalImages . Tas nodrošina, ka slaidrāde tiks atskaņota, kad tā sasniegs beigas.

Atgriezieties pie koda sākumā. Šis kods “mērķē” uz nākamo un iepriekšējo pogu. Noklikšķinot uz katras pogas, tā izsauc atbilstošo palielināt vai samazināt metodes. Kad tas ir pabeigts, tas vienkārši izgaismo ekrānā redzamo attēlu un izgaismo jauno attēlu (kā definēts currentImage mainīgais).

The apstāties () metode ir iebūvēta jQuery. Tādējādi tiek atcelti visi gaidāmie notikumi. Tas nodrošina, ka katra pogas nospiešana ir vienmērīga, un tas nozīmē, ka jums nav 100 pogu nospiešanas, kas gaida izpildi, ja jūs mazliet trakojat ar peli. The izbalināt (1) un izbalināt (1) metodes izgaismo vai izgaismo attēlus pēc nepieciešamības. Skaitlis norāda izbalēšanas ilgumu milisekundēs. Mēģiniet mainīt to uz lielāku skaitli, piemēram, 500. Lielāks skaitlis nodrošina ilgāku pārejas laiku. Tomēr dodieties pārāk tālu, un starp attēla izmaiņām var sākties redzēt dīvainus notikumus vai “mirgošanu”. Lūk, slaidrāde darbībā:

Automātiska attīstība

Šī slaidrāde tagad izskatās diezgan labi, taču ir nepieciešams vēl viens pēdējais pieskāriens. Automātiskā virzība ir funkcija, kas patiešām padarīs šo slaidrādi spīdīgu. Pēc noteikta laika katrs attēls automātiski pāriet uz nākamo. Tomēr lietotājs joprojām var pārvietoties uz priekšu vai atpakaļ.

kāpēc amīši neizmanto elektrību?

Tas ir vienkāršs darbs ar jQuery. Lai izveidotu kodu katru reizi, ir jāizveido taimeris X sekundes. Tā vietā, lai rakstītu jaunu kodu, visvieglāk ir atdarināt “klikšķi” uz nākamā attēla pogas un ļaut esošajam kodam paveikt visu darbu.

Šeit ir nepieciešamais jaunais JavaScript - pievienojiet to aiz samazinājumsImage funkcija:

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

Šeit nekas daudz nenotiek. The window.setInterval metode regulāri izpildīs koda gabalu, kā noteikts beigās norādītajā laikā. Laiks 2500 (milisekundēs) nozīmē, ka šī slaidrāde tiks pārvietota ik pēc 2,5 sekundēm. Mazāks skaitlis nozīmē, ka katrs attēls tiks pārvietots ātrāk. The klikšķis metode aktivizē pogas, lai palaistu kodu tā, it kā lietotājs būtu noklikšķinājis uz pogas ar peli.

Ja esat gatavs nākamajam JavaScript izaicinājumam, mēģiniet izveidot vietni, izmantojot statisku vietņu veidotāju, piemēram, GatsbyJS, vai tādu priekšgala sistēmu kā Vue. Ja esat Ruby skolēns, Jekyll ir arī iespēja. Lūk, kā Jekyll un GatsbyJS veicas viens pret otru.

Attēlu kredīts: Tharanat Sardsri, izmantojot Shutterstock.com

Kopīgot Kopīgot Čivināt E -pasts 8 labākās vietnes, kur bez maksas lejupielādēt audiogrāmatas

Audiogrāmatas ir lielisks izklaides avots un daudz vieglāk sagremojams. Šeit ir astoņas labākās vietnes, kur tās var lejupielādēt bez maksas.

Lasīt Tālāk Saistītās tēmas

Programmēšana
JavaScript
Web dizains

Par autoru Džo Koburns(Publicēti 136 raksti)

Džo ir absolvējis datorzinātnes Linkolnas universitātē, Lielbritānijā. Viņš ir profesionāls programmatūras izstrādātājs, un, kad viņš nelido ar droniem un neraksta mūziku, viņu bieži var atrast, fotografējot vai veidojot video.

Vairāk no Džo Kobērna

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu