Kaip sukurti „JavaScript“ skaidrių demonstraciją per 3 paprastus veiksmus

Jei perskaitėte mūsų vadovą kaip sukurti svetainę , jums gali kilti klausimas, ką daryti toliau, kad patobulintumėte savo įgūdžius. Padaryti skaidrių demonstraciją nuotraukoje yra stebėtinai lengva užduotis, kuri gali išmokyti jus vertingų įgūdžių, reikalingų programavimo darbui gauti.

Šiandien aš jums parodysiu, kaip sukurti „JavaScript“ skaidrių demonstraciją nuo nulio. Eikime tiesiai!

Būtinos sąlygos

Prieš pradėdami koduoti, turite žinoti keletą dalykų. Kartu su pasirinkta tinkama žiniatinklio naršykle ir teksto redaktoriumi (rekomenduoju Aukščiausias tekstas ), jums reikės patirties HTML , CSS , „JavaScript“ , ir „jQuery“ .

Jei nesate tikri savo įgūdžiais, būtinai perskaitykite mūsų dokumento objekto modelio naudojimo vadovą ir šiuos patarimus, kaip išmokti CSS. Jei pasitikite „JavaScript“, bet niekada nenaudojote „jQuery“, peržiūrėkite mūsų pagrindinį „jQuery“ vadovą.

1. Darbo pradžia

Šiai skaidrių demonstracijai reikia kelių funkcijų:

Vaizdų palaikymas
Vaizdų keitimo valdikliai
Teksto antraštė
Automatinis režimas

Tai atrodo paprastas funkcijų sąrašas. Automatinis režimas automatiškai perkelia vaizdus į kitą sekos vaizdą. Štai šiurkštus eskizas, kurį padariau prieš rašydamas bet kokį kodą:

Jei jums įdomu, kodėl vargti planuojant, pažvelkite į šias blogiausias programavimo klaidas istorijoje. Dėl šio projekto niekas nebus nužudytas, tačiau labai svarbu gerai suprasti kodą ir planavimo procedūras prieš dirbant su didesniu kodu - net jei tai tik grubus eskizas.

Štai pradinis HTML, kurio reikia norint pradėti. Išsaugokite tai tinkamo pavadinimo faile, pvz index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Štai kaip atrodo kodas:

Tai šiek tiek šiukšlė, ar ne? Prieš patobulindami ją suskaidykime.

Šiame kode yra „standartinis“ HTML , galva , stilius , scenarijus , ir kūnas žymes. Šios dalys yra esminiai bet kurios svetainės komponentai. JQuery yra įtrauktas per „Google“ CDN - kol kas nieko unikalaus ar ypatingo.

Kūno viduje yra skyrius, kurio ID yra showContainer . Tai įvyniojimas arba išorinis konteineris skaidrių demonstracijai saugoti. Vėliau tai patobulinsite naudodami CSS. Šio konteinerio viduje yra trys kodo blokai, kurių kiekvienas turi panašų tikslą.

Pagrindinė klasė yra apibrėžta klasės pavadinimu imageContainer :

Tai naudojama vienai skaidriai saugoti - vaizdas ir antraštė saugomi šio konteinerio viduje. Kiekvienas konteineris turi unikalų ID, kurį sudaro simboliai viduje konors_ ir skaičius. Kiekvienas konteineris turi skirtingą skaičių - nuo vieno iki trijų.

Paskutiniame etape pateikiama nuoroda į vaizdą, o antraštė saugoma div viduje su antraštė klasė:

Dog

Aš sukūriau savo vaizdus skaitmeniniais failų pavadinimais ir išsaugojau juos aplanke pavadinimu Vaizdai . Galite vadinti savo, kaip jums patinka, jei atnaujinsite HTML, kad jis atitiktų.

Jei norite, kad skaidrių demonstravime būtų daugiau ar mažiau vaizdų, tiesiog nukopijuokite ir įklijuokite arba ištrinkite kodo blokus naudodami imageContainer klasę, nepamirškite atnaujinti failų pavadinimų ir ID, jei reikia.

Galiausiai sukuriami naršymo mygtukai. Tai leidžia vartotojui naršyti vaizdus:

 ❮  
 ❯

Šie HTML subjektas kodai naudojami rodyti pirmyn ir atgal rodykles, panašiai kaip veikia piktogramų šriftai.

2. CSS

Dabar, kai pagrindinė struktūra yra sukurta, atėjo laikas ją atrodyti graži . Štai kaip tai atrodys po šio naujo kodo:

Pridėkite šį CSS tarp savo stilius žymės:

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

Tai dabar atrodo daug geriau, tiesa? Pažvelkime į kodą.

Aš naudoju pavyzdinius vaizdus, kurie yra visi 670 x 503 pikselių , todėl ši skaidrių demonstracija dažniausiai buvo sukurta pagal tokio dydžio vaizdus. Jei norite naudoti kitokio dydžio vaizdus, turėsite tinkamai pakoreguoti CSS. Rekomenduoju pakeisti vaizdų dydį, kad jie atitiktų dydžius - skirtingi skirtingų matmenų vaizdai sukels stiliaus problemų.

Dauguma Šis CSS yra savaime suprantamas. Yra kodas, skirtas apibrėžti konteinerio dydį, kuriame bus saugomi vaizdai, sulygiuoti viską centre, nurodyti šriftą kartu su mygtuko ir teksto spalva. Yra keletas stilių, su kuriais galbūt nesate susidūrę anksčiau:

žymeklis: rodyklė - Tai perkelia žymeklį iš rodyklės į rodomą pirštą, kai perkeliate žymeklį virš mygtukų.
neskaidrumas: 0,65 - Tai padidina mygtukų skaidrumą.
vartotojo pasirinkimas: nėra - Tai užtikrina, kad negalite netyčia paryškinti mygtukų teksto.

Daugumos šio kodo rezultatus galite pamatyti mygtukuose:

Sudėtingiausia čia yra ši keistai atrodanti eilutė:

.imageContainer:not(:first-child) {

Tai gali atrodyti gana neįprastai, tačiau tai gana savaime suprantama.

Pirma, jis skirtas bet kokiems elementams su imageContainer klasė. The : ne () sintaksėje teigiama, kad visi skliausteliuose esantys elementai turėtų būti neįtrauktas iš šio stiliaus. Galiausiai, : pirmagimis sintaksėje teigiama, kad ši CSS turėtų būti nukreipta į bet kurį pavadinimą atitinkantį elementą bet ignoruoti pirmąjį elementą. To priežastis paprasta. Kadangi tai yra skaidrių demonstracija, vienu metu reikia tik vieno vaizdo. Šis CSS slepia visus vaizdus, išskyrus pirmąjį.

3. „JavaScript“

Paskutinė dėlionės dalis yra „JavaScript“. Tai logika, leidžianti skaidrių demonstracijai tinkamai veikti.

Pridėkite šį kodą prie savo scenarijus žyma:

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

Tai gali atrodyti priešinga intuityviai, bet aš praleisiu pradinius kodo blokus ir iš karto pradėsiu aiškinti kodą-nesijaudinkite, aš paaiškinu visą kodą!

Turite apibrėžti du kintamuosius. (Štai kaip apibrėžti kintamuosius „JavaScript“.) Šie kintamieji gali būti laikomi pagrindiniais skaidrių demonstravimo konfigūracijos kintamaisiais:

var currentImage = 1;  
var totalImages = 3;

Jie išsaugo bendrą skaidrių demonstravimo vaizdų skaičių ir vaizdo, kurį norite pradėti, skaičių. Jei turite daugiau vaizdų, tiesiog pakeiskite totalImages kintamas pagal bendrą turimų vaizdų skaičių.

Dvi funkcijos padidinti vaizdą ir Vaizdo sumažėjimas iš anksto ar atsitraukti currentImage kintamasis. Ar šis kintamasis turėtų būti mažesnis nei vienas arba didesnis nei totalImages , jis bus atstatytas į vieną arba totalImages . Tai užtikrina, kad skaidrių demonstravimas pasibaigs.

Grįžkite prie kodo pradžioje. Šis kodas „nukreipia“ į kitus ir ankstesnius mygtukus. Kai spustelėsite kiekvieną mygtuką, jis iškvies atitinkamą padidinti arba mažinti metodus. Užbaigus, jis tiesiog išblukina vaizdą ekrane ir išnyksta naujame vaizde (kaip apibrėžta currentImage kintamasis).

The sustabdyti() Šis metodas yra integruotas į „jQuery“. Tai atšaukia visus laukiančius įvykius. Tai užtikrina, kad kiekvienas mygtukų paspaudimas yra sklandus, o tai reiškia, kad jūs neturite 100 mygtukų paspaudimų, kurie laukia, kol bus įvykdyta, jei šiek tiek išprotėsite dėl pelės. The išnyks (1) ir išnykti (1) metodai, kaip reikiant išblukina arba išjungia vaizdus. Skaičius nurodo išblukimo trukmę milisekundėmis. Pabandykite pakeisti šį skaičių į didesnį, pvz., 500. Didesnis skaičius lemia ilgesnį perėjimo laiką. Tačiau eikite per toli ir galite pastebėti keistus įvykius ar „mirgėjimą“ tarp vaizdo pakeitimų. Štai skaidrių demonstracija:

Automatinis judėjimas

Ši skaidrių demonstracija dabar atrodo gana gerai, tačiau reikia paskutinio prisilietimo. Automatinis perėjimas yra funkcija, kuri tikrai padarys šią skaidrių demonstraciją spindinčią. Po nustatyto laiko kiekvienas vaizdas automatiškai pereis prie kito. Tačiau vartotojas vis tiek gali naršyti pirmyn arba atgal.

ar „Kindle Unlimited“ verta?

Tai lengvas darbas naudojant „jQuery“. Norint sukurti kodą, reikia sukurti laikmatį X sekundžių. Tačiau vietoj to, kad rašytumėte naują kodą, paprasčiausias dalykas yra imituoti kito vaizdo mygtuko paspaudimą ir leisti esamam kodui atlikti visą darbą.

Štai jums reikalingas naujas „JavaScript“ - pridėkite tai po Vaizdo sumažėjimas funkcija:

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

Čia nedaug kas vyksta. The window.setInterval metodas reguliariai vykdys kodo dalį, kaip apibrėžta pabaigoje nurodytu laiku. Laikas 2500 (milisekundėmis) reiškia, kad ši skaidrių demonstracija bus rodoma kas 2,5 sekundės. Mažesnis skaičius reiškia, kad kiekvienas vaizdas judės greičiau. The spustelėkite metodas suaktyvina mygtukus paleisti kodą taip, lyg vartotojas būtų spustelėjęs mygtuką pele.

Jei esate pasiruošę kitam „JavaScript“ iššūkiui, pabandykite sukurti svetainę naudodami statinį svetainių kūrėją, pvz., „GatsbyJS“, arba priekinę sistemą, pvz., „Vue“. Jei mokotės Ruby, Jekyll taip pat yra galimybė. Štai kaip Jekyll ir GatsbyJS elgiasi vienas prieš kitą.

Vaizdo kreditas: Tharanat Sardsri per Shutterstock.com

Dalintis Dalintis „Tweet“ Paštu 8 geriausios svetainės, kuriose galite nemokamai atsisiųsti garso knygas

Garso knygos yra puikus pramogų šaltinis ir daug lengviau virškinamas. Čia yra aštuonios geriausios svetainės, kurias galite nemokamai atsisiųsti.

Skaityti toliau Susijusios temos

Programavimas
„JavaScript“
Interneto svetainės dizainas

Apie autorių Joe Coburn(Paskelbti 136 straipsniai)

Joe yra baigęs informatikos studijas Linkolno universitete, JK. Jis yra profesionalus programinės įrangos kūrėjas, o kai jis neskraido dronais ir nerašo muzikos, jį dažnai galima rasti fotografuojant ar kuriant vaizdo įrašus.

Daugiau iš Joe Coburn

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia