Lihtne jQuery karussell. Lihtne jQuery karussell Lihtne jquery karussell koos juhistega

Üks tõhusamaid viise veebisaidi lehel kasutajate tähelepanu köitmiseks on liikuva animatsiooni loomine. Animatsioonielemendid aitavad kasutajatele teie toodet selgemalt rääkida ja seda näidata. Viimasel ajal on väga populaarseks muutunud libisevad paneelid, aga ka mitmed muud efektid, mis ilmuvad pilti kerides või klõpsates. Neid tuntakse ka liugurite, karussellide ja väljatõmmatavate paneelidena. See artikkel keskendub sujuva automaatse kerimise efektiga tundliku karusselli liuguri loomisele.

Tänapäeval on võrgus sadu arvustusi koos linkidega valmislahendustele, kuid enamik neist sisaldab palju kasutamata funktsioone, mis vähendavad oluliselt liuguri jõudlust, aga ka aeglustavad saidi kui terviku laadimist. Professionaalsed veebiarendajad on alati püüdnud luua paindlikke tarkvaratooteid, millel on madal piirmäär täiendavate teekide ja pistikprogrammide jaoks. Sellepärast on meie skripti töösse kaasatud sellise liuguri korraldamise miinimumnõuded. Töö funktsionaalsus võimaldab määrata nii lülitusintervalli, kiirust kui ka konkreetse slaidi valikut. Allpool on hulk muutujaid, mis juhivad liuguri tööd.

ajaloend- libisemiskiirus

TimeView- näitamise aeg

RadioBut- slaidi all olevad nupud kiireks navigeerimiseks. Vaikimisi on tõene, kui kasutate false, siis nupud kaovad.

Nüüd alustame! Loome ja avame faili index.htm

Esitatud koodis, nagu näeme, pole midagi keerulist, liugur-wrap määrab üldise asukoha ja joondab liuguri ekraani keskele. Parameeter aktiivne-slaid määrab pildi suuruse ja kõrguse vastavalt selle pikkusele. JA liugur näitab ainult aktiivset pilti.

Nüüd loome ja avame faili stiil.css ja kirjutage sinna vajalik märgistus:

@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body (värv: # 4f4f5a; fondiperekond: "Roboto", sans-serif; fondi suurus: 16 pikslit; polsterdus: 0; veeris: 0;) # liugur-wrap (maksimaalne laius: 800 pikslit; veeris: 0 auto; margin-top: 80px;) # aktiivne slaid (laius: 100%; ekraan: tabel; asend: suhteline; ületäitmine: peidetud; -webkit-user-select: puudub; -moz-user-select: puudub; -ms- user-select: pole; -o-user-select: pole; user-select: pole;) #liugur (asend: suhteline; laius: arvutatud (100% * 4); ülemine: 0; vasak: 0; veeris: 0 ; polsterdus: 0; -veebikomplekti üleminek: 1s; -o-üleminek: 1s; üleminek: 1s; -veebikomplekti ülemineku ajastuse funktsioon: lihtne sisse-välja; -o-transition-timing-function: lihtne-in -out; ülemineku-ajastamise funktsioon: lihtne-sisse-välja 100%;) .Radio-But (veeris ülaosas: 10 pikslit; teksti joondus: keskel;) .Radio-But .ctrl-select (veeris: 2 pikslit; ekraan: inline-block; laius: 16 pikslit; kõrgus: 16 pikslit; ülevool : peidetud; teksti taane: -9999px; taust: url (radioBg.p ng) keskosa alumine kordus puudub; ) .Radio-But .ctrl-select: hõljutage (kursor: kursor; tausta asukoht: keskel keskel;) .Radio-But .ctrl-select.active (tausta asend: keskel üleval;) #eelnupp, #nextbutton (kuva : plokk; laius: 40 pikslit; kõrgus: 100%; asukoht: absoluutne; ülaosa: 0; ületäitmine: peidetud; teksti taane: -999 pikslit; taust: url ("arrowBg.png") vasak keskel ei kordu; läbipaistmatus: 0,5 ; z-indeks: 3; kontuur: puudub! oluline;) #eelnupp (vasakul: 10px;) #nextbutton (paremal: 10px; taust: url (arrowBg.png) parem keskel, ei korda;) #eelnupp: hõljutage, # järgmine nupp: hõljutage (läbipaistmatus: 1;)

Stiilis vara liugur-wrap Kirjuta üles laius- teie piltide maksimaalne pikkus.

Stiilis vara #liugur (laius: arvutatud (100% * 4);) ja .slide (laius: arvutuslik (100% / 4);) määrake liuguris piltide arv. Meie näites on neid 4.

Kui edasi-/tagasi nooled segavad liuguri nähtavust, saate muuta need nähtamatuks ja need kuvatakse hõljutatuna. Selleks parameetrites prewBut ja järgmineAga, määrake läbipaistmatuse atribuudiks 0.

Nüüd loome ja avame oma faili liugur.js, mis sisaldab liuguri koodi. Ärge unustage lisada jQuery raamatukogu.

$ (dokument) .ready (funktsioon () (var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $ ("# liugur .slide"). pikkus; var animSlide = funktsioon (nool) (clearTimeout (slideTime); if (nool == "next") (if (slideNum == slideCount) (slideNum = 1;) else (slideNum ++) translateWidth = - $ ("# active-slide" ") .width () * (slideNum - 1); $ ("# liugur"). css (("teisendus": "tõlgi (" + translateWidth + "px, 0)"));) else if (nool = = " prew ") (if (slideNum == 1) (slideNum = slideCount;) else (slideNum- = 1) translateWidth = - $ (" # active-slide "). laius () * (slideNum - 1); $ (" #slider "). css ((" teisenda ":" translate ("+ translateWidth +" px, 0) "));) else (slideNum = nool; translateWidth = - $ (" # aktiivne slaid "). laius ( ) * (slideNum -1); $ ("# liugur"). css (("teisendus": "tõlgi (" + translateWidth + "px, 0)"));) $ (". ctrl-select. aktiivne" ) .removeClass ("aktiivne"); $ (". ctrl-select"). eq (slideNum - 1) .addClass ("aktiivne");) if (RadioBut) (var $ linkArrow = $ ("<>") .prependTo (" # active-slide "); $ (" # nextbutton "). klõpsake (funktsioon () (animSlide (" järgmine "); tagasta vale;)) $ (" # prewbutton "). klõpsake (funktsioon () (animSlide ("prew"); return false;))) var adderSpan = ""; $ (. slide"). every (funktsioon (indeks) (adderSpan + = " "+ indeks +""; }); $("

") .appendTo (" # slider-wrap "); $ (". ctrl-select: esimene "). addClass (" aktiivne "); $ (". ctrl-select "). klõpsake (funktsioon () (var goToNum = parseFloat ($ (this) .text ()); animSlide (goToNum + 1);)); var pause = vale; var rotator = funktsioon () (if (! paus) (slideTime = setTimeout (funktsioon ()) (animSlide) ("järgmine")), TimeView);)) $ ("# liugur-wrap"). hõljutage (funktsioon () (clearTimeout (slideTime); paus = tõene;), funktsioon () (paus = vale; pööraja () ;)); var klõpsamine = false; var prevX; $ (". slaid"). hiire alla (funktsioon (e) (klõpsamine = tõene; prevX = e.clientX;)); $ (. slaid"). hiir (. slaid" funktsioon () (klõps = vale;)); $ (dokument) .mouseup (funktsioon () (klõps = vale;)); $ (. slide"). hiir teisaldamine (funktsioon (e) (if (klõps == tõsi ) (if (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) (animSlide ("prew"); clearTimeout (slideTime);) klõpsamine = false; ))); $ (". slaid"). hõljutage (). css ("kursor", "osuti"); rotaator (); ));

Funktsioon animSlide võtab kolme tüüpi väärtusi: next, prew, numbriline väärtus. Järgmine parameeter lülitab järgmise slaidi, prew tagastab eelmise ja numbriline väärtus on kindlasti määratud slaid, mis valitakse slaidi all olevate raadionuppude kaudu.

Esitatud liuguris kasutati pilte veebiressursist https://pixabay.com/.

Jah, teema on üsna segane. Kuid sellegipoolest on sageli raske leida seda, mida tegelikult vajate. Kõik pakuvad väga keerukaid skripte, millel on palju tarbetuid funktsioone. Ja tavaliselt on need juba tihendatud pistikprogrammid.

Seetõttu pakun oma alternatiivset versiooni väga lihtsast jQuery karussellist.

Seda saab kasutada nii piltide kui ka uudiste või muu sisu karussellina =)

Ainsad väikesed kellad ja viled, mida ma endale lubasin, olid vari karusselliploki juures.

UPD: 07.06.2014

See näeb välja umbes selline:
DEMO Laadi alla

Struktuur on järgmisel kujul:

Kirjeldame stiile:

Karussell (maksimaalne laius: 1080 pikslit; / * kogu ploki laius * / veeris: automaatne 50 pikslit; laius: 100%;). Karussell-ümbris (veeris: 10 pikslit 30 pikslit; / * noolte polsterdus * / ülevool: peidetud; / * peida sisu väljaspool põhiala * / asukoht: suhteline;). karussell-üksused (laius: 10000 pikslit; / * määrake üksuste komplektile suurem laius * / asukoht: suhteline; / * asetage kast põhikarusselli suhtes ala * /). karusselliplokk (hõljumine: vasakule; / * järjesta kõik karusselli elemendid ritta * / laius: 250 pikslit; / * määrake iga elemendi laius * / polsterdus: 10px 10px 10px 0px; / * tee vahed nii et elemendid ei ühineks * /) .carousel -block img (kuva: block;) / *********** NUPPID ************ / .carousel-button -vasak a, .karussell-nupp-parem a ( laius: 25 pikslit; kõrgus: 36 pikslit; asend: suhteline; ülemine: 80 pikslit; kursor: kursor; tekstidekoratsioon: puudub;) .karussell-nupp-vasak a (ujuk: vasak ; taust: url (../ images / carousel- left.png);) .carousel-button-right a (float: õigus; taust: url (../ images / carousel-right.png); ) / *********** SHADOW ************ / .shadow (kast-vari: 0px 0px 10px rgba (0, 0, 0, 0,6);)

Ja lõpuks, kuidas see peaks töötama:

// Käsitsege paremnoolt $ (dokument) .on ("klõps", ".carousel-button-right", funktsioon () (var carusel = $ (this) .parents (. Carousel"); right_carusel (karussell ); tagasta vale;)); // Käsitsege vasakut noolt klõpsa $ (dokument) .on ("klõps", ". Carousel-button-left", funktsioon () (var carusel = $ (this) .parents (. Carousell"); left_carusel (carusell ) ; tagasta vale;)); funktsioon left_carusel (carusel) (var block_width = $ (karussell) .find (. carousel-block"). outerWidth (); $ (karussell) .find (. carousel-items .carousel-block"). eq (- 1) .clone (). PrependTo ($ (karussell) .find (. Carousell-items")); $ (karussell) .find (. Carousell-items"). Css (("vasakul": "-" + block_width + "px")); $ (karussell) .find (. carousell-items .carousell-block"). eq (-1) .remove (); $ (karussell) .find (". carousell-items " ) .animate ((vasakul: "0px"), 200);) funktsioon right_carusel (karussell) (var block_width = $ (karussell) .find (". carousel-block"). outerWidth (); $ (karussell) . leidma (.carousel-items"). animeerima ((vasakul: "-" + block_width + "px"), 200, funktsioon () ($ (karussell) .find (". carousel-items .carousel-block") . eq (0) .kloon (). appendTo ($ (karussell) .find (. carousell-items")); $ (karussell) .find (. carousell-items .carousell-block"). eq (0 ) .remove (); $ (karussell) .find (. carousel-items"). css (("left": "0px"));));) $ (funktsioon () (// Tühista alloleva rea ​​kommentaar karusselli automaatse kerimise lubamiseks auto_right (. carousel: first");)) // Automaat kerimisfunktsioon auto_right (karussell) (setInterval (funktsioon ()) (if (! $ (karussell) .is (. hover")) right_carusel (karussell); ), 3000)) // Liigutage kursor karusselli kohale $ (dokument) .on ("mouseenter", ".carousel", funktsioon () ($ (this) .addClass ("hover"))) // Eemaldage kursor karussellilt $ (dokument) .on ("mouseleave", ".carousel", funktsioon () ($ (this) .removeClass ("hover")))

Vastavalt sellele saab varju eemaldada. Ja kasutamiseks peate lihtsalt asendama põhiploki suuruse ja pesastatud "kerivad" plokid css-is. Samuti on väga lihtne seda protsessi automaatselt kerida (sel juhul lihtsalt tühistage funktsiooni auto_right kutse). Ehk sellest lihtsast galeriist saad teha kõike, mida ülesande raames vaja läheb!

Samuti tuleb märkida, et kui antud näide on adaptiivne, st karusselli suurus kohandatakse vastavalt ekraani suurusele ja seda kuvatakse õigesti nii arvuti või sülearvuti ekraanil kui ka tahvelarvutite ja nutitelefonide ekraanid.

Öökulli karussell- jQuery puutetundliku pistikprogrammi abil saate luua tundliku (reageeriva) liuguri (karusselli).
See on väga mugav, lihtne ja tundlik pistikprogramm liugurite, karussellide jms loomiseks.
Selles artiklis püüan teile selgitada ja näidata, kuidas see töötab.

Owli karusselli pistikprogrammi installimine
Esiteks peame arhiivi koos pistikprogrammiga alla laadima

Allpool näitan näidet plugina installimisest DataLife Engine'i malli.

Pärast arhiivi allalaadimist avage see ja levitage failid järgmiselt:
Fail öökull.karussell.css ja owl.transitions.css pane kausta stiilis nii või css.
Fail owl.carousel.js pane js kausta

Nüüd peame need failid ühendama, et need meie mallis töötaksid.
Faili avamine main.tpl a enne rida sisestage järgmised read:
Kaust css muutke selle vastu, milles teil on css stiilid!
Siis päris allosas enne joont sisestame järgmise rea:
OK, nüüd on kõik läbi! Oleme paigaldusega lõpetanud.

Nüüd peame liuguri ise sisestama ja konfigureerima.
Näitan näitega top uudised need kuvab populaarseid uudiseid meie öökullikarusselli kaudu.

Dokumentatsioonilehel kirjeldatakse kõiki valikuid, demosid ja meie Owl Carouselli pistikprogrammi kasutamist.
Järgige linki ja valige soovitud liugur.
Meie jaoks top uudised Valisin kõige esimese nimega Pildid. Kopeerige JavaScripti vahekaardil järgmised read:
$ (dokument) .ready (funktsioon () ($ ("# owl-demo"). owlCarousel ((automaatesitus: 3000, üksused: 4, itemsDesktop:, itemsDesktopSmall:));)); ja sisestage need faili main.tpl enne rida

Seejärel kopeerige vahekaardil CSS järgmised read:
# owl-demo .item (margin: 3px;) # owl-demo .item img (kuva: plokk; laius: 100%; kõrgus: automaatne;) ja lisage need mis tahes css fail või fail main.tpl enne rida aga pärast rida !
Nüüd sõelume oma HTML-koodi ja ühendame selle top uudised. Failis main.tpl sisestage silt õigesse kohta (populaarsed uudised) mis omakorda kuvab populaarsete uudiste loendi, mille välimust saab failis kohandada topenews.tpl, selle kohta lähemalt allpool .
Meie märgistatud kood peaks välja nägema järgmine:

Noh, nüüd jääb meil uudised ise konfigureerida.
Faili avamine topnews.tpl ja kohe alguses sisestame:

Kui kasutad mõnda minu malli koos Bootstrapiga, võid ühe võimalusena kasutada failis järgmisi ridu topnews.tpl:

Uudised kuvatakse järgmiselt

Seda pistikprogrammi saab kasutada peaaegu kõikjal, samuti märgendi abil (kohandatud kategooria)
See võib asendada ka standardset DLE galeriid, selle kohta avaldan eraldi artikli. Kasutage seda tervise heaks ;)

Parimate soovidega, admin. lae alla Tähelepanu: allalaadimise limiit on täis. Tule homme =)

Internetis on palju suurepäraseid pistikprogramme jQuery karussellide ja liugurite loomiseks. Need võimaldavad teil rakendada dünaamilist kerimist koos lisaefektidega.

See on viimaste aastate üks kuumemaid veebidisaini suundi. Lisaks võib valmis teekide ja jQuery pluginate kasutamine oluliselt aega säästa. Kõik, mida pead tegema, on linkida JavaScripti ja CSS-failidega ning seejärel rakendada efekti soovitud HTML-i elementidele.

Samuti saate määrata oma seaded ja CSS-stiilid. Tänase artikli eesmärk on tutvustada teile reageerivaid jQuery pistikprogramme karussellide ja liugurite loomiseks.

Distractful – jQuery pistikprogramm puutetundliku täisekraani sisu liuguri loomiseks

Tundlik täisekraanil jQuery sisukarusselli liugur puutetundliku ekraani toega. Pistikprogrammi levitatakse GNU GENERAL AVALIKLITSENTSI v3 all:

Neoslide: lihtne ja laiendatav jQuery karusselli pistikprogramm

Lihtne ja laiendatav jQuery pistikprogramm, mis võimaldab kasutada igal veebilehel täielikult kohandatavat liugurit:

Hslider: täisleheküljeline tundlik pildigalerii pistikprogramm

Veel üks pistikprogramm piltide esitlemiseks, kasutades juhtnuppude ja kohandatavate ooteaegadega tundliku jQuery karusselli:

Carousel 3D: jQuery karusselli pistikprogramm 3D-pööramise efektidega

Stiilne liugur: tundlik jQuery täisekraani karussell

Miniatuurne ja atraktiivne jQuery karussell sisu ja piltide kuvamiseks erinevat tüüpi navigeerimisega ( SVG-nooled pisipiltide, lehekülgede elementide või vahekaartidega):

PaW Carousel: tundlik jQuery toega karussell

PaW Carousel (v2) on miniatuurne pistikprogramm reageerivate, lihtsate jQuery karussellide loomiseks pisipiltide väljundiga:

Karusselli jagaja: jQuery karussell sotsiaalseks jagamiseks

Carousel Sharer on jQuery pistikprogramm, mis võimaldab kuvada mitut toodet järjest ja võimaldab külastajatel jagada teie tooteid Facebookis, Twitteris, Google+ ja Pinterestis:

Lihtsalt karussell: minimalistlik reageeriv pildikarussell

Simply Carousel on miniatuurne ja kiire jQuery pistikprogramm, mis võimaldab teil luua paindlikke reageerivaid liugureid ja pildikarusselle:

Slaidid: tundlik jQuery karussell ja puutetoega slaidiseanss

Slides on miniatuurne jQuery pistikprogramm, mis võimaldab luua jQuery saidi jaoks tundlike karussellide pisipiltide, noolega navigeerimise ja võimalusega kasutada oma juhtnuppe. Puuteekraanide tugi on rakendatud:

JQuery sisukarussell

Lihtne tundlik jQuery karussell automaatse esituse funktsioonide, juhtelementide ja isegi tagasihelistamisega:

Slick: tundlik ja paindlik jQuery karussell

Slick on värske pistikprogramm kohandatavate, tundlike ja mobiilile optimeeritud jQuery karussellide ja liugurite loomiseks, mis võivad töötada mis tahes HTML-elemendiga:

bxSlider: jQuery HTML-i sisu liugur

bxSlider on üks parimaid tänapäeval saadaolevaid jQuery sisuliugureid. See pistikprogramm sobib suurepäraselt slaidiesitluste korraldamiseks:

CarouFredSel: paindlik ja võimas jQuery karusselli pistikprogramm

jQuery.carouFredSel on pistikprogramm, mis muudab mis tahes HTML-i elemendi sisukarusselliks. Selles saate kerida üht või mitut elementi korraga nii horisontaalselt kui ka vertikaalselt. Samuti saate automaatesituse sisse lülitada ja kerimise lõputuks muuta.

JQuery sisu silmuskarussell

Karussell, milles iga klõps avab uue sisuploki. Ristil klõpsamine sulgeb aktiivse ploki ja viib meid tagasi pisipiltide vaatamise algsesse asukohta:

Pilvekarussell: 3D-karussell Javascriptis

See karussell võimaldab teil luua realistliku vaatenurga. Paljud jQuery 3D-karussellid rakendavad perspektiivi ainult pildi suurusele, mitte pildi asukohale, mille tulemuseks on lehe elementide tasakaalustamatus.

Elastislide: tundlik jQuery karussell

Elastislide on tundlik jQuery karussell, mis kohandub mis tahes ekraanisuurusega. Karusselli sisestamine painduva laiusega anumasse muudab karusselli enda "kumisemaks":

jCarousel Lite

Selle pistikprogrammi abil saate vaadata pilte või HTML-elemente liugurina. See kaalub ainult 2Kb, kuid võimaldab teil kasutada oma seadeid:

3D karussell

Looge piltidest 3D jQuery karussell, millel on varjuefektid ja animatsioonid, mis reageerivad kursori asukohale:

JQuery karusselli pistikprogramm

Pistikprogrammi seaded võimaldavad teil määrata, kui palju elemente karussellis kuvatakse, mille järel pistikprogramm kohandab selle soovitud laiusega:

JQuery pildi pöörlev liugur

Väikese täiendusega asümmeetriline pildiliugur: piltide kerimisel need kergelt pöörlevad. Elementide väikese nihke tõttu omandab liugur ebatavalise kuju:

JQuery funktsioonide karussell

See pistikprogramm on mõeldud esiletoodud artiklite kuvamiseks avalehel, kuid seda saab kasutada ka mis tahes muu sisu jaoks. See võimaldab kuvada korraga kuni kolme pilti, samas kui ülejäänud jQuery sisukarusselli elemendid on peidetud:

jQuery lõpmatu karussell

See on jQuery pistikprogramm, mis võimaldab kuvada karussellis piiramatul hulgal pilte ja videoid. Erinevalt teistest karussellidest näitab Infinite Carousel üksusi lõputu tsüklina, ilma et oleks vaja navigeerida:

jQuery vedeliku karusselli pistikprogramm

Liquid Carousel on vedelate kujunduste loomiseks mõeldud pistikprogramm. Iga kord, kui jQuery tundliku karusselli konteineri suurust muudetakse, muudetakse kuvatavate üksuste arvu suurust, et see sobiks uue laiusega.

Jquery ms karussell

Tegema karussell puhtas JS-s, nullist ja ennast? Milleks ratast uuesti leiutada, kui on olemas valmislahendused libe / öökull liugurid? Sellel on vähemalt kaks põhjust:

• hariduslikel eesmärkidel
• testülesannete täitmiseks

Tööle kandideerides kasvõi vabale töökohale HTML küljendaja, palutakse teil mitte ainult karusselli paika panna, vaid ka see Js, ilma kolmandate osapoolte teeke kasutamata.

Karusselli näide

Mida JavaScript elementidega teeb?

Muudab sündmuste toimumisel elementide omadusi meetodite abil. Kolm vaala, kes hoiavad kinni JavaScript:

• omadused
• meetodid
• sündmused

Kasutaja käivitab sündmuse ise onclick, kui klõpsate nupul. Programmeerija ülesandeks on riputada klikisündmus soovitud elemendile ja kirjutada brauserile juhised (funktsioon), mis peaks klõpsamisel juhtuma.

HTML-i märgistus karusselli jaoks

Loome piltide jaoks konteineri, sisestame pildid ise ja kaks nuppu - Edasi / tagasi.

CSS-stiilid

#galerii (
laius: 640 pikslit;
veeris: 20px auto;
teksti joondamine: keskel;
}

#galerii .photos img (
laius: 100%;
kuva: puudub;
}

#gallery .photos img: esimene laps (
kuva: plokk;
}

Nupud (
veeris-ülemine: 20px;
}

Karusselli loogika

Kuidas üldse kirjutada Js koodi, kui te ei saa toimuva loogikast aru. Vajutades nuppu Edasi, praegune pilt kaob ja asemele ilmub uus. Vaateväljas on alati üks pilt, aga kus on ülejäänud? Ja ülejäänu peitsime, palusime kõik pildid ekraan: puudub jättes ainult esimese, küsides temalt kuva: plokk, pseudoklassi kaudu esimene laps.

Kuidas veenduda, et iga kord, kui klõpsate nupul Edasi, esimene pilt kadus ja ilmus teine ​​ja teise asemel kolmas. Nõutav, lülita atribuut kuva, vahel mitte ühtegi / blokk, kui klõpsate nupul.

JS kood

Elementide valiku tegemine

Hankige nupud Edasi / tagasi valija abil meetodit kasutades querySelector ja pane need muutujatesse btn_prev / btn_next.

Olgu btn_prev = document.querySelector ("# galerii .buttons .prev");
let btn_next = document.querySelector ("# galerii .buttons .next");

Saame kõik pildid selektori poolt, meetodi kaudu queryValiKõik ja pane need samasse muutujasse pilte.

queryValiKõik- saab hulga elemente, st kõik pildid.

Let images = document.querySelectorAll ("# gallery .photos img");

Massiivis salvestatakse elemendid juba nummerdatuna, alustades nullist. Seetõttu võime neile viidata numbri järgi. Aga kõigepealt loome uue muutuja ja paneme sellesse esimese pildi numbri, millel on omadus kuva: plokk.

Olgu i = 0; // praeguse pildi number ekraanil

Viitame praegusele pildile ja muudame seda stiilides, omadustes kuva.

Pildid [i] .style.display = "puudub"; // peida praegune pilt

Nüüd pole ekraanil ühtegi pilti. Kuidas järgmine pilt sinna paistab? Teame, et järgmise pildi number on alati ühe võrra suurem kui eelmise pildi number.

I ++; // suurendame muutujat i ühe võrra

pildid.pikkus- see on piltide arv, mis võib muutuda, seega pole vaja näidata, et meil on 3 pilti, brauser teab seda juba. Suurendame loendurit i, iga kord ükshaaval, kuni ilmub viimane pilt, ja seejärel sunniviisiliselt, sunnime karusselli uuesti esimesele pildile tagasi pöörduma. Seda nimetatakse loopimiseks.

Näeme ette tingimuse, et kui loendur i, saab rohkem kui olemasolevate piltide arv, siis naaseb praeguse pildi juurde, mille arv on 0.

Kui (i> = pildid.pikkus) (
i = 0; // muutuja i võrdub 0-ga
}

Piltide kerimisel vastupidises järjekorras kuvatakse loendur i, peaks vähenema ühe võrra. Kui muutuja väärtus jääb nullist väiksemaks, siis tuleb sinna panna viimase pildi number.

Btn_prev.onclick = funktsioon () (
pildid [i] .style.display = "puudub";
i = i - 1;
kui ma< 0){
i = pildid.pikkus - 1;
}
pildid [i] .style.display = "blokk";
}

Lahutage kogusummast pildid.pikkus, üks ja saame pildi numbriga 2. See on viimane pilt, kuna arvutus programmeerimisel algab nullist.

Küljendaja ametikoha testi sooritamiseks on vaja enesekindlat arusaamist JS-ist, see on lihtsalt keskendunud küljendajatele.