Krijimi i një rrëshqitësi të thjeshtë duke përdorur jQuery. Krijimi i një rrëshqitësi të bukur të përmbajtjes
Një nga sfidat më të mëdha me të cilat përballet aktualisht qytetërimi perëndimor është se si të shfaqni një sasi të madhe të përmbajtjes në një hapësirë të vogël.
Një zgjidhje efektive është rregullimi i përmbajtjes në blloqe të njëpasnjëshme, duke përdorur atë që njihet në industri (dhe në komunitetin online) si një rrëshqitës përmbajtjeje. Ju mund të mos keni dëgjuar për të, por unë jam i gatshëm të vë bast që patjetër duhet ta keni parë atë.
Për të rifreskuar kujtesën tuaj dhe për t'ju dhënë një ide se çfarë do të krijojmë, më poshtë është një shembull i një rrëshqitësi të përmbajtjes:
Në këtë artikull, unë do t'ju tregoj se si të krijoni rrëshqitësin tuaj të bukur të përmbajtjes që është shumë i ngjashëm me këtë. Përtej krijimit të thjeshtë të një rrëshqitësi të përmbajtjes, do të mësoni shumë rreth mënyrës se si HTML, CSS dhe JavaScript ndërveprojnë për të krijuar një rrëshqitës të përmbajtjes. Në përgjithësi, ka shumë për të pritur, kështu që le të fillojmë.
Pasqyrë se si funksiononPërpara se të zhytemi fillimisht në HTML, CSS dhe JavaScript që do të kërkohen për t'i bërë të gjitha të funksionojnë, le të bëjmë një hap të shpejtë prapa dhe të kuptojmë elementët që përbëjnë rrëshqitësin tonë të përmbajtjes.
Së pari, ne kemi përmbajtjen që duam të vendosim në rrëshqitës:
Përmbajtja mund të jetë çdo gjë. Kjo mund të jetë imazhe, përmbajtje standarde HTML, një kombinim i disa llojeve të përmbajtjes, etj. Nuk ka shumë rëndësi. Nëse përmbajtja jonë mund të mbështillet brenda elementeve DIV, jemi mirë. Thjesht duhet të siguroheni që çdo bllok i vetëm i përmbajtjes të ketë të njëjtën gjerësi dhe lartësi.
Kur shikoni një rrëshqitës, ju shihni vetëm një bllok përmbajtjeje në të njëjtën kohë. Nëse nuk ndërmerren hapa shtesë, përmbajtja e shfaqur njëkohësisht në madhësinë e saj origjinale mund ta kthejë rrëshqitësin në diçka vizualisht jo tërheqëse.
Ne do ta rregullojmë këtë në dy hapa. Së pari, ne do ta mbështjellim përmbajtjen në një enë që ka të njëjtën madhësi si një nga blloqet e përmbajtjes:
Pasi të kemi mbështjellë përmbajtjen në një enë, ne shkurtojmë të gjithë elementët rreth bllokut të përmbajtjes për të siguruar që vetëm një bllok të dalë në të njëjtën kohë:
Hapi tjetër është të bëni të mundur shikimin e pjesës tjetër të përmbajtjes. Kjo mund të bëhet në mënyra të ndryshme. Në këtë artikull ne po përdorim një sërë lidhjesh rrethore në të cilat mund të klikoni:
Gjëja e fundit që duhet të bëni për të funksionuar rrëshqitësin është që çdo lidhje të klikohet. Kjo do të kërkojë disa truke CSS së bashku me disa JavaScript, por asgjë shumë e komplikuar. Dhe kjo, miqtë dhe armiqtë e mi të dashur, është e gjithë përmbledhja e shkurtër e asaj nga e cila përbëhet një rrëshqitës i përmbajtjes.
Në seksionet e ardhshme, ne do të shikojmë kodin aktual HTML, CSS dhe JavaScript që do të fuqizojë rrëshqitësin tonë.
përmbajtjaLe të ndjekim të njëjtat hapa që trajtuam në pasqyrën e përgjithshme dhe të fillojmë me... përmbajtjen. Së pari, ne duhet të krijojmë një pikënisje. Le të krijojmë një dokument HTML bosh dhe të shtojmë kodin e mëposhtëm nga shablloni fillestar HTML5 në të:
Ky shënim nuk bën asgjë tjetër përveç përcaktimit të strukturës së dokumentit, por është hapi i parë që do të na lejojë të shtojmë më tej përmbajtjen tonë. Le ta bëjmë atë në seksionin tjetër.
Përmbajtja (e vërtetë këtë herë)Brenda elementit të trupit, shtoni kodin e mëposhtëm HTML:
Midis etiketave të stilit, shtoni rregullat e mëposhtme të stilit që përcaktojnë formën dhe ngjyrën e përmbajtjes sonë:
#wrapper ( gjerësia: 2200px; pozicioni: relative; majtas: 0px; ) .content ( float: majtas; gjerësia: 550px; lartësia: 350px; hapësira e bardhë: normale; sfondi-përsërit: pa përsëritje; ) #itemOne ( sfond -ngjyra: #ADFF2F imazhi i sfondit: url("http://www.kirupa.com/images/blueSquare.png") #itemTwo (ngjyra e sfondit: #FF7F50; imazhi i sfondit: url("http :/ /www.kirupa.com/images/yellowSquare.png"); ) #itemThree (ngjyra e sfondit: #1E90FF; imazhi i sfondit: url ("http://www.kirupa.com/images/pinkSquare.png") ;) #itemFour (ngjyra e sfondit: #DC143C; imazhi i sfondit: url("http://www.kirupa.com/images/graySquare.png");
Tani kur shikoni faqen, do të shihni diçka të ngjashme me atë që tregohet në pamjen e ekranit:
Do të shihni katër blloqe të mëdha drejtkëndëshe të vendosur mjeshtërisht krah për krah. Në varësi të rezolucionit të ekranit dhe madhësisë së dritares së shfletuesit, mund t'ju duhet të lëvizni pak djathtas ose majtas për të parë të gjithë drejtkëndëshat.
Tani kushtojini pak vëmendje dhe përpiquni të kuptoni pse shihni atë që shihni. Rishikoni shënimin HTML dhe kuptoni elementët që janë në dokumentin tuaj.
Kushtojini vëmendje vlerave të klasës dhe id-së që përdoren në të, sepse ato do të ndjekin rregullat e stilit që keni shtuar. Shikoni rregullat e stilit dhe si ndikon vizualizimi i tyre në rezultat. Tani le t'i përmbledhim të gjitha.
Çfarë kemi bërëNë shënjimin tonë HTML, përmbajtja që shihni përbëhet nga katër elementë div, secili përmban një vlerë të klasës së përmbajtjes. Kjo vlerë e klasës vjen nga rregulli i stilit .content, i cili specifikon madhësinë e çdo blloku: 550 piksel i gjerë dhe 350 piksel i lartë:
Përmbajtja ( notimi: majtas; gjerësia: 550 px; lartësia: 350 px; hapësira e bardhë: normale; përsëritja e sfondit: pa përsëritje; )
Rregulli i stilit të përmbajtjes gjithashtu specifikon se vlera e float është lënë. Si rezultat, elementët div janë të rreshtuar. Gjëja e fundit që deklaron ky rregull stili është vetia e hapësirës së bardhë. Kjo veti përcakton se si do të mbështillet teksti në një paragraf.
E përdora këtë pronë vetëm për lehtësi. Nëse vendosni të shkoni përtej qëllimit të këtij artikulli dhe të shtoni përmbajtje në secilin prej elementeve të div, do të më falënderoni sepse teksti juaj do të mbështillet siç duhet, ose do ta hiqni këtë veçori (ose do ta vendosni në një vlerë tjetër) nëse nuk e bëni nuk dua të shoh të tijën.
Në këtë pikë, elementi ynë div përshtatet dhe rreshtohet siç duhet. Është për të ardhur keq që ai është plotësisht i padukshëm:
Për të zgjidhur këtë problem, ne i caktojmë çdo div një identifikues unik përmes vlerave të id: itemOne , itemTwo , itemThree , anditemFour . Në seksionin e stileve kemi katër rregulla stili që përputhen me këto vlera id:
#itemOne (ngjyra e sfondit: #0099CC; imazhi i sfondit: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (ngjyra e sfondit: #FFCC00; imazhi i sfondit: url("http://www.kirupa.com/images/yellowSquare.png" #itemThree (ngjyra e sfondit: #FF6666; imazhi i sfondit: url("http://www.kirupa.com/images /); pinkSquare.png"); ) #itemFour (ngjyra e sfondit: #E8E8E8; imazhi i sfondit: url ("http://www.kirupa.com/images/graySquare.png"); )
Siç mund ta shihni, këto rregulla stili përcaktojnë vetëm ngjyrën e sfondit dhe imazhin e sfondit për përmbajtjen tonë. Që tani e tutje, divs nuk janë më të padukshëm. Ato shfaqen si drejtkëndësha me ngjyra të ndryshme me përmasa 550 me 350 piksele.
Ne pothuajse kemi mbaruar. Gjëja e fundit që do të shikojmë është div misterioz që përmban mbështjellësin e identitetit:
Ky element mbështjell të gjithë përmbajtjen tonë në një enë. Ky nuk është kontejneri që kisha parasysh në rishikim kur fola për ndërprerjen e të gjithë përmbajtjes rreth blloqeve të përmbajtjes.
Ky enë është krijuar për diçka pak më ndryshe. Fjalë për fjalë thjesht përfundon përmbajtjen në mënyrë që ne të mund t'i shikojmë të gjitha.
Rregulli përkatës i stilit #wrapper përmbush këtë detyrë:
#wrapper (gjerësia: 2200px; pozicioni: relative; majtas: 0px; )
Ky rregull stili së pari përcakton gjerësinë e elementit të mbështjellësit si 2200 piksele. Kjo do të thotë, gjerësia totale e përmbajtjes sonë... të cilën e merrni duke shumëzuar 4 (me numrin e elementeve div) me 550 piksele.
Pozicioni dhe vetitë e majta synojnë të vendosin aftësinë për të lëvizur kontejnerin në çdo vend që duam. Duke vendosur vetinë e pozicionit në relative, ne heqim elementin nga struktura standarde e dokumentit dhe bëjmë të mundur vendosjen e tij kudo duke përdorur vlerat e pikselit në lidhje me vendin ku ndodhet aktualisht.
Meqenëse blloqet tona të përmbajtjes div janë fëmijë të kësaj div, ato tërhiqen aty ku vendoset div prind. Siç mund ta imagjinoni, kjo është shumë e përshtatshme!
Shkurtimi i përmbajtjesNë pjesën e mëparshme, ne u kujdesëm për marrjen e blloqeve të përmbajtjes që do të dalin. Gjëja tjetër që do të bëjmë është të shkurtojmë përmbajtjen tonë në mënyrë që vetëm një bllok rrëshqitës të jetë i dukshëm në çdo kohë të caktuar.
Këtu na duhet kontejneri kryesor. Mbështillni të gjithë elementët div të kodit tuaj HTML në një div me id contentContainer:
Thjesht shtoni dy rreshta të rinj dhe, nëse dëshironi, dhëmbëza rreshtash, të cilat thjesht synojnë të paraqesin kodin HTML në mënyrë të përshtatshme.
Tani, nëse shikoni përmbajtjen tonë të mbështjellë (përsëri), nuk do të shihni asgjë të re. Thjesht paketimi i elementeve në një div tjetër nuk bën asgjë kuptimplotë, aq më pak asgjë që duam të bëjmë për të shkurtuar përmbajtjen.
Për të shtuar këtë veprim kuptimplotë, krijoni rregullin e mëposhtëm të stilit #contentContainer:
#contentContainer ( gjerësia: 550 pikselë; lartësia: 350 pikselë; kufiri: 5 px e zezë, e ngurtë; tejmbushja: e fshehur; )
Vini re se po e vendosni madhësinë e elementit contentContainer në 550 piksele me 350 piksele. Kjo është, saktësisht e njëjta madhësi si secili prej blloqeve të përmbajtjes. Për ta bërë rrëshqitësin të dallohet pak, vendosëm një kornizë të zezë me gjerësi 5 piksele.
Gjëja e fundit që bëjmë është të shkurtojmë përmbajtjen duke vendosur veçorinë overflow në hidden . Kjo është për të fshehur gjithçka jashtë elementit contentContainer.
Të gjitha së bashku na japin foton e mëposhtme në shfletues:
Ju lutemi vini re se vetëm përmbajtja e bllokut tuaj të parë është e dukshme tani. Pjesa tjetër e përmbajtjes ekziston ende, thjesht tani është e fshehur për shkak të prerjes sonë nëpërmjet vlerës së fshehur për vetinë e tejmbushjes.
Lidhje navigimiKështu arritëm tek ata! Po i afrohemi të paturit një rrëshqitës plotësisht funksional. Në këtë seksion, ne do të fokusohemi te lidhjet e navigimit—elementet që klikoni për të parë blloqe të tjera të përmbajtjes.
Këto lidhje nuk kanë të bëjnë fare me përmbajtjen tonë Container ose ndonjë pjesë tjetër të HTML që kemi tashmë. Ju duhet të shtoni linjat e theksuara në kodin HTML që kemi tashmë (por mbi etiketën e skriptit):
Le t'i hedhim një vështrim të shpejtë kodit HTML që sapo keni shtuar. Së pari, ne kemi një div me një ID të navLinks që përshkruan një listë të pa renditur. Vetë lidhjet paraqiten si artikuj të listës.
Çdo element i listës përmban një vlerë të klasës së artikullit Links si dhe një atribut të personalizuar të të dhënave* të quajtur data-pos. Ne do t'i kthehemi këtij atributi pak më vonë, por tani për tani vetëm vini re se ekziston.
Duhet të stilojmë kodin HTML që sapo shtuam. Në seksionin e stileve, shtoni rregullat e mëposhtme:
#navLinks ( rreshtimi i tekstit: në qendër; gjerësia: 550 px; ) #navLinks ul ( margjina: 0 px; mbushja: 0 px; ekrani: blloku inline; margjina-lart: 6 px; ) #navLinks ul li ( float: majtas; tekst- align: në qendër: ngjyra e sfondit: #CCCCCC: #FFFF00; skicë-gjerësia: 7px ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF)
Wow, aq shumë CSS. Edhe pse ka shumë kod, nuk ka asgjë vërtet unike ose interesante në të. Një pjesë e kodit CSS krijon një menu horizontale me lidhje të shfaqura pranë njëri-tjetrit.
Pjesa tjetër e kodit përcakton pamjen e secilës lidhje, si dhe theksimin përkatës të saj kur rri pezull.
Ende ia vlen të ndalemi në një pikë më në detaje.
Kjo është për shkak të dy rregullave të stilimit që zbatohen për klasën aktive:
#navLinks ul li.active ( ngjyra e sfondit: #333333; ngjyra: #FFFFFF; gjerësia e përvijimit: 7 px; ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF; )
Nëse ju kujtohet, nuk kishte asnjë element në kodin tonë HTML që kishte vlerën e klasës aktive . Pavarësisht, këto rregulla stilimi do të zbatohen përsëri sepse klasa aktive shtohet në një nga lidhjet tona në mënyrë dinamike.
Nëse e keni të vështirë t'i kuptoni të gjitha këto tani, mos u shqetësoni, ne do ta shqyrtojmë në detaje shumë shpejt.
Për momentin, rrëshqitësi ynë duket kështu:
Nëse rrëshqitësi juaj nuk duket si duhet, atëherë ka shumë mundësi të keni bërë një gabim shkrimi... ose diçka tjetër. Kështu ndodhi?
Krijimi i vetë rrëshqitësitMirë, tani për tani kemi diçka që duket shumë e ngjashme me një rrëshqitës pune. Megjithatë, kur klikoni ndonjë nga lidhjet, absolutisht asgjë nuk ndodh.
Le të krijojmë tani një rrëshqitës funksional, por së pari do të shtojmë disa JavaScript dhe disa elementë të lezetshëm ... domethënë disa tranzicione të bukura CSS.
Shtimi i JavaScriptBrenda etiketës së skriptit, shtoni linjat e mëposhtme të kodit JavaScript:
// thjesht duke kërkuar DOM-in... sikur po i kërkojmë leje shefit! var links = dokument.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink ofron një etiketë për elementin aktiv var activeLink = 0; // konfiguroni gjurmimin e ngjarjeve për (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
Gjithçka që duhet të bëjmë është të sigurojmë një tranzicion të qetë në vend të një ndryshimi të papritur të rrëshqitjes.
Shtimi i një tranzicioniAktualisht kemi një rrëshqitës të përmbajtjes që ende nuk e lëviz përmbajtjen pa probleme. Në vend të kësaj, rrëshqitjet kërcejnë befas nga njëra në tjetrën. Për ta bërë përmbajtjen të lëvizë pa probleme, le të përdorim një tranzicion CSS. Le të shtojmë një nga kalimet e mundshme në rrëshqitësin tonë.
Gjeni rregullin e stilit #wrapper dhe shtoni një rresht në të:
Rreshti që keni shtuar përcakton tranzicionin. Vetia e specifikuar në të specifikon se kalimi duhet të ndodhë kur vetia e majtë ndryshon. Tranzicioni ynë do të ndodhë për 0,5 sekonda dhe do të përdorë funksionin e kohës për të përshpejtuar procesin në fillim të tranzicionit dhe për të ngadalësuar në fund.
Meqenëse vetia e tranzicionit është ende duke pësuar disa ndryshime në W3C, do t'ju duhet të përdorni prefikse për të siguruar që çdo shfletues modern mund të aplikojë tranzicionin. Nëse nuk dëshironi të merreni me këtë, shtoni skriptin e mëposhtëm pak përpara etiketës së skriptit:
Jo, ky skenar nuk bën asgjë keqdashëse. Ky është një version i hostuar i bibliotekës Leah Veru pa prefiks. Në vend që të mësoni shumë për mënyrën se si funksionojnë rrëshqitësit, ju gjithashtu mund të shkarkoni skriptin e saj, ta ngarkoni atë në serverin tuaj dhe të lidheni me versionin tuaj.
Gjithsesi, nëse e shikoni dokumentin tani, duhet të keni një rrëshqitës të përmbajtjes që funksionon që shfaq pa probleme përmbajtjen kur klikoni në ndonjë nga lidhjet e navigimit. Kjo duhet të jetë identike me atë që keni parë në shembullin e postuar në fillim të këtij artikulli.
Më në fund!!!
Kodi i analizimit (dhe gjithçka tjetër!)Tani që kemi një rrëshqitës të përmbajtjes që funksionon, le të përpiqemi të kuptojmë që në fillim se si kodi i lidh të gjitha së bashku.
Çfarë po ndodh realishtPasi të ngarkohet rrëshqitësi i përmbajtjes, shihni që shfaqet blloku i parë i përmbajtjes. Pjesa tjetër e përmbajtjes është prerë dhe e fshehur nga pamja:
Duke klikuar çdo lidhje shfaqet blloku përkatës i përmbajtjes. Rrëshqitësi e di se sa përmbajtje duhet të shfaqet në zonën e dukshme falë lidhjes së ngushtë midis secilës lidhje navigimi dhe pozicionit të pikselit të çdo blloku të përmbajtjes.
Le të përpiqemi ta kuptojmë këtë lidhje. Ka disa gjëra që ne i dimë. Ne e dimë se secili prej blloqeve tona të përmbajtjes është 550 piksel i gjerë. Ne gjithashtu e dimë se blloku ynë i parë i përmbajtjes është vendosur horizontalisht në 0 pixel.
Si e dimë këtë? Të gjitha blloqet tona të përmbajtjes janë mbështjellë brenda një elementi mbështjellës që mbyll të gjithë përmbajtjen tonë dhe skaji i majtë i elementit mbështjellës ka një pozicion prej 0 pikselësh:
Kjo është deklaruar në rregullin e stilit #wrapper. Nga ky rregull stili, ne gjithashtu e dimë se të gjitha blloqet e përmbajtjes zhvendosen në të majtë dhe vendosen në një rresht pranë njëri-tjetrit.
Duke e ditur këtë, ne mund të llogarisim pozicionet për të gjitha blloqet e përmbajtjes si më poshtë:
Blloku i parë ndodhet në 0 piksele. Gjerësia e bllokut të parë të përmbajtjes është pozicioni i bllokut të dytë. Kjo është 550 piksele. Çdo bllok pasues ka një pozicion 550 piksel më të madh se ai i mëparshmi.
Meqenëse e dimë pozicionin e saktë të pikselit të çdo blloku të përmbajtjes, mund ta përdorim këtë informacion për të udhëzuar rrëshqitësin e përmbajtjes që të lëvizë elementin e mbështjellësit në vendndodhjen e dëshiruar në mënyrë që pjesa e përmbajtjes që duam të jetë e dukshme.
Atributi data-pos!E shkëlqyeshme, tani ne i dimë pozicionet e të gjitha blloqeve të përmbajtjes. Ajo që nuk kemi parë ende është se si njohja e pozicionit të pikselit të një blloku të përmbajtjes do të na ndihmojë të shfaqim bllokun e dëshiruar në dritaren e rrëshqitësit.
Si mund të specifikojmë që kur klikohet një lidhje, duhet të shfaqet një bllok i caktuar i përmbajtjes? Vetëm. Çdo lidhje përmban pozicionin e saktë (në pixel) të bllokut të përmbajtjes që i korrespondon:
Vini re se atributi data-pos tregon në secilën prej lidhjeve, vlerën e secilit prej atributeve data-pos. Ato janë të barabarta me vlerën negative të pozicionit origjinal horizontal të secilit prej blloqeve të përmbajtjes.
Kur klikojmë në një lidhje, përdoret JavaScript, i cili lexon atributin data-pos të lidhur me atë lidhje dhe më pas kalon vlerën e pozicionit të pikselit të elementit tonë të mbështjellësit në vlerën që është lexuar nga atributi.
Për shembull, ja çfarë ndodh pasi klikoni lidhjen e tretë:
Lidhja e tretë ka një vlerë të të dhënave-pos prej 1100 piksele. Kjo korrespondon me sa pikselë do të duhet të zhvendoset guaska e kontejnerit në mënyrë që blloku i tretë i përmbajtjes të shfaqet në zonën e dukshme. Klikimi i ndonjë lidhjeje tjetër do të vendosë vetinë e elementit të guaskës në vlerën që përmbahet në atributin data-pos të asaj lidhjeje.
Në rregull, kështu që ne kemi mbuluar lidhjen midis lidhjeve dhe pozicionimit të përmbajtjes për të cilën fola më herët. Tani gjithçka që duhet të bëjmë është të shikojmë JavaScript, i cili do të transformojë gjithçka që kam shkruar në këtë seksion në diçka që shfletuesi mund ta kuptojë.
Gjithçka ka të bëjë me JavaScriptMeqenëse tani keni një kuptim konceptual se si funksionon gjithçka brenda rrëshqitësit tonë të përmbajtjes, le të shohim JavaScript, i cili zbaton gjithçka që dini. Siç bëj në të gjithë artikujt e mi, le të zbërthejmë çdo rresht të JavaScript dhe të shohim se çfarë bën për rrëshqitësin tonë.
Le të fillojmë nga lart:
var links = dokument.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");
Variabla e lidhjeve merr grupin e të gjithë elementëve të dokumentit tonë që kanë një vlerë të klasës itemLinks. Këta elementë janë artikuj të listës që veprojnë si lidhje lundrimi. Variabla wrapper është shumë e ngjashme me lidhjet. Ai pranon një tregues për një element me mbështjellës identifikues.
querySelector dhe querySelectorAllVini re se si po pyes DOM-in. Në vend që të përdor diçka si getElementsByClassName ose getElementById, unë përdor funksionet e reja querySelectorAll dhe querySelector.
Do të shihni që ne do t'i përdorim të dyja këto variabla më vonë, kështu që mbani në mend ato.
var activeLink = 0;
Variabla activeLink përdoret për të ruajtur pozicionin e përmbajtjes që shfaqet aktualisht. Do ta kuptoni më mirë kuptimin e kësaj variabli kur ta shpjegoj në veprim pak më vonë.
Seti tjetër i rreshtave është një cikli for:
// konfigurimi i gjurmimit të ngjarjeve për (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }
Këtu ne përsërisim mbi çdo element të variablave të lidhjeve dhe i caktojmë një gjurmim të ngjarjeve. Ky element gjurmues i ngjarjes do të thërrasë funksionin setClickedItem kur të jetë kapur një ngjarje klikimi.
Linja e mëposhtme shkakton një sërë ndryshimesh:
// vendosja e elementit të parë si lidhje aktive.classList.add("aktive");
Ne shtojmë vlerën e klasës aktive në elementin e parë të lidhjes së navigimit. Kjo bëhet duke kaluar vlerën ActiveLink në grupin e lidhjeve. Meqenëse activeLink është 0, grupi normalisht do të merrte elementin e parë dhe, duke përdorur API-në classList, do të shtonte vlerën e klasës aktive.
Pasi të ekzekutohet kjo linjë kodi, mbani mend kur i kushtuam vëmendje rregullave të stilit të mëposhtëm?
Epo, tani këto rregulla stili hyjnë në lojë dhe ndihmojnë në dallimin e lidhjes aktive të navigimit nga lista e lidhjeve të tjera joaktive. Këto rregulla stili do t'i kthehemi pak më vonë dhe do t'i shikojmë më në detaje.
Gjëja tjetër që do të shikojmë është mbajtësi i ngjarjeve setClickedItem, i cili thirret kur klikohet ndonjë nga lidhjet:
funksioni setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Ky funksion fillimisht e kalon gjendjen e të gjitha lidhjeve tuaja në joaktive duke përdorur thirrjen removeActiveLinks. Ne do ta shikojmë këtë veçori pak më vonë.
Gjëja tjetër e rëndësishme që bën ky funksion është se ndryshon vlerën e vetive ID të artikullit të zgjedhur në activeLink. Kjo siguron që ActiveLink të tregojë gjithmonë numrin që korrespondon me bllokun e përmbajtjes që shfaqet aktualisht në rrëshqitës.
Pas përfundimit të këtyre dy hapave (më tepër të mërzitshëm), ky funksion i kalon një referencë elementit të zgjedhur në funksionin changePosition. E cila nga ana tjetër bën disa gjëra të mahnitshme, për të cilat do të flas në paragrafin tjetër.
Ja ku ndodhin ndryshimet interesante! Le të hidhemi pak përpara dhe të shohim funksionin e ndryshimit të pozicionit:
// Trajtuesi ndryshon pozicionin e rrëshqitësit pasi jemi të bindur // se lidhja që na nevojitet është caktuar si aktive. funksioni changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozicion; )
Ky funksion bën dy gjëra:
I. Ndryshon shfaqjen vizuale të lidhjes së zgjedhur për të treguar që ajo është aktualisht aktive.
II. Vendos pozicionin e elementit të guaskës.
Le t'i shikojmë këto dy gjëra më në detaje.
Ndrysho shfaqjen vizuale të lidhjes së zgjedhur/aktivePër ta bërë më të qartë për ju se për çfarë po flisja më parë, lidhjet tuaja të navigimit mund të jenë në një nga dy gjendjet. Këto gjendje synojnë të lejojnë përdoruesin të shohë se cili bllok i përmbajtjes është aktualisht aktiv:
Në këtë figurë, mund të përcaktoni menjëherë që blloku i përmbajtjes që korrespondon me lidhjen e katërt është aktualisht aktiv dhe tre lidhjet e para janë joaktive.
Ky ndryshim vizual realizohet duke shtuar dhe hequr klasat CSS. Klasa aktive shtohet në lidhjen aktive. Të gjitha lidhjet që nuk janë aktive nuk përmbajnë një vlerë të klasës aktive. Do të kuptoni se si funksionon kjo kur të shikojmë funksionin removeActiveLinks.
Në çdo rast, ju do të mbani mend se më herët kemi quajtur dy rregullat e mëposhtme të stilit:
#navLinks ul li.active ( ngjyra e sfondit: #333333; ngjyra: #FFFFFF; gjerësia e përvijimit: 7 px; ) #navLinks ul li.active:hover (ngjyra e sfondit: #484848; ngjyra: #FFFFFF; )
Në funksionin tonë setClickedItem (i njohur edhe si funksioni që do të thirret kur klikohet një lidhje), ne fillimisht thërrasim removeActiveLinks:
funksioni setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Ky funksion është përgjegjës për heqjen e klasës aktive për të gjitha lidhjet e navigimit:
funksioni removeActiveLinks() ( për (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
Mund ta mendoni si një buton të rivendosjes globale. Ai përsëritet përmes lidhjeve të navigimit që ruhen në variablin e lidhjeve dhe heq vlerën e klasës aktive duke përdorur classList.remove() . Vetëm mbani në mend se nëse ndonjë nga lidhjet e navigimit përmban një vlerë të klasës aktive, mirë... nuk do të ketë më të tilla.
Kështu, ne shikuam se si të hiqni klasën aktive nga të gjitha lidhjet tuaja. Shtimi i një klase me radhë është shumë i thjeshtë:
funksioni removeActiveLinks() ( për (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
Të njëjtën ClassList që kemi përdorur më parë për të hequr vlerën e klasës aktive, ne përdorim për të shtuar vlerat e klasës aktive përsëri në lidhjen e zgjedhur. Kjo lidhje e zgjedhur merr një argument lidhjeje që i transmetohet.
Vendosja e pozicionit të guaskësNe pothuajse kemi mbaruar! Pas gjithë këtyre hapave, më në fund arrijmë te funksioni changePosition, i cili në fakt vendos pozicionin e elementit të lëkurës rrëshqitës dhe shfaq bllokun e përmbajtjes që korrespondon me lidhjen që zgjidhni.
Le të shohim fragmentin e mëposhtëm:
funksioni changePosition(link) (link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozicion; )
Variabli i pozicionit ruan vlerën e atributit data-pos të lidhjes që kemi klikuar. Pasi të kemi vlerën e atributit data-pos, e vendosim pronën e majtë CSS të elementit wrapper në të njëjtën vlerë.
Si lidhet kjo me zbatimin e një efekti rrëshqitës? Ju kujtohet që pak kohë më parë i shtuam një rregull stilit #wrapper?
#mbështjellës (gjerësia: 2200 pikselë; pozicioni: relative; majtas: 0 px; tranzicioni: majtas 0,5s lehtësi për të hyrë në dalje; )
Vini re se ne kemi përcaktuar që tranzicioni të hyjë në fuqi kur vetia e majtë të ndryshojë. Mendoni se çfarë bën JavaScript-i ynë? Përcakton pronën e majtë! Tranzicioni CSS zbulon këtë ndryshim dhe shkakton lëvizjen e përmbajtjes. Gjithçka që ju nevojitet për ta bërë këtë të funksionojë është të shtoni një rresht JavaScript.
Nuk e di për ju, por për mua është thjesht e mahnitshme. Kjo është diçka që nuk mund ta imagjinonim disa vite më parë, kur na u desh të bënim shumë përpjekje dhe të shkruanim kodin për të trajtuar efektin rrëshqitës. Kjo është ajo që e bën të bukur rrëshqitësin tonë të përmbajtjes.
Ashtu si kjo, ne sapo krijuam një rrëshqitës të përmbajtjes nga e para dhe (më e rëndësishmja) mësuam se si funksionon.
Përmirësimi i rrëshqitësit të përmbajtjesRrëshqitësi i përmbajtjes që sapo krijuam është mjaft i lezetshëm, por ne mund ta bëjmë atë edhe më të freskët. Në këtë seksion, ne do të shikojmë dy përmirësime që mund t'ju duken shumë të dobishme. Gjatë rrugës, do të mësojmë disa truke të reja JavaScript dhe CSS. Do të jetë, siç thonë të rinjtë tani: "Po qaj!"
Lëvizja me transformimin translate3dAktualisht, rrëshqitjet tona lëvizin duke ndryshuar vlerën e veçorisë së majtë CSS që aplikohet në elementin div të mbështjellësit. Duke përdorur veçorinë e majtë ne e bëjmë rrëshqitësin të funksionojë, por kjo metodë ka të meta serioze. Ju nuk mund të përdorni përshpejtimin e harduerit për të siguruar tranzicion të qetë të rrëshqitjes.
Kjo është veçanërisht e vërtetë për pajisjet celulare që shpesh përdorin pajisje me shpejtësi të ulët të lidhjes në internet, dhe këtu mund të jenë veçanërisht të dukshme ndryshimet e ndërprera, të rrëshqitshme të rrëshqitjes.
Kjo mund të rregullohet duke përdorur funksionin e transformimit translate3d, i cili do të bëjë që rrëshqitjet të lëvizin pa probleme. Ky funksion merr vlerat x, y dhe z si argumente, dhe ndryshimi i ndonjë prej këtyre vlerave do të ndryshojë pozicionin e elementit të synuar.
Një veçori e veçantë e këtij funksioni është se si rezultat i përdorimit të tij, hardueri i shfletuesit përshpejton ndryshimin e pozicionit. Çfarë po presim?
Gjëja e parë që duhet të bëjmë është të ndryshojmë rregullin e stilit #wrapper. Zëvendësoni deklaratën e pozicionit dhe të pronave të lëna me kodin e mëposhtëm:
Kështu, transformimi vendos pozicionin fillestar të elementit të guaskës.
Faza e parë: Shtimi i elementeve ndihmëseNë hapin e parë, ne shtojmë kodin ndihmës të mëposhtëm poshtë kodit kryesor që kemi aktualisht:
// // Përdorimi i transformimeve // var transforms = ["transformim", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transformon); // menaxho funksionin e prefikseve të shitësit getSupportedPropertyName(properties) ( për (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }
Ky kod do të na ndihmojë të vendosim vetinë e transformimit duke përdorur prefikset e shitësit në mënyrë që të mbështetet nga sa më shumë shfletues të jetë e mundur.
Në këtë artikull nuk do t'i shpjegoj këto rreshta. E vetmja gjë që duhet të dini është se i gjithë ky kod ndihmon në vendosjen e Property për të transformuar, msTransform, mozTransform ose oTransform. Në varësi të moshës së shfletuesit që përdorni, do të përdoret një nga këto vlera.
Faza e dytë: prezantimi i Ahoy!Në funksionin changePosition, gjeni linjat e mëposhtme të kodit:
funksioni changePosition(link) ( var position = link.getAttribute ("data-pos"); wrapper.style.left = pozicion; link.classList.add ("aktive"); )
Zëvendësojini ato me kodin e mëposhtëm:
funksioni changePosition(link) ( var position = link.getAttribute ("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}
Ky kod bën gjëra mjaft të thjeshta. Ndryshorja translateValue krijon një paraqitje të bazuar në varg të funksionit translate3d në të cilin pjesa X është e mbushur me vlerën e ndryshores së pozicionit. Pasi të jetë krijuar ky varg, gjithçka që duhet të bëjmë është ta kalojmë te objekti i stilit të elementit mbështjellës.
Vini re se përkufizimi i vetive të stilit përkatës trajtohet nga ndryshorja transformProperty, të cilën e pamë pak më herët.
Nëse tani e shikoni dokumentin, do të shihni se blloqet e përmbajtjes në rrëshqitës po kërcejnë nga një vend në tjetrin.
Natyrisht, kjo nuk është ajo që prisni të shihni. Çfarë ndodhi me lëvizjen e qetë? Përgjigja është se po na mungon edhe një ndryshim. Për fat të mirë, kjo është e lehtë për t'u rregulluar. Nëse kthehemi te rregulli i stilit #wrapper, do të vërejmë se deklarata e tranzicionit duket kështu:
#wrapper ( gjerësia: 2200 px; transformimi: translate3d (0, 0, 0); tranzicioni: majtas 0,5s ease-in-out; )
Tranzicioni ynë gjurmon ndryshimet në pronën e majtë. Ne nuk e përdorim më këtë pronë, kështu që tranzicioni ynë nuk mund të fillojë të funksionojë. Për të korrigjuar këtë padrejtësi të tmerrshme, zëvendësoni fjalën kyçe të pronës së majtë brenda deklaratës së tranzicionit me fjalën kyçe të pronës transformuese:
#wrapper ( gjerësia: 2200 px; transformimi: translate3d (0, 0, 0); tranzicioni: transformimi .5s ease-in-out; )
Pasi të bëni këto ndryshime, rrëshqitësi ynë do të funksionojë përsëri në të njëjtën mënyrë si më parë.
I vetmi ndryshim është se ndryshimi i rrëshqitjeve tani përdor përshpejtimin e harduerit dhe tani do të ndodhë më pa probleme dhe do të mbështetet në më shumë pajisje.
Ndryshimi automatik i rrëshqitjes në intervale prej disa sekondashAktualisht, sllajdet tona ndryshojnë vetëm kur klikojmë në një nga lidhjet e navigimit. Por kjo nuk është mënyra e vetme se si funksionon rrëshqitësi. Shumë rrëshqitës të përmbajtjes lëvizin automatikisht nëpër përmbajtje çdo disa sekonda, dhe ekziston gjithashtu opsioni për të kaluar në një seksion specifik duke përdorur lidhjet e navigimit.
Ju mund të shihni një shembull të një rrëshqitësi të tillë të përmbajtjes më poshtë:
Po, ky është rrëshqitësi ynë i vjetër me disa ndryshime të vogla për të lejuar që përmbajtja të lëvizë automatikisht brenda kontejnerit. Mendoni se çfarë do të bëjmë më pas?
Le t'i bëjmë rrëshqitjet të lëvizin automatikisht!Funksioni setInterval do të na ndihmojë me këtë. Detyra kryesore e këtij funksioni është të sigurojë që kodi të ekzekutohet në intervale të rregullta:
window.setInterval(funksionToCall, vonesë);
Çdo disa sekonda (ose çfarëdo që vendosni si vlerë intervali), funksioni setInterval i thotë rrëshqitësit tonë të kalojë në bllokun tjetër të përmbajtjes.
Kur përmbajtja përfundon, rrëshqitësi kalon përmes një cikli në fillim të përmbajtjes dhe fillon nga e para. Kjo bëhet mjaft lehtë. E tëra çfarë ju duhet të bëni është të dini disa truke dhe të keni një kuptim të qartë se si funksionon rrëshqitësi juaj i përmbajtjes.
Ndryshimi i parë që duhet të bëjmë është të shtojmë kodin shtesë të nevojshëm për të përfunduar punën. Në fund të kodit që tashmë keni, shtoni rreshtat e mëposhtëm:
// // Kodi për ndryshimin automatik të sllajdeve // var timeoutID; funksioni startTimer() ( // prisni 2 sekonda përpara se të telefononi goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funksioni goToNextItem() ( removeActiveLinks(); nëse (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
Ne do të shohim se çfarë do të thotë i gjithë ky kod së shpejti. Tani shtoni të gjitha. Pasi ta keni bërë këtë, shikoni rrëshqitësin e përmbajtjes në shfletuesin tuaj. Do të shihni që rrëshqitjet e përmbajtjes ndryshojnë në kontejner çdo dy sekonda.
Na mbetet vetëm një ndryshim i rëndësishëm për të bërë. Aktualisht, rrëshqitjet rrotullohen çdo dy sekonda, pavarësisht nëse klikoni lidhjen e navigimit apo jo.
Mënyra e duhur për ta bërë këtë është të rivendosni kohëmatësin në 0 kur klikohet një nga lidhjet Për të bërë këtë ndryshim, shtoni rreshtin e mëposhtëm të kodit në mbajtësin e ngjarjeve setClickedItem.
Më pas, rrëshqitësi i përmbajtjes do të sillet siç pritej kur të ndërhyni dhe klikoni në lidhjen e lundrimit. Hora!
Shpjegimi i ndryshimit automatik të rrëshqitjesPra, na mbetet vetëm një gjë për të kuptuar. Le t'i hedhim një vështrim të shpejtë kodit që sapo shtuam dhe të kuptojmë pse bën atë që bën.
Le të fillojmë me funksionin goToNextItem/span>:
funksioni goToNextItem() ( removeActiveLinks(); nëse (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
Kjo veçori është përgjegjëse për të mbajtur gjurmët e përmbajtjes që shfaqet aktualisht dhe çfarë do ta ndjekë atë. Për të kuptuar më mirë se çfarë po ndodh, hidhini një sy imazhit më poshtë:
Variabli ActiveLink tregon pozicionin e bllokut të përmbajtjes së shfaqur aktualisht. Çdo pjesë e informacionit shoqërohet me një element përkatës brenda grupit të lidhjeve.
Numri i përgjithshëm i elementeve brenda grupit të lidhjeve mund të vendoset nëpërmjet vetive gjatësi. Tani le të kthehemi te kodi ynë.
Deklarata if e funksionit goToNextItem thjesht kontrollon për të parë nëse ka mbetur ende përmbajtje ose nëse rrëshqitësi duhet të kthehet në fillim:
nëse (Lidhja aktive< links.length - 1) { activeLink++; } else { activeLink = 0; }
Nëse shikoni nga afër diagramin dhe kodin, do ta kuptoni logjikën. Në thelb, pasi të kemi vlerën e saktë për activeLink, gjithçka tjetër në rrëshqitësin tonë do të funksionojë thjesht si magji.
Vetë magjia kryhet duke përdorur dy linjat e mëposhtme të ofruara nga funksioni changePosition, i cili nga ana tjetër thirret me një tregues në bllokun tjetër të përmbajtjes për t'u nxjerrë:
var newLink = lidhje; ndryshimi i pozicionit (Lidhja e re);
Në këtë pikë, mënyra se si përpunohet kodi ynë nuk ndryshon nga mënyra se si është përpunuar kur lidhja është klikuar manualisht.
Pra... ne shikuam kodin në funksionin goToNextItem për të kaluar te pjesa tjetër e përmbajtjes. Për të thirrur këtë rrëshqitje, linjat e mëposhtme përdoren automatikisht:
var timeout ID; funksioni startTimer() ( // prisni 2 sekonda përpara se të telefononi goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )
Për të filluar, përdoret funksioni startTimer. Ky funksion përmban një thirrje setInterval e cila siguron që funksioni goToNextItem thirret çdo 2 sekonda (ose 2000 milisekonda).
Thjesht shtimi i këtij funksioni (dhe thirrja e tij) do të bëjë që rrëshqitësi juaj i përmbajtjes të fillojë të lëvizë automatikisht blloqet e përmbajtjes.
E vetmja gjë që mbetet për të kuptuar është se si kohëmatësi (që unë e quajta setInterval) rivendoset kur klikoni manualisht lidhjen. Për t'u marrë me këtë, përdoret kodi i mbetur që kemi.
Metoda me të cilën rivendoset kohëmatësi është duke ndaluar funksionin setInterval dhe më pas duke e rifilluar atë. Mënyra se si bëhet kjo mund të jetë pak e ndërlikuar për të kuptuar.
Ne ruajmë identifikuesin e funksionit setInterval që thirret dhe më pas përdorim të njëjtin identifikues për të ndaluar më vonë thirrjen e të njëjtit funksion setInterval. Më lejoni të sqaroj.
Ne e ruajmë këtë identifikues në ndryshoren timeoutID dhe e inicializojmë atë në thirrjen startTimer, dhe është e përshtatshme të përdorim të njëjtin identifikues brenda funksionit resetTimer:
funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )
Funksioni clearInterval merr ID-në (nëpërmjet timeoutID ) të funksionit setInterval që duam të ndalojmë.
Pasi të kemi ndaluar kohëmatësin brenda funksionit resetTimer, ne thërrasim startTimer dhe e nisim nga e para:
funksioni resetTimer() (dritare.clearInterval(timeoutID); startTimer(); )
Logjika është e thjeshtë. Kohëmatësi ndalon kur zgjidhni manualisht se cilin bllok të përmbajtjes do të shfaqet në rrëshqitës:
funksioni setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = klikuarLink.itemID; changePosition(clickedLink); )
Pasi të zgjidhni një bllok të ri të përmbajtjes, rrëshqitësi ndalon për dy sekonda përpara se të kalojë në bllokun tjetër. E gjithë kjo monitorohet nga funksionet startTimer dhe resetTimer.
konkluzioniKjo është e gjitha, ne kemi parë se si të krijojmë një rrëshqitës të bukur të përmbajtjes duke përdorur vetëm
HTML CSSdhe JavaScript. Mësuat gjithashtu se si të vendosni disa ndryshime për të përmirësuar performancën dhe për të lejuar ndryshime automatike të bllokut të përmbajtjes.
Ndërsa vetë rrëshqitësi nuk përcaktohet nga shumë kode, kuptimi i koncepteve pas tij ndoshta do t'ju marrë pak kohë. Në artikull kam përfshirë lidhje me burime të tjera që mbulojnë tema që i kam prekur vetëm sipërfaqësisht. Mund t'i lexoni kur të keni kohë për ta bërë këtë.
Rrëshqitësit e përmbajtjes vijnë në forma dhe madhësi të ndryshme. Disa përbëhen nga disa nivele, ku përmbajtja mund të ndryshohet si vertikalisht ashtu edhe horizontalisht.
Disa rrëshqitës përmbajnë përmbajtje të përafruar vertikalisht me blloqe të vendosura mbi njëri-tjetrin. Nëse jeni mjaft proaktiv dhe dëshironi të përdorni CSS në vend të një tranzicioni
Ndonjëherë më duhet të zgjidh problemet që lidhen me frontin, pavarësisht se nuk më pëlqen :)
Në fakt, ju mund të vlerësoni qëndrimin tim ndaj gjithçkaje që lidhet me "të bukurën" nga dizajni i kësaj faqeje, e cila u zhvillua vetëm nga unë :)
Sidoqoftë, relativisht kohët e fundit u përballa me nevojën për të zbatuar një rrëshqitës në JavaScript, dhe kjo duhej të bëhej pa ndonjë bibliotekë të gatshme dhe madje edhe pa jQuery të preferuar të të gjithëve.
Kjo nevojë u shkaktua nga fakti se rezultati duhet të ishte një skript JS që do të lidhej me sitin përmes një shërbimi të palës së tretë. Rrjedhimisht, karuselet e gatshme në JavaScript nuk nevojiteshin më, sepse Për t'i integruar ato, ishte e nevojshme të shtohej një lidhje bibliotekë në kodin HTML të faqes nëpërmjet një etikete skripti dhe t'i kopjoni vetë skedarët ose në server ose t'i tërheqni ato nëpërmjet cdn, por kjo do të kërkonte sërish redaktim të kodit të burimit.
Si të krijoni një rrëshqitës JavaScript: fillimiSot mendoj se të gjithë ata që u gjendën në një situatë të ngjashme filluan të kërkojnë zhvillimet ekzistuese, sepse... kur detyra e krijimit të një karuseli JS është brenda fushës së punës, ajo duhet të bëhet gjithmonë sa më shpejt që të jetë e mundur. Dhe në kushte të tilla, askush nuk do t'ju lejojë të uleni dhe të shpikni biçikletat tuaja.
Klientëve gjithmonë nuk u intereson se si shkruhet kodi, cila është arkitektura e tij, gjëja kryesore është të shohësh rezultatin!
Si rezultat, siç e kuptoni, përpara se të shkruaj një rrëshqitës në JavaScript pa jQuery, vendosa të gjej një të gatshme dhe ta modifikoj atë për t'iu përshtatur nevojave të mia. Pse nuk ka jQuery? Po, sepse në burimin e synuar, ku kam planifikuar të lidh rrëshqitësin tim përmes shërbimit, thirrja jQuery në kod u vendos më vonë se skripti i lidhur nga shërbimi. Prandaj, konstruktet jQuery në kodin tim thjesht nuk u perceptuan.
Si bazë, mora këtë rrëshqitës imazhi JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.
Vendosa të ndalem aty, sepse... kodi i tij JS është shkruar duke përdorur parimet OOP dhe klasat e tij bazohen në prototipe, jo në funksione banale.
Për të qenë i sinqertë, unë thellësisht nuk e kuptoj dhe nuk e njoh zhurmën aktuale rreth JavaScript duke përdorur OOP, korniza dhe gjëra të tjera arkitekturore në një gjuhë që fillimisht ishte menduar të ishte një gjuhë e thjeshtë skriptimi dinamik. Ashtu si vetë JS, sinqerisht nuk e pëlqej atë me vinaigrette sintaksore, e cila lejon që të njëjtat ndërtime të shkruhen në disa mënyra.
Por, për fat të keq, në botën moderne pak njerëz ndajnë qëndrimet e mia, sepse... kjo gjuhë po zhvillohet me një ritëm të çmendur dhe madje po bën përpjekje për të fituar mendjen e zhvilluesve të backend që përdorin Node.js si një alternativë ndaj Java, PHP, C#, Ruby dhe monstrave të tjerë.
Si rezultat, për të mos mbetur thjesht pa punë, duhet të kuptoni në heshtje JavaScript. Dhe në zbatimin e pastër të rrëshqitësit JavaScript që zgjodha, hasa diçka që, siç e kuptoni, e përbuz në këtë gjuhë. Kjo është arsyeja pse e zgjodha atë, në mënyrë që të kishte të paktën disa arsye për të punuar dhe kuptuar klasat OOP dhe prototipe të JavaScript - përndryshe nuk do t'i kisha prekur kurrë vullnetarisht në jetën time :)
Bazuar në kodin që gjeta, më duhej të zhvilloja një rrëshqitës në JS të pastër në një dritare kërcyese (kjo gjë quhet edhe një dritare kërcyese, popup, etj.), e cila do të kishte butona për ndërrimin e rrëshqitjeve dhe treguesit e klikueshëm të rrymës rrëshqitje. Ishte gjithashtu e nevojshme të bëhej një buton për të mbyllur këtë dritare.
Kjo është ajo me të cilën përfundova.
Krijimi i një biblioteke JS rrëshqitësSë pari, vendosa të zbatoj gjithçka me mençuri dhe të bëj një rrëshqitës JavaScript për sitin në formën e një biblioteke që mund të lidhet me sitin me një skript të vetëm, në të cilin do të thirren përbërësit e rrëshqitësit, të ndarë në nëndrejtori. Vendosa ta quaj popupSlider.js për nder të qëllimit të tij origjinal.
Kodi i tij mund të gjendet në GitHub në këtë adresë - https://github.com/Pashaster12/popupSlider.js
Struktura e bibliotekës është si më poshtë:
Dosja e rrëshqitjeve është për imazhet e rrëshqitjes. Kontrollet përmbajnë fotografi të kontrolleve të karuselit JS (butona për mbylljen e rrëshqitësit dhe ndërrimin e rrëshqitjes). Dhe në aktive ka elemente statike të rrëshqitësit JS: shënimi HTML dhe një skedar me stile CSS.
Epo, skedari popupSlider.js është zemra e vetë bibliotekës, në të cilën shkruhen veprimet JavaScript të karuselit dhe vendoset një lidhje me skedarë të tjerë. Është ky që ne do të lidhim në faqe dhe ai do të thërrasë të tjerët.
Vendosa të filloj me shënimin HTML të karuselit tonë të imazhit JS, i cili në rastin tim duket kështu:
Teksti 1 
Teksti 2 
Teksti 3
Për të dizajnuar rrëshqitësin në JavaScript si një dritare kërcyese, përdora stilet e mëposhtme:
#rrëshqitës ( margjina: automatik; gjerësia: 600 pikselë ! e rëndësishme; tejmbushja: e fshehur; ) #slider-wrapper ( gjerësia: 9999 px; lartësia: 343 px; pozicioni: relative; tranzicioni: majtas 400 ms lineare; ) .rrëshqitje ( noton: majtas; gjerësia : 600 pikselë: tejmbushje relative: e fshehur; mbishkrimi (gjerësia: 600 px; lartësia: 1.5; madhësia e shkronjave: 15 px; pesha e shkronjave: 300; rreshtimi i tekstit: në qendër; ngjyra: # 000; shfaqja:tabela; 50% transformim: translateX(-50%) ) #slider-nav a (gjerësia: 8px; dekorimi i tekstit: asnjë; ngjyra: #000; ekrani: inline-block; kufiri-radius: 50%; margjina: 0 5px ngjyra e sfondit: #fafafa ) #slider-nav a.current (background-color: #337ab7;) .horizontal-controls (pozicioni: absolute; ekrani: 12px; lartësia; : 20px lart: 50% marzh-lart: -10px; majtas: -40px; ) #prev:hover ( sfond: url(../controls/arrow_left_active.png); ) #next ( sfond: url(../controls/arrow_right_inactive.png); djathtas: -40px; ) #next:hover ( sfond : url(../controls/arrow_right_active.png #cq-popup ( gjerësia: 600px; z-indeksi: 23; majtas: llogaritje (50%); lart: llogaritje (50%); pozicioni: fiks !i rëndësishëm ; background-repeat: no-repeat: #fff font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; %, -50%) shkalla(1) #cq-popup .header (ekrani: inline-block; madhësia e shkronjave: 17px; pesha e shkronjave: 500; ) #cq-popup > div (gjerësia: 500px; font-); madhësia: 22px; lartësia e rreshtit: 36px ) #cq-popup-btclose (tekst-dekorim: asnjë; pozicioni: absolut; djathtas: -40 px; sfondi: url(. ./controls/btn_delete_inactive.png) ;lartësia: 16px; lartësia: 100%; sfond: rgba (51,51,51,0.8); z-indeksi: 22; )
Si rezultat i aplikimit të këtyre stileve JS, karuseli duket kështu:
I zhvendosa të dy stilet e shënjimit HTML dhe CSS në skedarë të veçantë popupSlider.html dhe popupSlider.css, të cilat ndodhen në drejtorinë e aseteve të bibliotekës së rrëshqitësit JavaScript. E bëra këtë qëllimisht, në mënyrë që kur përdorni këtë kod, përdoruesit të mund të rregullonin lehtësisht shënjimin dhe dizajnin pa ngatërruar kodin JS, ku ajo që do të duhej të shkruhej do të duhej të shkruhej drejtpërdrejt.
Për më tepër, shumë njerëz ende duan të minimizojnë JS për të shpejtuar ngarkimin e faqes. Kështu që do të ishte shumë e vështirë të personalizoni këtë zgjidhje në kushtet e specifikuara.
Si rezultat, vendosa të përfshij thjesht skedarë të gatshëm në skedarin kryesor të bibliotekës popupSlider.js, i cili për detyrën time mori formën e mëposhtme:
Funksioni Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); ) ( var vetë = kjo; për (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blloku"; ndryshe nëse (indeksi == 1) this.prevBtn.style.display = "asnjë"; ), setCurrentLink: funksioni (lidhja) ( var prind = link.parentNode; var a = prind.querySelectorAll("a"); link.className = "aktual"; this.currentElement = lidhje; për (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Disa komente në lidhje me kodin e mësipërm. Përmbajtja e skedarit popupSlider.js është një klasë e vetme JavaScript Slider, e cila, si në PHP, përmban një konstruktor dhe metoda të klasës. Vetëm në JS, përkufizimi i një konstruktori, ndryshe nga PHP, është i detyrueshëm.
Konstruktori përcaktohet duke përdorur konstruktin e mëposhtëm:
Funksioni rrëshqitës(element) ( //kodi i konstruktorit)
Brenda konstruktorit duhet të specifikohen veprimet që do të kryhen gjatë krijimit të një objekti të klasës.
Vetë metodat e klasës do të vendosen brenda prototipit dhe do të jenë të disponueshme për të gjitha instancat e kësaj klase JavaScript. Prototipi JS në rastin tim përshkruhet nga dizajni i mëposhtëm:
Slider.prototype = ( //metodat)
Ata do të thirren jashtë trupit të klasës si më poshtë:
Var rrëshqitës = new Slider(); rrëshqitës.klasa_metoda();
Dhe brenda kodit të klasës, metoda e mëposhtme është e disponueshme:
This.class_method();
Gjëja kryesore është të mos harroni se në JavaScript vlera e kësaj varet nga konteksti i thirrjes, kështu që në trupat e disa metodave në të cilat ishte e nevojshme të thirreshin metodat dhe vetitë e një klase, ekziston një ndërtim i tillë:
Var vetë = kjo; vetë.klasë_metodë(); //për të aksesuar një metodë që është një nivel më i lartë se kodi i metodës së përshkruar
Duket sikur fola për të gjitha nuancat e shkrimit të kodit. Tani disa fjalë për metodat e klasës sonë JavaScript, të cilat përmbajnë përshkrime të veprimeve JS të karuselit të imazhit.
loadStatic ()
Metoda e parë e thirrur kur krijohet një shembull i një klase në konstruktor. Përgjegjës për shtimin e shënimit me rrëshqitës dhe një skedari me stile në kodin HTML të faqes së internetit.
Së pari, krijohet një etiketë e re lidhjeje në memorie duke përdorur funksionin JavaScript document.createElement() dhe vlerat e të gjitha atributeve të nevojshme i caktohen, duke përfshirë shtegun për në skedarin CSS me stilet e rrëshqitësit JS. Dhe së fundi, shtohet në faqen HTML duke përdorur metodën JavaScript appendChild() në fund të seksionit kokë, ku duhet të jenë stilet.
Më pas, ne bëjmë të njëjtën gjë për skedarin me shënjimin HTML të rrëshqitësit tonë në JavaScript të pastër. Këtu ka vetëm një nuancë të vogël: nuk mund të përfshini thjesht një skedar HTML brenda të njëjtit, siç bëmë me një skedar CSS. Ekzistojnë biblioteka të veçanta për këtë, për shembull, për të përfshirë HTML në HTML, lib nga w3.org është i shkëlqyeshëm - https://www.w3schools.com/howto/howto_html_include.asp
Por atëherë do të duhej ose të përfshihej në vetë bibliotekën e rrëshqitësit, ose t'u kërkonte përdoruesve ta instalojnë vetë. Por e gjithë kjo është jooptimale, sepse... kërkon shumë lëvizje të trupit dhe ngadalëson shpejtësinë e ngarkimit të faqes për shkak të skripteve shtesë.
Në fund, vendosa të marr përmbajtjen e skedarit HTML brenda kodit JavaScript dhe ta ngarkoj atë në një element të ri div të krijuar në memorie, ashtu siç bëra më parë për të përfshirë një skedar CSS në JavaScript. Elementi i krijuar përfshihet në fund të pjesës së trupit të kodit HTML të faqes së sajtit.
Nëse dëshironi të futni një div me shënjimin rrëshqitës jo vetëm në fund të trupit, por në një enë specifike, mund të përdorni kodin e mëposhtëm në vend të kësaj:
Var div = dokument.createElement("div"); div.innerHTML = rrëshqitës HTML; dokument.trupi.appendChild(div);
Futni sa vijon, duke specifikuar identifikuesin e dëshiruar të kontejnerit të synuar (në rastin tim, rrëshqitësi HTML JS do të vendoset në elementin me id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = rrëshqitësHTML;
Metoda, e cila thirret në konstruktor pas loadStatic(), nevojitet për të inicializuar vetitë e klasës që korrespondojnë me elementët kryesorë HTML që do t'i qasemi në kodin e mëposhtëm.
Në fund thirret metoda navigate().
navigate ()
Në këtë metodë, veprimet që ndodhin kur klikoni në butonat e çelësit të rrëshqitjes dhe elementët e navigimit të vendosura nën vetë rrëshqitësin tregohen në formën e rrathëve.
Për lehtësi, e zhvendosa kodin JavaScript për ndryshimin e rrëshqitjeve në një metodë të veçantë rrëshqitëse(), por në këtë unë thjesht e bashkëngjit atë në ngjarjen e klikimit për çdo buton të rrumbullakët në lak.
Kur klikoni në butonat "rrëshqitja e mëparshme" / "rrëshqitja tjetër", siç mund ta shihni, vendosa të emuloj thjesht një klikim në rrethin përkatës, duke përcaktuar atë të dëshiruar në lidhje me atë aktual, i cili ka një rrymë të klasës CSS.
rrëshqitje (element)
Metoda "përgjegjëse për magjinë" e vetë karuselit JavaScript, e cila përmban kodin që ndryshon pozicionet e rrëshqitjeve. Në fillim thirret metoda setCurrentLink(), për të cilën do të flasim pak më vonë.
Objekti i butonit të navigimit me rrëshqitës JS në formën e një rrethi i kalohet atij si parametër hyrës.
Vetë çelësi i rrëshqitjes funksionon si kjo:
Në fund të metodës, përshkruhet sjellja për butonat "rrëshqitje e mëparshme"/"rrëshqitje tjetër", të dizajnuara si shigjeta majtas/djathtas, përkatësisht. Nëse rrëshqitja aktuale është e para e të gjithë listës, atëherë butoni për të shkuar te rrëshqitja e mëparshme është i fshehur. Nëse kjo e fundit, atëherë hiqni butonin për të kaluar në rrëshqitjen tjetër.
setCurrentLink(lidhja)
Kjo metodë e klasës sonë të rrëshqitësit JavaScript është përgjegjëse për të theksuar butonin e rrumbullakët të lundrimit që korrespondon me elementin aktual. ato. nëse kemi përzgjedhur rrëshqitjen e dytë, butoni i dytë do të theksohet.
Objekti i butonit që duhet të zgjidhet si aktual kalon si parametër hyrës në funksion.
Logjika për të theksuar elementin aktual është e thjeshtë:
Metoda e fundit e klasës, e cila përcakton veprimin kur klikoni butonin e mbylljes së rrëshqitësit në formën e një kryqi. Këtu, në fakt, kodi është më i kuptueshëm nga të gjithë të përfshirë në klasën e rrëshqitësit JS.
Kur klikoni në butonin e mbylljes, i cili aksesohet nga identifikuesi i tij, elementi rrëshqitës dhe elementi që vendos sfondin e tejdukshëm hiqen nga faqja. Ata gjithashtu, nga ana tjetër, merren nga identifikues unikë.
Vetë metoda thirret brenda navigate(), e përshkruar më parë, e cila përmban të gjithë skenarët e veprimeve që ndodhin në rrëshqitësin tonë JavaScript.
Nga rruga, nëse doni të mbyllni rrëshqitësin kur klikoni jashtë tij, atëherë thjesht shtoni kodin e mëposhtëm në këtë metodë:
Document.getElementById("cq-popup-bg").onclick = funksion () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Slide show JavaScript bazuar në bibliotekën e zhvilluarNdonjëherë në praktikë mund t'ju duhet të bëni një karusel rrotullues JS, i cili shpesh quhet një shfaqje rrëshqitëse. Në rastin tim kjo nuk kërkohej, por megjithatë vendosa të bëja një të tillë bazuar në kodin përfundimtar të bibliotekës për një rast ku mund të ishte i dobishëm.
Në fakt, zbatimi i JavaScript i një shfaqjeje diapozitivësh ndryshon paksa nga një rrëshqitës i zakonshëm. I vetmi ndryshim është se në një shfaqje rrëshqitëse, sllajdet ndërrohen automatikisht në një interval kohor të caktuar, ndërsa në rastin e një karuseli të rregullt JS ato ndryshojnë manualisht duke përdorur elementë navigimi.
SlideShow: funksioni (përfundimi i kohës) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector ("#slider-nav a.current").getAttribute ("data-slide" var slideId = parseInt(currentSlideNumber, 10) + 1 self.slide(document.querySelector(""));
Unë mendoj se është e qartë se çfarë po ndodh këtu. Për të krijuar këtë metodë, kopjova kodin nga ngjarja e klikimit të butonave të rrëshqitjes manuale dhe e vendosa brenda një thirrjeje JavaScript në funksionin setInterval(), i cili kryen veprimin e specifikuar pas një periudhe të caktuar kohe.
Skripti i veprimit kalohet si argumenti i parë si një funksion anonim, dhe intervali kohor kalohet si i dyti, të cilin vendosa ta bëj si një variabël vlera e së cilës kalohet kur thirret slideShow().
I vetmi modifikim i kodit brenda setInterval() që kërkohej ishte përcaktimi i numrit të rrëshqitjeve dhe krahasimi i indeksit të rrëshqitjes aktuale me të për të cikluar ndërrimin automatik.
Epo, në mënyrë që ky kod të funksionojë, duhet të thirret vetë metoda. Vendosa t'i bëj të gjitha këto në të njëjtën navigate(), që është pikërisht një koleksion i të gjitha llojeve të skripteve. E vendosa thirrjen në fund, duke kaluar si argument vlerën e intervalit kohor për ndryshimin automatik të rrëshqitjeve në shfaqjen tonë të rrëshqitjes JS (zgjodha 2000 milisekonda ose 2 sekonda, mund ta ndryshoni këtë numër sipas nevojës):
Vetë.SlideShow(2000);
Pas kësaj, kontrolloni funksionimin e rrëshqitësit JavaScript, duke mos harruar të pastroni shfletuesin tuaj.
Në teori, gjithçka duhet të funksionojë. Nëse jo, studioni gabimet në tastierën e shfletuesit dhe ndajini ato në komente.
Si rezultat, ne morëm një shfaqje rrëshqitëse JS në të cilën sllajdet kalojnë automatikisht dhe në një rreth, d.m.th. kur arrihet rrëshqitja e fundit, shfaqja kalon në një cikli të ri dhe shfaqja fillon përsëri nga elementi i parë.
Kur punoja me biblioteka të ndryshme JS për karuselet e imazheve dhe rishikimet, vura re që zhvilluesit e përdorin në mënyrë aktive këtë praktikë, por me disa shtesa. Në të gjitha zgjidhjet që kam parë, shfaqja automatike e rrëshqitjes ndërpritet nëse përdoruesi bën një ndërrim manual. Kështu vendosa të bëj të njëjtën gjë në bibliotekën time.
Për të ndërprerë shfaqjen automatike të rrëshqitjeve të karuselit të JavaScript, vendosa të përdor funksionin standard JS clearInterval(), të cilit i kaloj si argument identifikuesin e intervalit kohor të kthyer nga funksioni setInterval() kur ai vendoset.
Si rezultat, mora kodin e mëposhtëm, të cilin vendosa të mos e shkruaj si një metodë të veçantë:
ClearInterval(self.slideCycle);
Dhe e vendosi në vendet ku përshkruhen veprimet kur klikoni në elementë të ndryshëm të navigimit, d.m.th. ne vazhdim:
Link.addEventListener("kliko", funksioni (e) (...)); self.prevBtn.addEventListener("kliko", funksioni (e) (...)); self.nextBtn.addEventListener("kliko", funksioni (e) (...));
Është më mirë të thërrisni clearInterval() më afër vetë ngjarjes së klikimit, gjëja kryesore është para saj, dhe jo pas saj.
Integrimi i rrëshqitësit JavaScript në sitPra, rrëshqitësi ynë në JS të pastër është gati. Tani gjithçka që mbetet është ta lidhni atë me sitin.
Për ta bërë këtë, ju duhet të kryeni hapat e mëposhtëm në mënyrë sekuenciale, të cilat janë veprime standarde kur integroni çdo bibliotekë JavaScript të palëve të treta në përgjithësi.
Hapi 1 . Ne kopjojmë skedarët e bibliotekës në faqen tonë të internetit në një drejtori të veçantë.
Hapi 2. Shtoni kodin e mëposhtëm në HTML-në e faqeve ku do të duhet të shfaqet rrëshqitësi, duke e vendosur atë përpara etiketës së mbylljes së trupit:
Hapi 3. Ne vendosim kodin e mëposhtëm për thirrjen e karuselit JS në çdo skedar ekzistues JavaScript, i cili përfshihet në faqe pas lidhjes së vetë rrëshqitësit:
Var aSlider = rrëshqitës i ri ("#rrëshqitës");
Siç mund ta shihni, ky kod në thelb krijon një objekt të klasës Slider, i cili gjendet në popupSlider.js. Kjo është arsyeja pse duhet të thirret vetëm pasi të lidhni vetë skedarin e klasës me faqen.
Shtimi i rrëshqitjeve të reja në një karusel JavaScriptGjithçka është shumë e thjeshtë këtu. Meqenëse rrëshqitjet tona janë marrë nga një drejtori e veçantë e bibliotekës së rrëshqitjeve, kur shtoni fotografi të reja, thjesht do t'ju duhet të hidhni skedarët e nevojshëm në të, duke u dhënë fillimisht të njëjtën madhësi si të tjerët.
Dhe më pas në kodin e skedarit assets/popupSlider.html shtoni një bllok të ri në kontejner me id slider-wrapper:
Teksti
Në parim, thjesht mund të kopjoni një ekzistues të ngjashëm dhe të ndryshoni shtegun në skedarin e imazhit dhe tekstin e nënshkrimit (nëse është e nevojshme fare).
Do t'ju duhet gjithashtu të shtoni një element të ri navigimi në formën e një rrethi, sepse... Për momentin, shtimi automatik i tij ende nuk është zbatuar. Për ta bërë këtë, do t'ju duhet të shtoni kodin e mëposhtëm në kontejner me ID-në rrëshqitës-nav, duke e shkruar atë në fund:
Vlera e atributit data-slide duhet të jetë më e madhe se vlera më e madhe e elementeve të tjerë. Mjafton vetëm të rritet rryma maksimale me një.
Paketimi i karuselit JS në një skenar të vetëmKjo është e gjitha, rrëshqitësi JavaScript është gati dhe i lidhur. Unë personalisht rekomandoj përdorimin e këtij opsioni në praktikë nëse ju nevojitet fare :)
Për të përshpejtuar funksionimin e tij, nga rruga, mund të kompresoni më tej përbërësit statikë: skedarët CSS, HTML dhe JavaScript. Unë nuk e bëra këtë dhe ju ofrova kod të minuar, sepse tani ka shumë sisteme ndërtimi frontend: Gulp, Grunt, Webpack dhe të tjerë. Dhe secila prej tyre ka algoritmet e veta për kompresimin dhe lidhjen e skedarëve.
Për më tepër, rezultatet e minuara mund të funksionojnë ndryshe në OS të ndryshme. Në përgjithësi, ka shumë arsye.
Dhe vetë kodet burimore, mendoj, nuk janë aq të rënda sa të kenë nevojë për këtë procedurë. Por nëse keni nevojë për to, atëherë konfiguroni vetë minifikimin, duke marrë parasysh sistemin operativ dhe kolektorin tuaj.
Siç shkrova në fillim, për të zgjidhur detyrën e vendosur fillimisht për mua, më duhej të merrja një skedar të vetëm JS për përdorimin e saktë të rrëshqitësit tim përmes një shërbimi të palëve të treta në sit. Për këtë arsye, unë, në mënyrë rigoroze, nuk përdora biblioteka të gatshme të palëve të treta.
Atëherë opsioni i një skripti të vetëm karuseli JavaScript do t'ju vijë në ndihmë, sepse... e gjithë përmbajtja do të përmbahet drejtpërdrejt në të, duke përfshirë kodin HTML/CSS, i cili në rastin e një biblioteke ruhet në skedarë të veçantë.
Skenari në rastin tim përbëhet nga dy pjesë. Pjesa e parë përmbante përmbajtjen e skedarit popupSlider.js, të cilin nuk do ta prezantoj për herë të dytë. Futeni vetë, duke hequr përshkrimin e metodës loadStatic() dhe thirrjen e saj nga kodi i klasës, sepse nuk do të na duhen.
Pjesa e dytë e një skripti të vetëm rrëshqitës JavaScript për sitin është një mbajtës për ngjarjen DOMContentLoaded, e cila ndodh kur ngarkohet përmbajtja e faqes.
Aty do të shtojmë kodin carousel JS në faqen HTML/CSS dhe do të krijojmë një objekt të klasës Slider, i cili është i barabartë me aktivizimin e vetë rrëshqitësit.
Skematikisht kodi duket si ky:
/* përmbajtja e popupSlider.js pa përshkruar metodën loadStatic() dhe thirrjen e saj */ document.addEventListener("DOMContentLoaded", funksion())( var str = "\ \ /*kodi css*/ \ /* kodi html * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aRrëshqitës = rrëshqitës i ri ("#rrëshqitës");
Meqenëse në rastin tim opsioni i ngarkimit të skedarëve në server ishte plotësisht i mbyllur, më duhej të ngarkoja skedarët e imazheve të kontrolleve të karuselit të JavaScript në cloud dhe në vend të shtigjeve drejt tyre në kodin HTML dhe CSS, të shkruaja lidhjet e krijuara kur duke kursyer.
Nëse nuk keni vështirësi të tilla, atëherë nuk keni nevojë të ndryshoni asgjë, por mos harroni të kopjoni direktoritë e bibliotekës së rrëshqitjeve dhe kontrolleve në server dhe të specifikoni shtigjet e sakta për to.
Rrëshqitësi i personalizuar JS - perspektivat e zhvillimitPër të qenë i sinqertë, nuk kam në plan të angazhohem në mbështetje dhe zhvillim të synuar të zgjidhjes që kam krijuar :) Për momentin, ka një mori rrëshqitësish të ngjashëm dhe një karrocë të vogël, të cilat, ndryshe nga e imja, kanë historinë e tyre, janë testuar tërësisht dhe mbështeten nga një komunitet i madh përdoruesish dhe zhvilluesish.
Nuk është disi interesante për mua të filloj gjithë këtë rrugëtim vetëm nga e para dhe të krijoj një biçikletë tjetër, dhe nuk kam vërtet kohë për të. Por, nga ana tjetër, ky rrëshqitës JavaScript është një mundësi e shkëlqyer për të praktikuar zhvillimin duke rifaktoruar kodin e tij dhe duke zbatuar funksione të reja interesante që mund të mos ekzistojnë ende.
Pra, nëse ju, si unë, keni nevojë për një bazë kodi për eksperimente dhe keni të paktën pak kohë shtesë të lirë, kopjoni kodin e rrëshqitësit JavaScript që përshkrova ose bashkohuni me kontribuesit në GitHub. Depoja është e hapur dhe unë ofrova një lidhje me të në fillim të artikullit.
Nëse dëshironi të përmirësoni aftësitë tuaja të përparme në krijimin tim, unë mund t'ju jap edhe një listë të vogël modifikimesh dhe përmirësimesh që i duhen kodit dhe që mund të jenë me interes për ju për sa i përket zbatimit të tyre:
Lista e modifikimeve që kam bërë, natyrisht, nuk është përfundimtare dhe mund të plotësohet. Shkruani për sugjerimet, mendimet dhe dëshirat tuaja në komentet poshtë artikullit dhe ndajini me miqtë tuaj përmes rrjeteve sociale për t'i përfshirë edhe ata në zhvillim.
Ju kërkoj të mos gjykoni kodin tim në mënyrë rigoroze, sepse, siç thashë tashmë, nuk e konsideroj veten specialist të Frontend dhe nuk jam. Unë jam gjithashtu i hapur për të gjitha komentet tuaja për stilin e kodimit dhe shpresoj se unë mund të mësoj diçka nga ju, dhe ju nga unë, d.m.th. përmbushin qëllimin kryesor të zhvillimit dhe mbështetjes së produkteve të OpenSource.
Bashkohuni me komunitetet e projektit, abonohuni në përditësime dhe madje mund të më ndihmoni financiarisht duke përdorur formularin nën vetë artikullin, nëse kam qenë në gjendje t'ju ndihmoj me diçka ose thjesht ju pëlqen ajo që bëj :)
Kjo është gjithçka që doja të thoja! Gjithe te mirat! 🙂
Por meqenëse po shqyrtojmë bazat e JS, për të studiuar bazat do të përshkruaj se si të krijoj një rrëshqitës të thjeshtë duke përdorur vetëm gjuhën JavaScript. Epo, le të fillojmë të analizojmë materialin!
Çfarë lloje rrëshqitësish ekzistojnë dhe ku mund të nevojiten?Krijimi i galerive të përshtatshme për shikimin e imazheve kërkohet në të gjitha shërbimet e internetit që përmbajnë të paktën disa fotografi. Këto mund të jenë dyqane online, faqe portofoli, lajme dhe shërbime arsimore, faqet e internetit të kompanive dhe institucioneve argëtuese me raporte fotografike, etj.
Megjithatë, ky është një përdorim standard i rrëshqitësve. Teknologji të tilla përdoren gjithashtu për të tërhequr klientët në mallra, shërbime promovuese ose për të përshkruar avantazhet e ndërmarrjeve.
Kryesisht, klientët kërkojnë ta zbatojnë atë në galeritë e tipit “Carousel”. Ky është një mjet i përshtatshëm për shikimin e imazheve në madhësi të madhe me aftësinë që përdoruesi të ndërrojë rrëshqitjet përpara dhe prapa. Në këtë rast, vetë fotografitë zakonisht ndryshojnë automatikisht pas një kohe të caktuar. Ky mekanizëm u emërua për shkak të faktit se shfaqja e fotografive përsëritet në një rreth.
Sot, nëse dëshironi, mund të gjeni shtojcat më të pazakonta dhe tërheqëse në internet për të parë një grup fotografish.
Veprimtari e pavarurEpo, tani le të fillojmë të krijojmë rrëshqitësin tonë. Në këtë fazë të të mësuarit, për ta zbatuar atë, ju sugjeroj të përdorni të pastër. Kjo do të ndërrojë automatikisht fotografitë në një rreth.
Më poshtë kam bashkangjitur kodin për aplikimin tim. Kam lënë komente për ju ndërsa kam koduar.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Ndërruesi automatik i imazhit /*Përshkrimi i pamjes së kornizës, baza për rrëshqitësin e ardhshëm */ #slides( pozicioni: relative; lartësia: 415 px; gjerësia: 100%; mbushja: 0 px; lloji i stilit të listës: asnjë; kutia- hije: 0 0 7px #010, 0 0 10px blu, 0 0 15px #010, 0 0 35px #010 ) /* Redaktimi i shfaqjes së imazheve*/ img (gjerësia: automatik; lartësia: 390 px; mbushja: 13 px;) /* Duke treguar që artikujt e listës së përmbajtjes do të shfaqen në qendër të elementit prind, d.m.th. në këtë rast, në qendër të elementit ul - baza për rrëshqitjet */ li ( rreshtimi i tekstit: qendër; ) /* Unë përshkruaj pamjen e vetë rrëshqitjeve */ .rrëshqitje( pozicioni: absolute; opaciteti: 0 sipër: 0px: 100% gjerësi: -moz-tranzicion: opacity 1.5s; : 1; indeksi z: 4;
Shpresoj se nuk keni pasur ndonjë problem me kodin css dhe html. Por e konsideroj të nevojshme çmontimin e punës së skenarit. Pra, le të kalojmë në deshifrimin e asaj që u shkrua.
Pra, së pari, duke përdorur metodën querySelectorAll, unë i caktoj variablit MySlider një listë të të gjithë elementëve brenda intervalit të caktuar. Tregon këtë hyrje
document.querySelectorAll("#slides .slide")
Kështu, MySlider ruan një koleksion prej katër elementësh.
Më pas, unë përcaktoj se cili imazh të fillojë të shfaqet duke vendosur variablin aktualPicture në zero. Më pas tregoj se ndryshimi i rrëshqitjes ndodh në 2.7 sekonda dhe funksioni i përpunimit NextSlide duhet të thirret.
Le të kalojmë në vetë funksionin.
Fillimisht, për elementin aktual të listës, ndryshoj përshkrimin e klasave, d.m.th. Unë e rishkruaj "slide showing" në "slide". Rrjedhimisht, imazhi bëhet i padukshëm.
Tani përcaktoj një element të ri koleksioni që do të shfaqet në ekran. Për ta bërë këtë, unë marr pozicionin aktual +1. Ju mund të keni vënë re se unë përdor gjithashtu ndarjen me një mbetje (%) sipas numrit të sllajdeve në dispozicion. Ky truk me veshët është i nevojshëm për të nisur shfaqjen në një rreth të ri. Kështu do të dukej fjalë për fjalë:
Por tani ia caktoj përshkrimin e klasës "slide showing" elementit që rezulton. Siç mund ta shihni, gjithçka zbatohet sa më lehtë që të jetë e mundur.
Faleminderit per vemendjen. Mos harroni të bashkoheni në grupin e pajtimtarëve të mi, të lexoni artikuj të rinj dhe, natyrisht, të ndani lidhje me botimet tuaja të preferuara me miqtë tuaj. Ju uroj fat të mirë në mësimin e JavaScript. Mirupafshim!
Përshëndetje, Roman Chueshov
Lexuar: 256 herë
Nëse keni nevojë të shtoni një rrëshqitës imazhi jQuery me cilësi të lartë në faqen tuaj, atëherë në këtë artikull do të gjeni një përshkrim të shtojcave të nevojshme. Edhe pse JQuery e ka bërë shumë më të lehtë punën me JavaScript, ne kemi ende nevojë për shtojca për të përshpejtuar procesin e dizajnimit të uebit.
Ne mund të bëjmë ndryshime në disa nga këto shtojca dhe të krijojmë rrëshqitës të rinj që janë shumë më të përshtatshëm për qëllimet e faqes sonë.
Për rrëshqitës të tjerë, thjesht shtoni tituj, imazhe dhe zgjidhni efektet e tranzicionit të rrëshqitjes që vijnë me rrëshqitësin. Të gjitha këto shtojca shoqërohen me dokumentacion të detajuar, kështu që shtimi i efekteve ose funksioneve të reja në to nuk do të jetë i vështirë. Ju madje mund të ndryshoni shkaktarët e bazuar në ngjarje nëse jeni një programues me përvojë në JQuery.
Tendencat e fundit si dizajni i përgjegjshëm janë shumë të rëndësishëm për projektet në ueb, pavarësisht nëse jeni duke zbatuar një plugin ose një skript. Të gjithë këta elementë e bëjnë secilën prej këtyre shtojcave shumë fleksibël. Gjithçka që doli në 2014 është përfshirë në këtë listë.
Rrëshqitësit e imazhit JQuery Jssor rrëshqitës i përgjegjshëmKohët e fundit kam hasur në këtë rrëshqitës të fuqishëm jQuery dhe kam mundur të shoh nga dora e parë se ai e bën punën e tij shumë mirë. Ai përmban mundësi të pakufishme që mund të zgjerohen përmes kodit me burim të hapur të rrëshqitësit:
- Dizajn përshtatës;
- Më shumë se 15 opsione personalizimi;
- Më shumë se 15 efekte të ndryshimit të imazhit;
- Galeria e imazheve, karusel, mbështetje për madhësinë e ekranit të plotë;
- Rotator vertikal i banerit, lista e rrëshqitjeve;
- Mbështetje për video.
Demo | Shkarko
PgwSlider - rrëshqitës i përgjegjshëm i bazuar në JQuery / ZeptoDetyra e vetme e kësaj shtojce është të shfaqë rrëshqitje të imazheve. Është shumë kompakt, pasi skedarët JQuery janë vetëm 2.5 KB në madhësi, gjë që e lejon atë të ngarkohet shumë shpejt:
- Struktura adaptive;
- optimizimi i SEO;
- Mbështetje për shfletues të ndryshëm;
- Tranzicione të thjeshta të imazhit;
- Madhësia e arkivit është vetëm 2.5 KB.
Demo | Shkarko
Një rrëshqitës fleksibël dhe i dobishëm JQuery i krijuar për burimet e lajmeve me një listë publikimesh në anën e majtë dhe një imazh të shfaqur në të djathtë:
- Dizajn përshtatës;
- Kolona vertikale për ndërrimin e lajmeve;
- Titujt e zgjeruar.
Demo | Shkarko
Ky rrëshqitës nuk përmban jQuery, por unë do të doja ta paraqes atë pasi është shumë kompakt dhe mund të zvogëlojë ndjeshëm kohën e ngarkimit të faqes. Më njoftoni nëse ju pëlqen:
- Struktura adaptive;
- Dizajn i thjeshtë;
- Opsione të ndryshme për ndryshimin e rrëshqitjes;
- Kodi minimal JavaScript;
- Madhësia është vetëm 3 KB.
Demo | Shkarko
Një galeri e stilit të shpërndarë me dokumente mbi një tavolinë me një plan urbanistik fleksibël dhe dizajn të bukur duhet të jetë me interes për shumë prej jush. Më i përshtatshëm për tableta dhe ekrane të mëdhenj:
- Rrëshqitës përshtatës;
- Dizajn i sheshtë;
- Ndryshimi i rastësishëm i sllajdeve;
- Qasje e plotë në kodin burimor.
Demo | Shkarko
Demo | Shkarko
HiSlider ka prezantuar një shtojcë të re pa pagesë jQuery rrëshqitës me të cilën mund të krijoni një shumëllojshmëri galerish imazhesh me tranzicione fantastike:
- Rrëshqitës përshtatës;
- Nuk kërkon njohuri programore;
- Disa shabllone dhe lëkura të mahnitshme;
- Efekte të bukura të tranzicionit;
- Mbështetje për platforma të ndryshme;
- E përputhshme me WordPress, Joomla, Drupal;
- Aftësia për të shfaqur lloje të ndryshme të përmbajtjes: imazhe, video në YouTube dhe video Vimeo;
- Konfigurimi fleksibël;
- Karakteristikat shtesë të dobishme;
- Sasi e pakufizuar e përmbajtjes së shfaqur.
Demo |Shkarko
WOW Slider është një rrëshqitës imazhi i përgjegjshëm jQuery me efekte vizuale të mahnitshme (domino, rrotullim, turbullim, rrokullisje dhe ndezje, fluturim jashtë, blinds) dhe shabllone profesionale.
WOW Slider vjen me një magjistar instalimi që ju lejon të krijoni rrëshqitës fantastikë në sekonda pa pasur nevojë të kuptoni kodin ose të modifikoni imazhet. Versionet e shtojcës për Joomla dhe WordPress janë gjithashtu të disponueshme për shkarkim:
- Plotësisht i përgjegjshëm;
- Mbështet të gjithë shfletuesit dhe të gjitha llojet e pajisjeve;
- Mbështetje për pajisjet me prekje;
- Instalim i lehtë në WordPress;
- Fleksibilitet në konfigurim;
- SEO-optimizuar.
Demo |Shkarko
Nivo Slider njihet në të gjithë botën si rrëshqitësi më i bukur dhe më i lehtë për t'u përdorur i imazhit. Shtojca Nivo Slider është falas dhe lëshohet nën licencën MIT:
- Kërkon JQuery 1.7 dhe më lart;
- Efektet e bukura të tranzicionit;
- E thjeshtë dhe fleksibël për t'u konfiguruar;
- Kompakte dhe adaptive;
- Burim i hapur;
- E fuqishme dhe e thjeshtë;
- Disa shabllone të ndryshme;
- Prerja automatike e imazhit.
Demo |Shkarko
Ideja u frymëzua nga rrëshqitësit e Apple, në të cilët disa elementë të vegjël mund të fluturojnë me efekte të ndryshme animacioni. Zhvilluesit u përpoqën të zbatonin këtë koncept, duke marrë parasysh kërkesat minimale për krijimin e një dizajni të thjeshtë të dyqanit në internet, në të cilin elementët "fluturues" përfaqësojnë kategori të ndryshme:
- Struktura adaptive;
- Dizajn minimalist;
- Efekte të ndryshme të braktisjes dhe ndryshimit të rrëshqitjes.
Demo |Shkarko
Një rrëshqitës shumë i thjeshtë që zë 100% të gjerësisë së faqes dhe përshtatet me madhësitë e ekranit të pajisjeve mobile. Funksionon me tranzicione CSS dhe imazhet janë "grumbulluar" së bashku me ankorat. Spiranca mund të zëvendësohet ose hiqet nëse nuk dëshironi të bashkëngjitni një lidhje me imazhin.
Kur instalohet, rrëshqitësi zgjerohet në 100% të gjerësisë së ekranit. Gjithashtu mund të zvogëlojë automatikisht madhësinë e imazheve të rrëshqitjes:
- Rrëshqitësi përshtatës JQuery;
- Madhësia e plotë;
- Dizajn minimalist.
Demo |Shkarko
Elastic Content Slider rregullon automatikisht gjerësinë dhe lartësinë bazuar në dimensionet e elementit prind. Ky është një rrëshqitës i thjeshtë jQuery. Ai përbëhet nga një zonë rrëshqitëse në krye dhe një shirit me skedë navigimi në fund. Rrëshqitësi rregullon gjerësinë dhe lartësinë e tij sipas dimensioneve të kontejnerit mëmë.
Kur shikohen në ekrane të vogla diagonale, skedat e navigimit shndërrohen në ikona të vogla:
- Dizajn përshtatës;
- Lëvizja e klikimit të miut.
Demo |Shkarko
Një rrëshqitës eksperimental që lëviz nëpër imazhe në 3D. Dy rafte ngjajnë me pirgje letre, nga të cilat, kur lëvizni, imazhet shfaqen në qendër të rrëshqitësit:
- Dizajn përshtatës;
- Flip - tranzicion;
- efektet 3D.
Demo |Shkarko
Ky tutorial do t'ju tregojë se si të krijoni një rrëshqitës me një kthesë: ideja është të "preni" dhe të shfaqni rrëshqitjen aktuale ndërsa hapni imazhin tjetër ose të mëparshëm. Duke përdorur animacionin JQuery dhe CSS, ne mund të krijojmë efekte unike të tranzicionit:
- Dizajn përshtatës;
- Tranzicioni i ndarë;
- Rrëshqitësi i ekranit të plotë.
Demo |Shkarko
Nuk ka zile dhe bilbila të panevojshme, më pak se 3 KB në madhësi. Përdorni çdo kod HTML për rrëshqitjet tuaja, zgjeroni atë me CSS. Gjithçka që lidhet me Unslider është pritur në GitHub:
- Mbështetje për shfletues të ndryshëm;
- Mbështetja e tastierës;
- Rregullimi i lartësisë;
- Dizajn përshtatës;
- Mbështetja e hyrjes me prekje.
Demo | Shkarko
Një shtesë e thjeshtë dhe kompakte (me madhësi vetëm 1 KB) që krijon një rrëshqitës të përgjegjshëm duke përdorur elementë brenda një kontejneri. ResponsiveSLides.js punon me një gamë të gjerë shfletuesish, duke përfshirë të gjitha versionet e IE nga IE6 dhe më lart:
- Plotësisht i përgjegjshëm;
- Madhësia 1 KB;
- Tranzicionet CSS3 me aftësinë për të ekzekutuar përmes JavaScript;
- Shënim i thjeshtë duke përdorur lista me pika;
- Aftësia për të personalizuar efektet e tranzicionit dhe kohëzgjatjen e shikimit të një rrëshqitjeje;
- Mbështet aftësinë për të krijuar shfaqje të shumta rrëshqitëse;
- Lëvizje automatike dhe manuale.
Demo |Shkarko
Kamera është një shtojcë me shumë efekte tranzicioni dhe një plan urbanistik të përgjegjshëm. Lehtë për t'u konfiguruar, e mbështetur nga pajisjet celulare:
- Dizajn plotësisht i përgjegjshëm;
- Nënshkrimet;
- Aftësia për të shtuar video;
- 33 ikona me ngjyra të ndryshme.
Demo |Shkarko
SlidesJS është një shtesë e përgjegjshme për JQuery (1.7.1 dhe më lart) me mbështetje për pajisjet me prekje dhe tranzicionet CSS3. Eksperimentoni me të, provoni disa shembuj të gatshëm që do t'ju ndihmojnë të kuptoni se si të shtoni SlidesJS në projektin tuaj:
- Dizajn përshtatës;
- tranzicionet CSS3;
- Mbështetje për pajisjet me prekje;
- Lehtë për t'u vendosur.
Demo | Shkarko
Ky është një rrëshqitës pa pagesë i përgjegjshëm jQuery:
- Plotësisht i përgjegjshëm - përshtatet me çdo pajisje;
- Ndryshimi horizontal, vertikal i rrëshqitjes;
- Slides mund të përmbajnë imazhe, video ose përmbajtje HTML;
- Mbështetje e zgjeruar për pajisjet me prekje;
- Përdorimi i tranzicioneve CSS për animimin e rrëshqitjes (përshpejtimi i harduerit);
- Thirrjet API dhe metoda krejtësisht publike;
- Madhësia e vogël e skedarit;
- Lehtë për t'u zbatuar.
Demo |Shkarko
Rrëshqitësi më i mirë i përgjegjshëm. Versioni i ri është përmirësuar për të rritur shpejtësinë dhe kompaktësinë.
Demo | Shkarko
Galleria përdoret në miliona sajte për të krijuar galeri imazhesh me cilësi të lartë. Numri i vlerësimeve pozitive për punën e saj është thjesht jashtë grafikëve:
- Plotësisht falas;
- Mënyra e shikimit në ekran të plotë;
- 100% adaptive;
- Nuk kërkohet përvojë në programim;
- Mbështetje për iPhone, iPad dhe pajisje të tjera me prekje;
- Flickr, Vimeo, YouTube dhe më shumë;
- Disa tema.
Demo | Shkarko
Unë ju prezantoj një rrëshqitës imazhi jQuery të shkruar posaçërisht për dizajn të përgjegjshëm të uebit. Blueberry është një shtesë eksperimentale e rrëshqitësit të imazhit me burim të hapur që është shkruar posaçërisht për të punuar me shabllone të përgjegjshme:
- Dizajn minimal;
- Struktura adaptive;
- Prezantimet.
Demo | Shkarko
Përdoren elementë standardë të versionit të parë të programit: rrëshqitësi fshihet në të majtë dhe shfaqet në të djathtë. Të njëjtat elementë lundrimi dhe titrat që shfaqen në lëvizjen e mausit:
- Dizajn përshtatës;
- Mbështetja e nënshkrimit;
- Modaliteti i shfaqjes së rrëshqitjes.
Demo | Shkarko
Na duhet një rrëshqitës i thjeshtë me lëvizje automatike. Le të fillojmë...
Përshkrimi se si funksionon rrëshqitësi.Sllajdet do të rreshtohen dhe do të lëvizin pas një kohe të caktuar.
Korniza e kuqe tregon pjesën e dukshme të rrëshqitësit.
Në fund të rrëshqitësit ju duhet të kopjoni rrëshqitjen e parë. Kjo është e nevojshme për të siguruar lëvizjen nga rrëshqitja e tretë në të parën. Ju gjithashtu duhet të shtoni rrëshqitjen e fundit në fillim për të qenë në gjendje të lëvizni prapa nga rrëshqitja e parë në të tretën. Më poshtë tregohet se si funksionon rrëshqitësi në drejtimin përpara.
Kur rrëshqitësi arrin në fund, një kopje e tij nga fillimi i rrëshqitësit vendoset menjëherë në vend të rrëshqitësit të fundit. Pastaj cikli përsëritet përsëri. Kjo krijon iluzionin e një rrëshqitësi të pafund.
Shënimi HTMLSë pari, le të bëjmë një rrëshqitës të thjeshtë me lëvizje automatike. Kërkon dy kontejnerë për të funksionuar. E para do të vendosë madhësinë e zonës së dukshme të rrëshqitësit, dhe e dyta është e nevojshme për të vendosur rrëshqitës në të. Paraqitja e rrëshqitësit do të duket kështu:
Container.slider-box specifikon dimensionet e rrëshqitësit. Duke përdorur veçorinë overflow:hidden, të gjithë elementët që nuk përfshihen në zonën brenda elementit fshihen.
Container.slider është vendosur në një gjerësi më të madhe. Kjo është e nevojshme në mënyrë që të gjitha rrëshqitjet të futen në vijë.
Rrëshqitjet radhiten duke përdorur veçorinë float:left.
Më poshtë është një paraqitje skematike e blloqeve të rrëshqitësve.
Lëvizja e rrëshqitjeve do të kryhet duke ndryshuar pa probleme veçorinë majtas margin të kontejnerit.rrëshqitës.
$(function () ( var width= $(".slider-box" ) .width () ; // Gjerësia e rrëshqitësit. interval = 4000 ; // Intervali i ndryshimit të rrëshqitjes. $(".slider img:last" ) .clone () .prependTo (".rrëshqitës") // Një kopje e rrëshqitjes së fundit është vendosur në fillim .eq (1) është zhvendosur majtas me gjerësinë e një rrëshqitjeje ("animation()" , interval) ; funksioni animacion() (var margin = parseInt($(".rrëshqitës") .css ("marginLeft") ); // Blloku aktual offset.gjerësia e rrëshqitësit= $(".slider-box") .width () , / / Gjerësia e rrëshqitësitSlider= $(".rrëshqitës") .fëmijët ().gjatësia ; rrëshqitja nuk është e fundit, (margin= gjerësia e marzhit; // atëherë vlera e marzhit zvogëlohet me gjerësinë e rrëshqitjes. css ("margin-left" , - width) // pastaj block.slider kthehet në pozicionin e tij origjinal, margin=- width* 2 ) . // Blloku.rrëshqitësi është zhvendosur majtas me 1 rrëshqitje );Rezultati ishte një rrëshqitës i thjeshtë me lëvizje automatike të pafundme.
