Kuidas luua JavaScripti slaidiseanssi kolme lihtsa sammuga

Kui olete meie juhendit lugenud kuidas teha veebisaiti , võite mõelda, mida edasi teha oma oskuste parandamiseks. Foto slaidiseansi tegemine on üllatavalt lihtne ülesanne ja see võib õpetada teile programmeerimistöö saamiseks vajalikke väärtuslikke oskusi.

Täna näitan teile, kuidas JavaScripti slaidiseanssi nullist üles ehitada. Hüppame kohe sisse!

Eeldused

Enne kodeerimise alustamist peate teadma mõnda asja. Koos teie valitud sobiva veebibrauseri ja tekstiredaktoriga (soovitan Ülev tekst ), vajate kogemusi HTML , CSS , JavaScript ja jQuery .

Kui te pole oma oskustes nii kindel, lugege kindlasti meie dokumendiobjekti mudeli kasutamise juhendit ja neid näpunäiteid CSS -i õppimiseks. Kui olete JavaScriptiga kindel, kuid pole kunagi varem jQueryt kasutanud, siis vaadake meie jQuery põhijuhendit.

1. Alustamine

See slaidiseanss nõuab mitmeid funktsioone:

Piltide tugi
Piltide muutmise juhtelemendid
Tekstiallkiri
Automaatne režiim

Tundub lihtne funktsioonide loend. Automaatrežiim edastab pildid automaatselt järjestikku järgmisele. Siin on ligikaudne visand, mille tegin enne koodi kirjutamist:

Kui mõtlete, miks planeerimisega vaeva näha, siis vaadake neid ajaloo halvimaid programmeerimisvigu. See projekt ei tapa kedagi, kuid enne suurema koodi kallal töötamist on ülioluline saada põhjalik arusaam koodist ja planeerimisprotseduuridest - isegi kui see on ainult ligikaudne visand.

Siin on alguseks vajalik algne HTML. Salvestage see sobiva nimega faili, näiteks index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Kood näeb välja selline:

See on natuke jama, kas pole? Lõhkume selle enne, kui seda parandame.

See kood sisaldab 'standardset' HTML , pea , stiil , skript ja keha silte. Need osad on mis tahes veebisaidi olulised komponendid. JQuery on lisatud Google'i CDN -i kaudu - seni pole midagi ainulaadset ega erilist.

Keha sees on div, mille ID on showContainer . See on ümbris või välimine konteiner slaidiseansi salvestamiseks. Seda parandate hiljem CSS -iga. Selle konteineri sees on kolm koodiplokki, millest igaühel on sarnane eesmärk.

Vanemklass on määratletud klassi nimega imageContainer :

Seda kasutatakse ühe slaidi salvestamiseks - pilt ja pealdis salvestatakse sellesse konteinerisse. Igal konteineril on kordumatu tunnus, mis koosneb tähemärkidest aastal ja number. Igal konteineril on erinev number, üks kuni kolm.

Viimase sammuna viidatakse pildile ja pealdis salvestatakse div -i koos pealkiri klass:

Dog

Olen loonud oma pildid numbriliste failinimedega ja salvestanud need kausta nimega Pildid . Saate omaks nimetada kõike, mis teile meeldib, kui värskendate HTML -i vastavaks.

Kui soovite, et slaidiseansis oleks rohkem või vähem pilte, kopeerige ja kleepige või kustutage koodiplokid nupuga imageContainer klassi, pidades meeles failide nimede ja ID -de värskendamist vastavalt vajadusele.

Lõpuks luuakse navigeerimisnupud. Need võimaldavad kasutajal pilte navigeerida:

 ❮  
 ❯

Need HTML -olem koode kasutatakse edasi- ja tagasinoolte kuvamiseks sarnaselt ikoonifontide toimimisele.

2. CSS

Nüüd, kui põhistruktuur on paigas, on aeg see välja näha päris . See näeb välja pärast seda uut koodi:

Lisage see CSS oma vahele stiil sildid:

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

See näeb praegu palju parem välja? Vaatame koodi.

Ma kasutan näidispilte, mis on kõik 670 x 503 pikslit , nii et see slaidiseanss on enamasti kujundatud selle suurusega piltide ümber. Kui soovite kasutada erineva suurusega pilte, peate CSS -i õigesti kohandama. Soovitan muuta oma piltide suurused sobivateks suurusteks - erineva suurusega pildid põhjustavad stiiliprobleeme.

Enamik selle CSS -i kirjeldus on iseenesestmõistetav. Piltide säilitamiseks on konteineri suuruse määramiseks kood, kõik joondatakse keskele, määratakse font ja nupp ning teksti värv. Võimalik, et pole varem kohanud mõnda stiili:

kursor: osuti - See muudab kursori nooltest osutavaks sõrmeks, kui liigutate kursorit nuppude kohal.
läbipaistmatus: 0,65 - See suurendab nuppude läbipaistvust.
kasutaja valida: pole - See tagab, et te ei saa nuppude teksti kogemata esile tõsta.

Enamiku selle koodi tulemust näete nuppudes:

Siin on kõige keerulisem osa see kummalise välimusega rida:

.imageContainer:not(:first-child) {

See võib tunduda üsna ebatavaline, kuid on üsna iseenesestmõistetav.

Esiteks sihib see kõiki elemente imageContainer klassi. The :mitte() süntaks ütleb, et sulgudes olevad elemendid peaksid olema välistatud sellest stiilist. Lõpuks, : esimene laps süntaks ütleb, et see CSS peaks sihtima kõiki nimele vastavaid elemente aga ignoreerige esimest elementi. Selle põhjus on lihtne. Kuna tegemist on slaidiseansiga, on korraga vaja ainult ühte pilti. See CSS peidab kõik pildid peale esimese.

3. JavaScript

Pusle viimane osa on JavaScript. See on loogika slaidiseansi õigeks toimimiseks.

Lisage see kood omale skript silt:

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

See võib tunduda intuitiivne, kuid ma jätan esialgsed koodiplokid vahele ja alustan pooleldi koodi selgitamisega-ärge muretsege, ma selgitan kogu koodi!

Peate määratlema kaks muutujat. (Siin saate JavaScriptis muutujaid määratleda.) Neid muutujaid võib pidada slaidiseansi peamiseks konfiguratsioonimuutujaks:

var currentImage = 1;  
var totalImages = 3;

Need salvestavad slaidiseansi piltide koguarvu ja alustamiseks vajaliku pildi arvu. Kui teil on rohkem pilte, muutke lihtsalt totalImages muutuv piltide koguarvust.

Kaks funktsiooni pildi suurendamine ja pildi vähenemine edasi või taganema currentImage muutuja. Kas see muutuja peaks olema väiksem kui üks või suurem kui totalImages , see lähtestatakse ühele või totalImages . See tagab, et slaidiseanss kordub lõpus, kui see jõuab.

Tagasi koodi juurde alguses. See kood 'sihib' järgmist ja eelmist nuppu. Kui klõpsate igal nupul, kutsub see vastavat suurendama või vähenemine meetodeid. Kui see on lõpule viidud, kustutab see ekraanil oleva pildi lihtsalt ja kaob uuel pildil (nagu on määratletud currentImage muutuja).

The peatus () meetod on jQuery sisse ehitatud. See tühistab kõik ootel olevad sündmused. See tagab, et iga nupuvajutus on sujuv ja see tähendab, et kui te hiirega natuke hulluks lähete, ei pea te 100 nupuvajutust täitmist ootama. The fadeIn (1) ja fadeOut (1) meetodid kustutavad või kustutavad pilte vastavalt vajadusele. Number määrab tuhmumise kestuse millisekundites. Proovige see muuta suuremaks, näiteks 500. Suurem arv toob kaasa pikema üleminekuaja. Minge siiski liiga kaugele ja võite näha pildimuutuste vahel kummalisi sündmusi või „virvendusi”. Siin on slaidiseanss tegevuses:

Automaatne edasiliikumine

See slaidiseanss näeb praegu päris hea välja, kuid vaja on veel viimast lihvi. Automaatne edasiliikumine on funktsioon, mis paneb selle slaidiseansi tõesti särama. Pärast määratud aja möödumist liigub iga pilt automaatselt järgmisele pildile. Kasutaja saab siiski edasi või tagasi liikuda.

failide ülekandmine Macist arvutisse

See on jQuery abil lihtne töö. Teie koodi käivitamiseks tuleb luua taimer X sekundit. Uue koodi kirjutamise asemel on aga kõige lihtsam jäljendada järgmise pildinupu klõpsu ja lasta olemasoleval koodil kogu töö ära teha.

Siin on uus JavaScript, mida vajate - lisage see pärast pildi vähenemine funktsioon:

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

Siin ei toimu palju. The window.setInterval meetod käivitab regulaarselt kooditüki, nagu on määratud lõpus määratud ajaga. Aeg 2500 (millisekundites) tähendab, et see slaidiseanss liigub edasi iga 2,5 sekundi järel. Väiksem arv tähendab, et iga pilt liigub kiiremini. The klõpsake meetod käivitab nupud koodi käivitamiseks nii, nagu oleks kasutaja hiirega nuppu vajutanud.

Kui olete oma järgmiseks JavaScripti väljakutseks valmis, proovige luua veebisait staatilise veebisaitide koostajaga, nagu GatsbyJS, või kasutajaliidese raamistikuga, nagu Vue. Kui olete Ruby õppija, on võimalus ka Jekyll. Siit saate teada, kuidas Jekyllil ja GatsbyJSil üksteise vastu läheb.

Pildikrediit: Tharanat Sardsri Shutterstock.com kaudu

Jaga Jaga Piiksuma E -post 8 parimat veebisaiti audioraamatute tasuta allalaadimiseks

Audioraamatud on suurepärane meelelahutusallikas ja neid on palju lihtsam seedida. Siin on kaheksa parimat veebisaiti, kust saate need tasuta alla laadida.

Loe edasi Seotud teemad

Programmeerimine
JavaScript
Veebidisain

Autori kohta Joe Coburn(136 artiklit avaldatud)

Joe on lõpetanud arvutiteaduse Ühendkuningriigi Lincolni ülikoolis. Ta on professionaalne tarkvaraarendaja ja kui ta ei lennuta droonidega ega kirjuta muusikat, võib teda sageli leida pildistamas või videoid tootmas.

Rohkem Joe Coburnilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin