Vienkārša slīdņa izveide, izmantojot jQuery. Skaista satura slīdņa izveide
Viens no lielākajiem izaicinājumiem, ar ko šobrīd saskaras Rietumu civilizācija, ir parādīt lielu satura apjomu nelielā telpā.
Viens efektīvs risinājums ir sakārtot saturu secīgos blokos, izmantojot nozarē (un tiešsaistes kopienā) zināmo kā satura slīdni. Jūs, iespējams, neesat par to dzirdējuši, bet es esmu gatavs derēt, ka noteikti esat to redzējis.
Lai atsvaidzinātu atmiņu un sniegtu priekšstatu par to, ko mēs veidosim, zemāk ir satura slīdņa piemērs:
Šajā rakstā es jums parādīšu, kā izveidot savu skaistu satura slīdni, kas ir ļoti līdzīgs šim. Papildus satura slīdņa izveidei jūs uzzināsiet daudz par to, kā HTML, CSS un JavaScript mijiedarbojas, lai izveidotu satura slīdni. Kopumā ir daudz ko gaidīt, tāpēc sāksim.
Pārskats par to, kā tas darbojasPirms iedziļināmies HTML, CSS un JavaScript, kas būs nepieciešami, lai tas viss darbotos, spersim ātru soli atpakaļ un sapratīsim elementus, kas veido mūsu satura slīdni.
Pirmkārt, mums ir saturs, ko vēlamies ievietot slīdnī:
Saturs var būt jebkas. Tie var būt attēli, standarta HTML saturs, vairāku veidu satura kombinācija utt. Tam īsti nav nozīmes. Ja mūsu saturu var ietīt DIV elementos, viss ir kārtībā. Jums tikai jāpārliecinās, ka katrs satura bloks ir vienāds platumā un augstumā.
Skatot slīdni, vienlaikus redzat tikai vienu satura bloku. Ja netiek veiktas papildu darbības, saturs, kas vienlaikus tiek parādīts sākotnējā izmērā, var pārvērst slīdni par kaut ko ļoti vizuāli nepievilcīgu.
Mēs to novērsīsim divos posmos. Pirmkārt, mēs iesaiņosim saturu konteinerā, kura izmērs ir tāds pats kā vienam no satura blokiem:
Kad saturs ir iesaiņots konteinerā, mēs apgriežam visus elementus ap satura bloku, lai nodrošinātu, ka vienlaikus tiek izvadīts tikai viens bloks:
Nākamais solis ir nodrošināt iespēju skatīt pārējo saturu. To var izdarīt dažādos veidos. Šajā rakstā mēs izmantojam apļveida saišu kopu, uz kurām varat noklikšķināt:
Pēdējā lieta, kas jums jādara, lai slīdnis darbotos, ir padarīt katru saiti klikšķināmu. Tam būs nepieciešami daži CSS triki kopā ar JavaScript, taču nekas nav pārāk sarežģīts. Un tas, mani dārgie draugi un ienaidnieki, ir viss īss pārskats par to, no kā sastāv satura slīdnis.
Dažās nākamajās sadaļās mēs apskatīsim faktisko HTML, CSS un JavaScript kodu, kas darbosies mūsu slīdnī.
SatursIzpildiet tās pašas darbības, kuras aprakstījām pārskatā, un sāksim ar... saturu. Pirmkārt, mums ir jāizveido sākuma punkts. Izveidosim tukšu HTML dokumentu un pievienosim tam šādu kodu no HTML5 sākuma veidnes:
Šis marķējums nedara neko citu, kā tikai nosaka dokumenta struktūru, taču tas ir pirmais solis, kas ļaus mums vēl vairāk pievienot saturu. Darīsim to nākamajā sadaļā.
Saturs (šoreiz īsts)Ķermeņa elementa iekšpusē pievienojiet šādu HTML kodu:
Starp stila tagiem pievienojiet šādus stila noteikumus, kas nosaka mūsu satura formu un krāsu.
#iesaiņojums ( platums: 2200 pikseļi; pozīcija: relatīvs; pa kreisi: 0 pikseļi; ) .content ( peldošs: pa kreisi; platums: 550 pikseļi; augstums: 350 pikseļi; atstarpe: normāls; fona atkārtojums: neatkārtot; ) #itemOne ( fons -krāsa: #ADFF2F; fona attēls: url("http://www.kirupa.com/images/blueSquare.png") #itemTwo (fona krāsa: #FF7F50; fona attēls: url("http :/) /www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( fona krāsa: #1E90FF; fona attēls: url("http://www.kirupa.com/images/pinkSquare.png ") ; ) #itemFour ( fona krāsa: #DC143C; fona attēls: url ("http://www.kirupa.com/images/graySquare.png"); )
Tagad, skatot lapu, jūs redzēsit kaut ko līdzīgu tam, kas parādīts ekrānuzņēmumā:
Jūs redzēsit četrus lielus taisnstūrveida blokus, kas ir kārtīgi novietoti blakus. Atkarībā no ekrāna izšķirtspējas un pārlūkprogrammas loga lieluma, iespējams, vajadzēs ritināt nedaudz pa labi vai pa kreisi, lai redzētu visus taisnstūrus.
Tagad pievērsiet nelielu uzmanību un mēģiniet saprast, kāpēc jūs redzat to, ko redzat. Pārskatiet HTML marķējumu un izprotiet elementus, kas atrodas jūsu dokumentā.
Pievērsiet uzmanību tajā izmantotajām klases un id vērtībām, jo tās atbildīs pievienotā stila noteikumiem. Apskatiet stila noteikumus un to, kā to vizualizācija ietekmē rezultātu. Tagad apkoposim to visu.
Ko mēs esam izdarījušiMūsu HTML iezīmējumā redzamais saturs sastāv no četriem div elementiem, no kuriem katrs satur satura klases vērtību. Šī klases vērtība izriet no .content style noteikuma, kas nosaka katra bloka izmēru: 550 pikseļu platums un 350 pikseļu augstums:
Saturs ( peldošs: pa kreisi; platums: 550 pikseļi; augstums: 350 pikseļi; atstarpe: parastais; fona atkārtojums: bez atkārtošanas; )
Stila noteikums .content arī norāda, ka peldošā vērtība ir atstāta. Rezultātā div elementi tiek sakārtoti rindā. Pēdējā lieta, ko deklarē šis stila noteikums, ir atstarpes rekvizīts. Šis rekvizīts nosaka, kā teksts rindkopā tiks ietīts.
Es izmantoju šo īpašumu tikai ērtības labad. Ja izlemsit pārsniegt šī raksta darbības jomu un pievienot saturu katram div elementam, jūs man pateiksiet paldies, jo jūsu teksts tiks ietīts pareizi, vai arī noņemsit šo rekvizītu (vai iestatīsit citu vērtību), ja to nedarīsit. negribu redzēt viņu.
Šajā brīdī mūsu div elements ir pareizi piemērots un sakārtots. Žēl, ka viņš ir pilnīgi neredzams:
Lai atrisinātu šo problēmu, mēs katram div piešķiram unikālu identifikatoru, izmantojot id vērtības: itemOne , itemTwo , itemThree , anditemFour . Stilu sadaļā mums ir četri stila noteikumi, kas atbilst šīm ID vērtībām:
#itemOne ( fona krāsa: #0099CC; fona attēls: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo ( fona krāsa: #FFCC00; fona attēls: url("http://www.kirupa.com/images/yellowSquare.png"); #itemThree (fona krāsa: #FF6666; fona attēls: url("http://www.kirupa.com/images /) pinkSquare.png"); ) #itemFour ( fona krāsa: #E8E8E8; fona attēls: url ("http://www.kirupa.com/images/graySquare.png"); )
Kā redzat, šie stila noteikumi nosaka tikai mūsu satura fona krāsu un fona attēlu. No šī brīža dīvi vairs nav neredzami. Tie tiek parādīti kā dažādu krāsu taisnstūri ar izmēru 550x350 pikseļi.
Esam gandrīz pabeiguši. Pēdējais, ko apskatīsim, ir noslēpumainais div, kas satur ID iesaiņojumu:
Šis elements iesaiņo visu mūsu saturu vienā konteinerā. Šis nav konteiners, ko es biju domājis pārskatā, kad runāju par visa satura noņemšanu ap satura blokiem.
Šis konteiners ir paredzēts kaut kam nedaudz atšķirīgam. Tas burtiski tikai iesaiņo saturu, lai mēs varētu to visu apskatīt.
Atbilstošais #wrapper stila noteikums izpilda šo uzdevumu:
#wrapper ( platums: 2200 pikseļi; pozīcija: relatīvs; pa kreisi: 0 pikseļi; )
Šis stila noteikums vispirms definē iesaiņojuma elementa platumu kā 2200 pikseļus. Tas ir, kopējais mūsu satura platums... ko iegūstat, reizinot 4 (ar div elementu skaitu) ar 550 pikseļiem.
Pozīcija un kreisās puses rekvizīti ir paredzēti, lai iestatītu iespēju pārvietot konteineru uz jebkuru vietu, kuru mēs vēlamies. Iestatot pozīcijas rekvizītu uz relatīvs , mēs noņemam elementu no standarta dokumenta struktūras un ļaujam to novietot jebkurā vietā, izmantojot pikseļu vērtības attiecībā pret to, kur tas pašlaik atrodas.
Tā kā mūsu div satura bloki ir šī div atvasinātie elementi, tie tiek pārvilkti uz vietu, kur ir novietots vecākais div. Kā jūs varat iedomāties, tas ir ļoti ērti!
Satura apgriešanaIepriekšējā sadaļā mēs parūpējāmies par to satura bloku iegūšanu, kas tiks izvadīti. Nākamā lieta, ko mēs darīsim, ir apgriezt saturu tā, lai jebkurā brīdī būtu redzams tikai viens slīdņu bloks.
Šeit mums ir nepieciešams galvenais konteiners. Aptiniet visus HTML koda div elementus div daļā ar ID contentContainer :
Vienkārši pievienojiet divas jaunas rindiņas un, ja vēlaties, rindiņu atkāpes, kas vienkārši paredzētas, lai pareizi izkārtotu HTML kodu.
Tagad, ja paskatās uz mūsu iesaiņoto (atkal) saturu, jūs neredzēsit neko jaunu. Vienkārša elementu ievietošana citā div nedod neko jēgpilnu, vēl jo mazāk neko, ko mēs vēlamies darīt, lai apgrieztu saturu.
Lai pievienotu šo nozīmīgo darbību, izveidojiet šo #contentContainer stila noteikumu:
#contentContainer (platums: 550 pikseļi; augstums: 350 pikseļi; apmale: 5 pikseļi, melna cieta krāsa; pārplūde: paslēpta; )
Ņemiet vērā, ka elementa contentContainer lielumu iestatāt uz 550 x 350 pikseļiem. Tas ir, tieši tāds pats izmērs kā katram satura blokam. Lai slīdnis nedaudz izceltos, mēs iestatījām melnu rāmi 5 pikseļu platumā.
Pēdējā lieta, ko mēs darām, ir apgriezt saturu, iestatot pārpildes rekvizītu uz paslēptu . Tas ir paredzēts, lai paslēptu visu ārpus contentContainer elementa.
Tas viss kopā sniedz mums šādu attēlu pārlūkprogrammā:
Lūdzu, ņemiet vērā, ka tagad ir redzams tikai jūsu pirmā bloka saturs. Pārējais saturs joprojām pastāv, tikai tagad tas ir paslēpts, jo mēs izgriezām, izmantojot pārpildes rekvizīta slēpto vērtību.
Navigācijas saitesTātad mēs tikām pie viņiem! Mēs tuvojamies pilnībā strādājoša slīdņa iegūšanai. Šajā sadaļā mēs koncentrēsimies uz navigācijas saitēm — uz elementiem, uz kuriem noklikšķināt, lai skatītu citus satura blokus.
Šīm saitēm nav nekāda sakara ar mūsu contentContainer vai jebkuru citu HTML datu, kas mums jau ir. Jums ir jāpievieno iezīmētās rindiņas jau esošajam HTML kodam (bet virs skripta taga):
Īsi apskatīsim tikko pievienoto HTML kodu. Pirmkārt, mums ir div ar navLinks ID, kas apraksta nesakārtotu sarakstu. Pašas saites tiek parādītas kā saraksta vienumi.
Katrs saraksta elements satur itemLinks klases vērtību, kā arī pielāgotu data-* atribūtu, ko sauc par data-pos . Mēs atgriezīsimies pie šī atribūta nedaudz vēlāk, bet pagaidām ievērojiet, ka tas pastāv.
Mums ir jāpielāgo tikko pievienotais HTML kods. Sadaļā Stili pievienojiet šādus noteikumus:
#navLinks ( text-align: center; platums: 550px; ) #navLinks ul ( piemale: 0px; polsterējums: 0px; displejs: inline-block; margin-top: 6px; ) #navLinks ul li ( peldēt: pa kreisi; teksts- līdzināt: centra stils: fona krāsa: #CCCCCC: #FFFF00; kontūras platums: 7 pikseļi ) #navLinks ul li.active:hover ( fona krāsa: #484848; krāsa: #FFFFFF)
Oho, tik daudz CSS. Lai arī koda ir daudz, tajā nav nekā īsti unikāla vai interesanta. Daļa no CSS koda izveido horizontālu izvēlni ar saitēm, kas tiek rādītas blakus viena otrai.
Pārējā koda daļa nosaka katras saites izskatu, kā arī tai atbilstošo izcēlumu, virzot kursoru virs tās.
Joprojām ir vērts pakavēties pie viena punkta sīkāk.
Tas ir saistīts ar diviem stila noteikumiem, kas attiecas uz aktīvo klasi:
#navLinks ul li.active ( fona krāsa: #333333; krāsa: #FFFFFF; kontūras platums: 7 pikseļi; ) #navLinks ul li.active:hover ( fona krāsa: #484848; krāsa: #FFFFFF; )
Ja atceraties, mūsu HTML kodā nebija neviena elementa, kura klases vērtība būtu aktīva . Neatkarīgi no tā, šie stila noteikumi joprojām tiks piemēroti, jo aktīvā klase tiek dinamiski pievienota kādai no mūsu saitēm.
Ja jums šobrīd ir grūti to visu izdomāt, neuztraucieties, mēs to ļoti drīz izskatīsim sīkāk.
Šobrīd mūsu slīdnis izskatās šādi:
Ja jūsu slīdnis neizskatās pareizi, pastāv liela iespēja, ka esat pieļāvis drukas kļūdu... vai kaut ko citu. Vai tas ir noticis?
Paša slīdņa izveideLabi, pagaidām mums ir kaut kas, kas izskatās ļoti līdzīgs strādājošam slīdnim. Tomēr, noklikšķinot uz kādas no saitēm, nekas nenotiek.
Tagad izveidosim strādājošu slīdni, bet vispirms pievienosim JavaScript un dažus lieliskus elementus... proti, dažas jaukas CSS pārejas.
JavaScript pievienošanaSkripta taga iekšpusē pievienojiet šādas JavaScript koda rindiņas:
// tikai prasu DOM... kā mēs prasām bosam atļauju! var saites = document.querySelectorAll(.itemLinks"); var wrapper = document.querySelector("#wrapper"); // ActiveLink nodrošina marķējumu aktīvajam elementam var activeLink = 0; // iestatīt notikumu izsekošanu (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; }
Viss, kas mums jādara, ir nodrošināt vienmērīgu pāreju, nevis pēkšņu slaidu maiņu.
Pārejas pievienošanaPašlaik mums ir satura slīdnis, kas vēl neritina saturu vienmērīgi. Tā vietā slaidi pēkšņi pārlec no viena uz nākamo. Lai saturs ritinātu vienmērīgi, izmantosim CSS pāreju. Pievienosim vienu no iespējamajām pārejām mūsu slīdnim.
Atrodiet #wrapper stila kārtulu un pievienojiet tam vienu rindiņu:
Pievienotā rinda nosaka pāreju. Tajā norādītais rekvizīts norāda, ka pārejai jānotiek, mainoties kreisajam rekvizītam. Mūsu pāreja notiks 0,5 sekunžu laikā, un tiks izmantota laika atvieglošanas funkcija, lai paātrinātu procesu pārejas sākumā un palēninātu beigās.
Tā kā pārejas īpašumā joprojām tiek veiktas dažas izmaiņas W3C, jums būs jāizmanto prefiksi, lai nodrošinātu, ka jebkura moderna pārlūkprogramma var piemērot pāreju. Ja nevēlaties to risināt, pievienojiet šo skriptu tieši pirms skripta taga:
Nē, šis skripts nedara neko ļaunprātīgu. Šī ir Leah Veru bibliotēkas bez prefiksa mitināta versija. Tā vietā, lai uzzinātu daudz par to, kā darbojas slīdņi, varat arī vienkārši lejupielādēt viņas skriptu, augšupielādēt to savā serverī un izveidot saiti uz savu versiju.
Jebkurā gadījumā, ja skatāt dokumentu tagad, jums vajadzētu būt funkcionējošam satura slīdnim, kas vienmērīgi parāda saturu, noklikšķinot uz jebkuras navigācijas saites. Tam vajadzētu būt identiskam tam, ko redzējāt piemērā, kas ievietots šī raksta pašā sākumā.
Beidzot!!!
Parsēšanas kods (un viss pārējais!)Tagad, kad mums ir darbojošs satura slīdnis, mēģināsim no paša sākuma saprast, kā kods to visu saista.
Kas īsti notiekKad satura slīdnis ir ielādēts, tiek parādīts pirmais satura bloks. Pārējais saturs ir apgriezts un paslēpts.
Noklikšķinot uz jebkuras saites, tiek parādīts atbilstošais satura bloks. Slīdnis zina, cik daudz satura parādīt redzamajā apgabalā, pateicoties ciešajai saistībai starp katru navigācijas saiti un katra satura bloka pikseļu pozīciju.
Mēģināsim izprast šo saistību. Ir dažas lietas, ko mēs zinām. Mēs zinām, ka katrs mūsu satura bloks ir 550 pikseļus plats. Mēs arī zinām, ka mūsu pirmais satura bloks ir iestatīts horizontāli uz 0 pikseļiem.
Kā mēs to zinām? Visi mūsu satura bloki ir ietīti iesaiņojuma elementā, kas aptver visu mūsu saturu, un iesaiņojuma elementa kreisās malas pozīcija ir 0 pikseļi:
Tas ir norādīts #wrapper stila noteikumā. No šī stila noteikuma mēs arī zinām, ka visi satura bloki ir nobīdīti pa kreisi un novietoti rindā blakus.
Zinot to, mēs varam aprēķināt pozīcijas visiem satura blokiem šādi:
Pirmais bloks atrodas 0 pikseļos. Pirmā satura bloka platums ir otrā bloka pozīcija. Tas ir 550 pikseļi. Katram nākamajam blokam ir par 550 pikseļiem lielāka pozīcija nekā iepriekšējam.
Tā kā mēs zinām precīzu katra satura bloka pikseļu pozīciju, mēs varam izmantot šo informāciju, lai satura slīdnim liktu pārvietot iesaiņojuma elementu uz vēlamo vietu, lai būtu redzama vēlamā satura daļa.
Data-pos atribūts!Lieliski, tagad mēs zinām visu satura bloku pozīcijas. Tas, ko mēs vēl neesam apskatījuši, ir tas, kā satura bloka pikseļu pozīcijas zināšana palīdzēs mums parādīt vajadzīgo bloku slīdņa logā.
Kā mēs varam norādīt, ka, noklikšķinot uz saites, ir jāparāda konkrēts satura bloks? Vienkārši. Katra saite satur precīzu tā satura bloka pozīciju (pikseļos), kuram tā atbilst:
Ņemiet vērā, ka atribūts data-pos norāda uz katru no saitēm, katra datu-pos atribūta vērtību. Tie ir vienādi ar katra satura bloka sākotnējās horizontālās pozīcijas negatīvo vērtību.
Kad noklikšķinām uz saites, tiek izmantots JavaScript, kas nolasa ar šo saiti saistīto data-pos atribūtu un pēc tam pārslēdz mūsu iesaiņojuma elementa pikseļa pozīcijas vērtību uz vērtību, kas tika nolasīta no atribūta.
Piemēram, lūk, kas notiek pēc noklikšķināšanas uz trešās saites:
Trešās saites datu pozīcija ir 1100 pikseļi. Tas atbilst tam, cik pikseļu konteinera apvalks būs jāpārvieto, lai redzamajā apgabalā tiktu parādīts trešais satura bloks. Noklikšķinot uz jebkuras citas saites, čaulas elementa rekvizīts tiks iestatīts uz vērtību, kas ietverta šīs saites atribūtā data-pos.
Labi, mēs esam apskatījuši saistību starp saitēm un satura pozicionēšanu, par ko es runāju iepriekš. Tagad atliek tikai apskatīt JavaScript, kas visu, par ko rakstīju šajā sadaļā, pārveidos par pārlūkprogrammai saprotamu.
Tas viss ir par JavaScriptTā kā tagad jums ir konceptuāla izpratne par to, kā viss darbojas mūsu satura slīdnī, apskatīsim JavaScript, kas ievieš visu, ko zināt. Tāpat kā es daru visos savos rakstos, sadalīsim katru JavaScript rindiņu un redzēsim, kā tā darbojas mūsu slīdnī.
Sāksim no pašas augšas:
var saites = document.querySelectorAll(.itemLinks"); var wrapper = document.querySelector("#wrapper");
Saišu mainīgais aizņem visu mūsu dokumenta elementu kopu, kam ir klases itemLinks vērtība. Šie elementi ir saraksta vienumi, kas darbojas kā navigācijas saites. Iesaiņojuma mainīgais ir ļoti līdzīgs saitēm. Tā pieņem rādītāju uz elementu ar identifikatora iesaiņojumu .
querySelector un querySelectorAllIevērojiet, kā es vaicāju DOM. Tā vietā, lai izmantotu kaut ko līdzīgu getElementsByClassName vai getElementById , es izmantoju jaunās funkcijas querySelectorAll un querySelector.
Jūs redzēsit, ka mēs vēlāk izmantosim abus šos mainīgos, tāpēc paturiet tos prātā.
var activeLink = 0;
ActiveLink mainīgais tiek izmantots, lai saglabātu pašlaik parādītā satura pozīciju. Jūs labāk sapratīsit šī mainīgā nozīmi, kad es paskaidrošu to darbībā nedaudz vēlāk.
Nākamā rindu kopa ir for cilpa:
// notikumu izsekošanas iestatīšana (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }
Šeit mēs atkārtojam katru saišu mainīgo elementu un piešķiram tam notikumu izsekošanu. Šis notikumu izsekošanas elements izsauks funkciju setClickedItem, kad tiks tverts klikšķa notikums.
Šī rinda rada vairākas izmaiņas:
// iestatot pirmo elementu kā aktīvu links.classList.add("active");
Mēs pievienojam aktīvās klases vērtību pirmajam navigācijas saites elementam. Tas tiek darīts, nododot ActiveLink vērtību saišu masīvam. Tā kā ActiveLink ir 0, masīvs parasti aizņem pirmo elementu un, izmantojot classList API, pievieno aktīvās klases vērtību.
Vai atcerieties, kad pēc šīs koda rindas izpildīšanas pievērsām uzmanību šādiem stila noteikumiem?
Tagad šie stila noteikumi stājas spēkā un palīdz atšķirt aktīvo navigācijas saiti no citu neaktīvo saišu saraksta. Mēs atgriezīsimies pie šiem stila noteikumiem nedaudz vēlāk un aplūkosim tos sīkāk.
Nākamā lieta, ko mēs apskatīsim, ir notikumu apdarinātājs setClickedItem, kas tiek izsaukts, kad tiek noklikšķināts uz kādas no saitēm:
funkcija setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Šī funkcija vispirms pārslēdz visu jūsu saišu stāvokli uz neaktīvu, izmantojot izsaukumu removeActiveLinks. Mēs apskatīsim šo funkciju nedaudz vēlāk.
Vēl viena svarīga lieta, ko šī funkcija dara, ir tā, ka tā maina atlasītā vienuma rekvizīta itemID vērtību uz ActiveLink. Tas nodrošina, ka ActiveLink vienmēr norāda uz numuru, kas atbilst pašlaik slīdnī parādītajam satura blokam.
Pēc šo divu (diezgan garlaicīgo) darbību veikšanas šī funkcija nodod atsauci uz atlasīto elementu funkcijai changePosition. Kas savukārt dara dažas pārsteidzošas lietas, par kurām es runāšu nākamajā rindkopā.
Šeit notiek interesantas pārmaiņas! Palēksim nedaudz uz priekšu un apskatīsim funkciju changePosition:
// Apdarinātājs maina slīdņa pozīciju pēc tam, kad esam pārliecinājušies, // ka vajadzīgā saite ir norādīta kā aktīva. funkcija changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozīcija; )
Šī funkcija veic divas darbības:
es Pārslēdz atlasītās saites vizuālo displeju, lai norādītu, ka tā pašlaik ir aktīva.
II. Iestata apvalka elementa pozīciju.
Apskatīsim šīs divas lietas sīkāk.
Pārslēgt atlasītās/aktīvās saites vizuālo rādīšanuLai jums būtu skaidrāk, par ko es runāju iepriekš, jūsu navigācijas saites var būt vienā no diviem stāvokļiem. Šie stāvokļi ir paredzēti, lai lietotājs varētu redzēt, kurš satura bloks pašlaik ir aktīvs:
Šajā attēlā jūs varat uzreiz noteikt, ka satura bloks, kas atbilst ceturtajai saitei, pašlaik ir aktīvs, un pirmās trīs saites ir neaktīvas.
Šīs vizuālās izmaiņas tiek veiktas, pievienojot un noņemot CSS klases. Aktīvā klase tiek pievienota aktīvajai saitei. Visās saitēs, kas nav aktīvas, nav aktīvas klases vērtības. Jūs sapratīsit, kā tas darbojas, kad aplūkosim funkciju removeActiveLinks.
Jebkurā gadījumā jūs atceraties, ka iepriekš mēs saucām šādus divus stila noteikumus:
#navLinks ul li.active ( fona krāsa: #333333; krāsa: #FFFFFF; kontūras platums: 7 pikseļi; ) #navLinks ul li.active:hover ( fona krāsa: #484848; krāsa: #FFFFFF; )
Funkcijā setClickedItem (pazīstama arī kā funkcija, kas tiks izsaukta, noklikšķinot uz saites), mēs vispirms izsaucam RemoveActiveLinks:
funkcija setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Šī funkcija ir atbildīga par aktīvās klases noņemšanu visām navigācijas saitēm:
funkcija removeActiveLinks() ( for (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
Varat to uzskatīt par globālās atiestatīšanas pogu. Tas atkārtojas, izmantojot navigācijas saites, kas tiek saglabātas saišu mainīgajā, un noņem aktīvās klases vērtību, izmantojot classList.remove() . Vienkārši paturiet prātā, ka, ja kāda no navigācijas saitēm saturēja aktīvās klases vērtību, labi... tās vairs nebūs.
Tādējādi mēs apskatījām, kā noņemt aktīvo klasi no visām jūsu saitēm. Klases pievienošana pēc kārtas ir ļoti vienkārša:
funkcija removeActiveLinks() ( for (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
To pašu ClassList, ko izmantojām iepriekš, lai noņemtu aktīvās klases vērtību, mēs izmantojam, lai pievienotu aktīvās klases vērtības atpakaļ atlasītajai saitei. Šī atlasītā saite saņem saites argumentu, kas tai tiek nodots.
Korpusa pozīcijas iestatīšanaEsam gandrīz pabeiguši! Pēc visām šīm darbībām mēs beidzot nonākam pie ChangePosition funkcijas, kas faktiski nosaka slīdņa ādas elementa pozīciju un parāda satura bloku, kas atbilst atlasītajai saitei.
Apskatīsim šādu fragmentu:
funkcija changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = pozīcija; )
Pozīcijas mainīgais saglabā tās saites datu-pos atribūta vērtību, uz kuras noklikšķinājām. Kad esam ieguvuši atribūta data-pos vērtību, mēs iestatām iesaiņojuma elementa CSS kreiso rekvizītu uz tādu pašu vērtību.
Kā tas ir saistīts ar slīdņa efekta ieviešanu? Vai atceries, ka pirms kāda laika #wrapper stilam pievienojām vienu noteikumu?
#iesaiņojums (platums: 2200 pikseļi; pozīcija: relatīvs; pa kreisi: 0 pikseļi; pāreja: pa kreisi, 0,5 s vieglums iekšā-ārā; )
Ņemiet vērā, ka esam definējuši pāreju, kas stājas spēkā, mainoties kreisajam īpašumam. Uzminiet, ko dara mūsu JavaScript? Iestata kreiso īpašumu! CSS pāreja nosaka šīs izmaiņas un aktivizē satura pārvietošanu. Viss, kas jums nepieciešams, lai tas viss darbotos, ir jāpievieno viena JavaScript rindiņa.
Es nezinu, kā jums, bet man tas ir vienkārši pārsteidzoši. Tas ir kaut kas, ko mēs nevarējām iedomāties pirms dažiem gadiem, kad mums bija jāpieliek daudz pūļu un jāraksta kods, lai apstrādātu slīdņa efektu. Tas padara mūsu satura slīdni skaistu.
Tieši tāpat mēs no jauna izveidojām satura slīdni un (kas ir vēl svarīgāk) uzzinājām, kā tas darbojas.
Satura slīdņa uzlabošanaTikko izveidotais satura slīdnis ir diezgan foršs, taču mēs varam to padarīt vēl foršāku. Šajā sadaļā mēs apskatīsim divus uzlabojumus, kas jums varētu būt ļoti noderīgi. Pa ceļam mēs apgūsim dažus jaunus JavaScript un CSS trikus. Būs, kā tagad saka jaunieši: "Es raudu!"
Ritināšana ar translate3d transformācijuPašlaik mūsu slaidi tiek ritināti, mainot CSS kreisā rekvizīta vērtību, kas tiek lietota iesaiņojuma div elementam. Izmantojot kreiso īpašību, slīdnis darbojas, taču šai metodei ir nopietni trūkumi. Nevar izmantot aparatūras paātrinājumu, lai nodrošinātu vienmērīgu slaidu pāreju.
Tas jo īpaši attiecas uz mobilajām ierīcēm, kurās bieži tiek izmantota aparatūra ar zemu interneta savienojuma ātrumu, un šeit var būt īpaši pamanāmas periodiskas, lecīgas slaidu izmaiņas.
To var novērst, izmantojot translate3d transformācijas funkciju, kas ļaus slaidiem kustēties vienmērīgi. Šī funkcija izmanto x, y un z vērtības kā argumentus, un, mainot jebkuru no šīm vērtībām, tiks mainīta mērķa elementa pozīcija.
Šīs funkcijas īpatnība ir tāda, ka tās izmantošanas rezultātā pārlūkprogrammas aparatūra paātrina pozīcijas maiņu. Ko mēs gaidām?
Pirmā lieta, kas mums jādara, ir mainīt #wrapper stila noteikumu. Nomainiet pozīcijas deklarāciju un kreisos rekvizītus ar šādu kodu:
Tādējādi transformācija nosaka čaulas elementa sākotnējo pozīciju.
Pirmais posms: palīgelementu pievienošanaPirmajā darbībā mēs pievienojam šādu papildu kodu zem galvenā koda, kas mums pašlaik ir:
// // Transformāciju izmantošana // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transforms); // pārvaldīt piegādātāja prefiksus funkciju getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }
Šis kods palīdzēs mums iestatīt pārveidošanas rekvizītu, izmantojot pārdevēja prefiksus, lai to atbalstītu pēc iespējas vairāk pārlūkprogrammu.
Šajā rakstā es nepaskaidrošu šīs rindas. Vienīgais, kas jums jāzina, ir tas, ka viss šis kods palīdz iestatīt īpašuma pārveidošanu, msTransform, mozTransform vai oTransform. Atkarībā no tā, cik vecu pārlūkprogrammu izmantojat, tiks izmantota viena no šīm vērtībām.
Otrais posms: Ahoy!Funkcijā changePosition atrodiet šādas koda rindas:
funkcija changePosition(link) ( var position = link.getAttribute("data-pos"); wrapper.style.left = position; link.classList.add("active"); )
Aizstājiet tos ar šādu kodu:
funkcija changePosition(link) ( var position = link.getAttribute("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}
Šis kods veic dažas diezgan vienkāršas lietas. Mainīgais translateValue izveido uz virkni balstītu translate3d funkcijas attēlojumu, kurā X daļa ir aizpildīta ar pozīcijas mainīgā vērtību. Kad šī virkne ir izveidota, viss, kas mums jādara, ir jānodod tā iesaiņojuma elementa stila objektam.
Ņemiet vērā, ka atbilstošā stila rekvizīta definīciju apstrādā mainīgais transformProperty, kuru mēs apskatījām nedaudz agrāk.
Ja tagad skatāt dokumentu, jūs redzēsit, ka slīdņa satura bloki pāriet no vienas vietas uz otru.
Acīmredzot tas nav tas, ko jūs gaidījāt redzēt. Kas notika ar vienmērīgu kustību? Atbilde ir tāda, ka mums trūkst vēl vienas izmaiņas. Par laimi, to ir viegli salabot. Ja atgriezīsimies pie #wrapper stila kārtulas, pamanīsim, ka pārejas deklarācija izskatās šādi:
#wrapper ( platums: 2200 pikseļi; transformācija: translate3d(0, 0, 0); pāreja: pa kreisi 0,5 s vieglums iekšā-out; )
Mūsu pāreja uzskaita izmaiņas kreisajā īpašumā. Mēs vairs neizmantojam šo īpašumu, tāpēc mūsu pāreja nevar sākt darboties. Lai labotu šo šausmīgo netaisnību, pārejas deklarācijā aizstājiet kreiso rekvizītu atslēgvārdu ar pārveidošanas rekvizītu atslēgvārdu:
#wrapper ( platums: 2200 pikseļi; transformācija: translate3d(0, 0, 0); pāreja: transformācija .5 s easy-in-out; )
Kad veiksiet šīs izmaiņas, mūsu slīdnis atkal darbosies tāpat kā iepriekš.
Vienīgā atšķirība ir tā, ka slaidu mainīšanai tagad tiek izmantots aparatūras paātrinājums, un tas tagad notiks vienmērīgāk un tiks atbalstīts vairākās ierīcēs.
Automātiska slaidu maiņa ar dažu sekunžu intervāluPašlaik mūsu slaidi mainās tikai tad, kad noklikšķinām uz vienas no navigācijas saitēm. Bet tas nav vienīgais slīdņa darbības veids. Daudzi satura slīdņi automātiski ritina saturu ik pēc dažām sekundēm, un ir arī iespēja pāriet uz noteiktu sadaļu, izmantojot navigācijas saites.
Tālāk varat skatīt viena šāda satura slīdņa piemēru:
Jā, šis ir mūsu vecais slīdnis ar nelielām izmaiņām, lai saturs varētu automātiski ritināt konteinerā. Uzminiet, ko mēs darīsim tālāk?
Liksim slaidiem ritināt automātiski!SetInterval funkcija mums to palīdzēs. Šīs funkcijas galvenais uzdevums ir nodrošināt, lai kods tiktu izpildīts regulāri:
window.setInterval(functionToCall, delay);
Ik pēc dažām sekundēm (vai neatkarīgi no tā, ko iestatāt kā intervāla vērtību), funkcija setInterval liek mūsu slīdnim pāriet uz nākamo satura bloku.
Kad saturs ir beidzies, slīdnis iet cauri cilpai līdz satura sākumam un sākas no jauna. Tas tiek darīts diezgan viegli. Viss, kas jums jādara, ir jāzina daži triki un skaidri jāsaprot, kā darbojas jūsu satura slīdnis.
Pirmā izmaiņa, kas mums jāveic, ir pievienot papildu kodu, kas nepieciešams darba veikšanai. Jau esošā koda beigās pievienojiet šādas rindiņas:
// // Kods automātiskai slaidu maiņai // var timeoutID; funkcija startTimer() ( // pagaidiet 2 sekundes pirms izsauciet goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funkcija goToNextItem() ( removeActiveLinks(); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
Drīzumā apskatīsim, ko šis kods nozīmē. Tagad pievienojiet to visu. Kad tas ir izdarīts, pārlūkprogrammā skatiet satura slīdni. Jūs redzēsit, ka satura slaidi konteinerā mainās ik pēc divām sekundēm.
Mums ir jāveic tikai viena būtiska izmaiņa. Pašlaik slaidi pagriežas ik pēc divām sekundēm neatkarīgi no tā, vai noklikšķināt uz navigācijas saites vai nē.
Pareizais veids, kā to izdarīt, ir atiestatīt taimeri uz 0, kad tiek noklikšķināts uz vienas no saitēm. Lai veiktu šīs izmaiņas, notikumu apdarinātājam setClickedItem pievienojiet šādu koda rindiņu.
Satura slīdnis darbosies kā paredzēts, kad jūs iejauksities un noklikšķināsit uz navigācijas saites. Urrā!
Automātiskās slaidu maiņas skaidrojumsTātad, mums ir atlicis izdomāt tikai vienu lietu. Īsi apskatīsim tikko pievienoto kodu un sapratīsim, kāpēc tas dara to, ko dara.
Sāksim ar funkciju goToNextItem/span>:
funkcija goToNextItem() ( removeActiveLinks(); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
Šī funkcija ir atbildīga par pašlaik rādītā satura un tam sekojošā satura izsekošanu. Lai labāk saprastu, kas notiek, apskatiet tālāk redzamo attēlu:
ActiveLink mainīgais norāda uz pašlaik parādītā satura bloka pozīciju. Katra informācijas daļa ir saistīta ar atbilstošu elementu saišu masīvā.
Kopējo elementu skaitu saišu masīvā var iestatīt, izmantojot garuma rekvizītu. Tagad atgriezīsimies pie mūsu koda.
Funkcijas goToNextItem priekšraksts if vienkārši pārbauda, vai vēl ir palicis saturs vai slīdnim jāatgriežas sākumā:
if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }
Ja jūs rūpīgi aplūkojat diagrammu un kodu, jūs sapratīsit loģiku. Būtībā, tiklīdz būs iegūta pareizā ActiveLink vērtība, viss pārējais mūsu slīdnī darbosies kā maģiski.
Pati maģija tiek veikta, izmantojot šādas divas rindiņas, ko nodrošina funkcija changePosition, kas savukārt tiek izsaukta ar rādītāju uz nākamo izvadāmā satura bloku:
var newLink = saites; changePosition(newLink);
Šobrīd mūsu koda apstrādes veids neatšķiras no tā, kā tas tika apstrādāts, kad uz saites tika noklikšķināts manuāli.
Tātad... mēs apskatījām kodu funkcijā goToNextItem, lai pārietu uz nākamo satura daļu. Lai izsauktu šo slaidu, automātiski tiek izmantotas šādas rindas:
var timeoutID; funkcija startTimer() ( // pagaidiet 2 sekundes pirms izsauciet goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
Lai sāktu, tiek izmantota startTimer funkcija. Šī funkcija satur izsaukumu setInterval, kas nodrošina, ka funkcija goToNextItem tiek izsaukta ik pēc 2 sekundēm (vai 2000 milisekundēm).
Vienkārši pievienojot šo funkciju (un izsaucot to), satura slīdnis sāks automātiski ritināt satura blokus.
Atliek tikai noskaidrot, kā taimeris (ko es saucu par setInterval) tiek atiestatīts, manuāli noklikšķinot uz saites. Lai to risinātu, tiek izmantots mūsu rīcībā esošais atlikušais kods.
Taimeris tiek atiestatīts, apturot funkciju setInterval un pēc tam palaižot to vēlreiz. Kā tas tiek darīts, var būt nedaudz sarežģīti izdomāt.
Mēs saglabājam izsauktās funkcijas setInterval identifikatoru un pēc tam izmantojam to pašu identifikatoru, lai vēlāk pārtrauktu tās pašas funkcijas setInterval izsaukšanu. Ļaujiet man precizēt.
Mēs saglabājam šo identifikatoru timeoutID mainīgajā un inicializējam startTimer izsaukumā, un šo pašu identifikatoru ir ērti izmantot funkcijā resetTimer:
funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
Funkcija clearInterval izmanto tās funkcijas setInterval ID (izmantojot timeoutID ), kuru vēlamies apturēt.
Kad esam apturējuši taimeri funkcijā resetTimer, mēs izsaucam startTimer un sākam visu no jauna:
funkcija resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
Loģika ir vienkārša. Taimeris apstājas, kad manuāli atlasāt, kuru satura bloku rādīt slīdnī:
funkcija setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )
Kad esat atlasījis jaunu satura bloku, slīdnis aptur divas sekundes, pirms pāriet uz nākamo bloku. To visu uzrauga startTimer un resetTimer funkcijas.
SecinājumsTas ir viss, mēs esam apskatījuši, kā izveidot skaistu satura slīdni, izmantojot tikai
HTML CSSun JavaScript. Jūs arī uzzinājāt, kā iestatīt dažas izmaiņas, lai uzlabotu veiktspēju un atļautu automātiskas satura bloku izmaiņas.
Lai gan pats slīdnis nav definēts ar lielu kodu, iespējams, ka tā pamatā esošo jēdzienu izpratne prasīs kādu laiku. Rakstā esmu iekļāvis saites uz citiem avotiem, kas aptver tēmas, kuras esmu pieskāries tikai virspusēji. Jūs varat tos izlasīt, kad jums ir laiks to izdarīt.
Satura slīdņiem ir dažādas formas un izmēri. Daži sastāv no vairākiem līmeņiem, kuros saturu var mainīt gan vertikāli, gan horizontāli.
Daži slīdņi satur vertikāli izlīdzinātu saturu ar blokiem, kas sakrauti viens virs otra. Ja esat diezgan proaktīvs un vēlaties izmantot CSS, nevis pāreju
Dažreiz man ir jāatrisina problēmas, kas saistītas ar frontend, neskatoties uz to, ka man tas nepatīk :)
Patiešām, manu attieksmi pret visu, kas saistīts ar "skaisto" varētu novērtēt pēc šīs vietnes dizaina, ko izstrādāju es viena :)
Tomēr salīdzinoši nesen es saskāros ar nepieciešamību ieviest slīdni JavaScript, un tas bija jādara bez gatavām bibliotēkām un pat bez ikviena iecienītā jQuery.
Šo vajadzību izraisīja fakts, ka rezultātam vajadzēja būt JS skriptam, kas būtu savienots ar vietni, izmantojot trešās puses pakalpojumu. Līdz ar to gatavie karuseļi JavaScript valodā vairs nebija vajadzīgi, jo Lai tos integrētu, vietnes HTML kodam bija jāpievieno bibliotēkas savienojums, izmantojot skripta tagu, un paši faili jākopē vai nu uz serveri, vai arī jāvelk tie, izmantojot cdn, taču tam atkal būs jārediģē resursa kods.
Kā izveidot JavaScript slīdni: sākumsŠodien domāju, ka visi, kas nokļuva līdzīgā situācijā, sāka ar esošo izstrādņu meklēšanu, jo... kad JS karuseļa izgatavošana ir darba ietvaros, tas vienmēr jādara pēc iespējas ātrāk. Un šādos apstākļos neviens tev neļaus sēdēt un izgudrot savus velosipēdus.
Klientiem vienmēr ir vienalga, kā kods ir uzrakstīts, kāda ir tā arhitektūra, galvenais ir redzēt rezultātu!
Rezultātā, kā jūs saprotat, pirms slīdņa rakstīšanas JavaScript bez jQuery, es nolēmu atrast gatavu un pārveidot to, lai tas atbilstu savām vajadzībām. Kāpēc nav jQuery? Jā, jo mērķa resursā, kur es plānoju savienot savu slīdni, izmantojot pakalpojumu, jQuery izsaukums kodā atradās vēlāk nekā pakalpojuma savienotais skripts. Tāpēc jQuery konstrukcijas manā kodā vienkārši netika uztvertas.
Par pamatu ņēmu šo JavaScript attēla slīdni - https://codepen.io/gabrieleromanato/pen/pIfoD.
Es nolēmu pie tā apstāties, jo... tā JS kods tika uzrakstīts, izmantojot OOP principus, un tā klases ir balstītas uz prototipiem, nevis uz banālām funkcijām.
Godīgi sakot, es dziļi nesaprotu un neatpazīstu pašreizējo ažiotāžu par JavaScript, izmantojot OOP, ietvarus un citas arhitektūras lietas valodā, kas sākotnēji bija paredzēta kā vienkārša dinamiska skriptu valoda. Tāpat kā pats JS, man tas, atklāti sakot, nepatīk ar savu sintaktisko vinegretu, kas ļauj vienas un tās pašas konstrukcijas rakstīt vairākos veidos.
Bet diemžēl mūsdienu pasaulē maz cilvēku piekrīt manām pozīcijām, jo... šī valoda attīstās trakā tempā un pat mēģina iekarot aizmugursistēmas izstrādātāju prātus, izmantojot Node.js kā alternatīvu Java, PHP, C#, Ruby un citiem monstriem.
Rezultātā, lai vienkārši nepaliktu bez darba, pa kluso ir jāizdomā JavaScript. Un tīrajā JavaScript slīdņa ieviešanā, kuru es izvēlējos, es saskāros ar kaut ko tādu, ko, kā jūs saprotat, es nicinu šajā valodā. Tāpēc arī izvēlējos, lai būtu vismaz pamats strādāt un saprast JavaScript OOP un prototipu nodarbības - citādi nekad mūžā labprātīgi tām nebūtu pieskāries :)
Pamatojoties uz atrasto kodu, man vajadzēja izstrādāt slīdni tīrā JS uznirstošajā logā (šo lietu sauc arī par uznirstošo logu, uznirstošo logu utt.), kurā būtu pogas slaidu pārslēgšanai un noklikšķināmi pašreizējā indikatori. slidkalniņš. Vajadzēja arī uztaisīt pogu, lai šo logu aizvērtu.
Tas ir tas, ar ko es beidzu.
Slīdņa JS bibliotēkas izveidošanaPirmkārt, nolēmu visu ieviest gudri un izveidot vietnei JavaScript slīdni bibliotēkas veidā, kuru var savienot ar vietni ar vienu skriptu, kurā tiks izsaukti slīdņa komponenti, kas sadalīti apakšdirektorijās. Es nolēmu to nosaukt popupSlider.js par godu tā sākotnējam mērķim.
Tās kodu var atrast vietnē GitHub šajā adresē - https://github.com/Pashaster12/popupSlider.js
Bibliotēkas struktūra ir šāda:
Slaidu mape ir paredzēta slaidu attēliem. Vadīklas satur JS karuseļa vadīklu attēlus (pogas slīdņa aizvēršanai un slaidu pārslēgšanai). Un aktīvos ir statiski JS slīdņa elementi: HTML marķējums un fails ar CSS stiliem.
PopupSlider.js fails ir pašas bibliotēkas sirds, kurā tiek ierakstītas karuseļa JavaScript darbības un tiek izveidots savienojums ar citiem failiem. Tieši šo mēs izveidosim vietnē, un tas piezvanīs citiem.
Es nolēmu sākt ar mūsu JS attēlu karuseļa HTML iezīmēšanu, kas manā gadījumā izskatās šādi:
1. teksts 
2. teksts 
3. teksts
Lai izstrādātu slīdni JavaScript kā uznirstošo logu, es izmantoju šādus stilus:
#slīdnis ( margin: auto; platums: 600px !important; overflow: paslēpts; ) #slider-wrapper ( platums: 9999px; augstums: 343px; pozīcija: relatīvs; pāreja: pa kreisi 400 ms lineāra; ) .slide ( pludiņš: pa kreisi; platums : 600 pikseļi; pozīcija: relatīvā pārpilde: slēpta; . paraksts (platums: 600 pikseļi; augstums: 110 pikseļi; rindiņas augstums: 1,5; fonta svars: 300; teksta līdzinājums: centrā; krāsa: # 000; displejs: tabula; .caption-container ( displejs: tabulas šūna; vertikālais līdzinājums: vidū; polsterējums: 0 20 pikseļi; ) #slider-nav ( pozīcija: absolūtā; apakšā: -36 pikseļi; teksta līdzināšana: centrā; pa kreisi: 50% pārveidot: translateX(-50%) ; piemale: 0 5px; fona krāsa: #fafafa : 20 pikseļi; augšdaļa: 50%; pa kreisi: -40 pikseļi; ) #prev:hover ( fons: url(../controls/arrow_left_active.png); ) #next ( fons: url(../controls/arrow_right_inactive.png); pa labi: -40px; ) #next:hover ( fons : url(../controls/arrow_right_active.png); #cq-popup ( platums: 600 pikseļi; z-indekss: 23; pa kreisi: calc(50%); augšā: calc(50%); pozīcija: fiksēta !svarīgi ; fona atkārtojums: fona krāsa: #fff; fontu ģimene: "Roboto", "Georgia", "Calibri", "Verdana" ; %, -50%) skala(1); #cq-popup .header (displejs: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div (platums: 500px; font- izmērs: 22 pikseļi; līnijas augstums: 36 pikseļi; augstums: 16px; platums: 16 pikseļi ) #cq-popup-btclose: hover (fons: url(../controls/btn_delete_active.png); ) #cq-popup-bg (pozīcija: fiksēts; platums: 100%; augstums: 100%; fons: rgba(51,51,51,0,8); z-indekss: 22; )
Šo JS stilu lietošanas rezultātā karuselis izskatās šādi:
Es pārvietoju gan HTML marķējumu, gan CSS stilus atsevišķos failos popupSlider.html un popupSlider.css, kas atrodas JavaScript slīdņa bibliotēkas līdzekļu direktorijā. Es to darīju ar nolūku, lai, izmantojot šo kodu, lietotāji varētu viegli pielāgot marķējumu un dizainu, nejaucoties JS kodā, kur tieši būtu jāraksta tas, kas būtu jāizraksta.
Turklāt daudziem cilvēkiem joprojām patīk samazināt JS, lai paātrinātu vietnes ielādi. Tāpēc būtu ļoti grūti pielāgot šo risinājumu noteiktajos apstākļos.
Rezultātā es nolēmu vienkārši iekļaut gatavus failus galvenās bibliotēkas failā popupSlider.js, kas manam uzdevumam bija šādā formā:
Funkcija Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: funkcija () ( this.links = this.el.querySelectorAll ("#slider-nav a") this.wrapper ("#slider-wrapper") ) ( var self = šis; for (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 = "bloķēt"; else if (indekss == 1) this.prevBtn.style.display = "nav"; ), setCurrentLink: funkcija (saite) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = saite; for (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(); } } };
Daži komentāri par iepriekš minēto kodu. PopupSlider.js faila saturs ir viena JavaScript Slider klase, kas, tāpat kā PHP, satur konstruktoru un klases metodes. Tikai JS konstruktora definīcija atšķirībā no PHP ir obligāta.
Konstruktors tiek definēts, izmantojot šādu konstrukciju:
Funkcijas slīdnis(elements) ( //konstruktora kods)
Konstruktora iekšpusē ir jānorāda darbības, kas tiks veiktas, veidojot klases objektu.
Pašas klases metodes atradīsies prototipa iekšpusē un būs pieejamas visiem šīs JavaScript klases gadījumiem. JS prototips manā gadījumā ir aprakstīts ar šādu dizainu:
Slīdnis.prototype = ( //metodes )
Ārpus klases pamatteksta tie tiks saukti šādi:
Var slīdnis = jauns Slīdnis(); slider.class_method();
Un pašā klases kodā ir pieejama šāda metode:
This.class_method();
Galvenais ir neaizmirst, ka JavaScript tā vērtība ir atkarīga no izsaukuma konteksta, tāpēc dažu metožu korpusos, kuros bija nepieciešams izsaukt klases metodes un īpašības, ir šāda konstrukcija:
Var self = šis; self.class_method(); //lai piekļūtu metodei, kas ir vienu līmeni augstāka par aprakstītās metodes kodu
Šķiet, es runāju par visām koda rakstīšanas niansēm. Tagad daži vārdi par mūsu JavaScript klases metodēm, kas satur attēlu karuseļa JS darbību aprakstus.
loadStatic()
Pati pirmā metode, kas tiek izsaukta, veidojot klases gadījumu konstruktorā. Atbildīgs par slīdņa marķējuma un faila ar stiliem pievienošanu vietnes lapas HTML kodam.
Pirmkārt, atmiņā tiek izveidots jauns saites tags, izmantojot JavaScript funkciju document.createElement(), un tam tiek piešķirtas visu nepieciešamo atribūtu vērtības, ieskaitot ceļu uz CSS failu ar JS slīdņa stiliem. Un visbeidzot, tas tiek pievienots HTML lapai, izmantojot JavaScript appendChild() metodi galvas sadaļas beigās, kur jābūt stiliem.
Pēc tam mēs darām to pašu failam ar mūsu slīdņa HTML marķējumu tīrā JavaScript. Šeit ir tikai neliela nianse: jūs nevarat tajā pašā failā iekļaut tikai HTML failu, kā mēs to darījām ar CSS failu. Tam ir īpašas bibliotēkas, piemēram, lai HTML iekļautu HTML, lib no w3.org ir lielisks - https://www.w3schools.com/howto/howto_html_include.asp
Bet tad tas ir jāiekļauj pašā slīdņu bibliotēkā vai jālūdz lietotājiem pašiem to instalēt. Bet tas viss ir neoptimāli, jo... prasa daudz ķermeņa kustību un palēnina vietnes ielādes ātrumu papildu skriptu dēļ.
Galu galā es nolēmu ievietot HTML faila saturu JavaScript kodā un ielādēt to jaunā div elementā, kas izveidots atmiņā, tāpat kā iepriekš, lai iekļautu CSS failu JavaScript. Ģenerētais elements ir iekļauts vietnes lapas HTML koda pamatdaļas pašā beigās.
Ja vēlaties ievietot div ar slīdņa marķējumu ne tikai pamatteksta beigās, bet arī noteiktā konteinerā, tā vietā varat izmantot šādu kodu:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Ievadiet šo, norādot vēlamo mērķa konteinera identifikatoru (manā gadījumā HTML JS slīdnis atradīsies elementā ar id popupSlider):
Var mērķis = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Metode, kas tiek izsaukta konstruktorā pēc loadStatic(), ir nepieciešama, lai inicializētu klases rekvizītus, kas atbilst galvenajiem HTML elementiem, kuriem mēs piekļūsim nākamajā kodā.
Beigās tiek izsaukta metode navigate().
pārvietoties ()
Izmantojot šo metodi, darbības, kas notiek, noklikšķinot uz slaidu slēdža pogām un navigācijas elementiem, kas atrodas zem slīdņa, tiek norādīti apļu veidā.
Ērtības labad es pārvietoju JavaScript kodu slaidu maiņai uz atsevišķu metodi slide(), bet šajā gadījumā es to vienkārši pievienoju klikšķa notikumam katrai cilpas pogai.
Noklikšķinot uz pogām “iepriekšējais slaids” / “nākamais slaids”, kā redzat, es nolēmu vienkārši atdarināt klikšķi uz atbilstošā apļa, definējot vēlamo attiecībā pret pašreizējo, kuram ir CSS klases strāva.
slaids (elements)
Paša JavaScript karuseļa metode “atbildīga par burvību”, kas satur kodu, kas maina slaidu pozīcijas. Pašā sākumā tiek izsaukta metode setCurrentLink(), par kuru mēs runāsim nedaudz vēlāk.
JS slīdņa navigācijas pogas objekts apļa formā tiek nodots tam kā ievades parametrs.
Pats slīdslēdzis darbojas šādi:
Metodes beigās ir aprakstīta “iepriekšējā slaida”/”nākamā slaida” pogu darbība, kas veidota attiecīgi kā kreisās/labās bultiņas. Ja pašreizējais slaids ir pirmais no visa saraksta, poga, lai pārietu uz iepriekšējo slaidu, ir paslēpta. Ja pēdējais, noņemiet pogu, lai pārietu uz nākamo slaidu.
setCurrentLink(saite)
Šī mūsu JavaScript slīdņa klases metode ir atbildīga par pašreizējam elementam atbilstošās navigācijas kārtas pogas izcelšanu. Tie. ja ir atlasīts otrais slaids, tiks iezīmēta otrā poga.
Pogas objekts, kas jāizvēlas kā pašreizējais, tiek nodots kā funkcijas ievades parametrs.
Pašreizējā elementa izcelšanas loģika ir vienkārša:
Pati pēdējā klases metode, kas nosaka darbību, noklikšķinot uz slīdņa aizvēršanas pogas krusta formā. Šeit patiesībā kods ir saprotamākais no visiem, kas ietverti JS slīdņa klasē.
Noklikšķinot uz aizvēršanas pogas, kurai var piekļūt, izmantojot tās identifikatoru, no lapas tiek noņemts slīdņa elements un elements, kas nosaka caurspīdīgo fonu. Tos savukārt iegūst arī unikāli identifikatori.
Pati metode tiek izsaukta iepriekš aprakstītajā navigate(), kas satur visus mūsu JavaScript slīdnī notiekošo darbību scenārijus.
Starp citu, ja vēlaties aizvērt slīdni, noklikšķinot ārpus tā, vienkārši pievienojiet šai metodei šādu kodu:
Document.getElementById("cq-popup-bg").onclick = funkcija () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
JavaScript slaidrāde, kuras pamatā ir izstrādātā bibliotēkaDažreiz praksē var būt nepieciešams izveidot JS ritināšanas karuseli, ko bieži sauc par slaidrādi. Manā gadījumā tas nebija nepieciešams, taču es tomēr nolēmu izveidot tādu, pamatojoties uz galīgo bibliotēkas kodu, ja tas varētu noderēt.
Faktiski slaidrādes JavaScript ieviešana diezgan nedaudz atšķiras no parastā slīdņa. Vienīgā atšķirība ir tāda, ka slaidrādē slaidi pārslēdzas automātiski noteiktā laika intervālā, savukārt parastajā JS karuselī tie mainās manuāli, izmantojot navigācijas elementus.
SlideShow: funkcija (taimauts) ( 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(""));
Es domāju, ka ir skaidrs, kas šeit notiek. Lai izveidotu šo metodi, es nokopēju kodu no manuālo slaidu pogu klikšķa notikuma un ievietoju to JavaScript izsaukumā uz funkciju setInterval(), kas veic norādīto darbību pēc noteikta laika perioda.
Darbības skripts tiek nodots kā pirmais arguments kā anonīma funkcija, un laika intervāls tiek nodots kā otrais, ko es nolēmu izveidot kā mainīgo, kura vērtība tiek nodota, izsaucot slideShow().
Vienīgā modifikācija koda iekšienē setInterval (), kas bija nepieciešama, bija noteikt slaidu skaitu un salīdzināt pašreizējā slaida indeksu ar to, lai veiktu automātisko pārslēgšanu.
Nu, lai šis kods darbotos, ir jāizsauc pati metode. Es nolēmu to visu darīt tajā pašā navigate(), kas ir tieši visu veidu skriptu kolekcija. Es piezvanīju pašās beigās, kā argumentu nododot laika intervāla vērtību automātiskai slaidu maiņai mūsu JS slaidrādē (izvēlējos 2000 milisekundes vai 2 sekundes, pēc vajadzības varat mainīt šo numuru):
Self.slideShow(2000);
Pēc tam pārbaudiet JavaScript slīdņa darbību, neaizmirstot notīrīt pārlūkprogrammu.
Teorētiski visam vajadzētu darboties. Ja nē, izpētiet kļūdas pārlūkprogrammas konsolē un kopīgojiet tās komentāros.
Rezultātā ieguvām JS slaidrādi, kurā slaidi pārslēdzas automātiski un pa apli, t.i. Kad tiek sasniegts pēdējais slaids, pārraide pāriet jaunā cilpā un izrāde sākas no jauna no paša pirmā elementa.
Strādājot ar dažādām JS bibliotēkām attēlu karuseļiem un apskatiem, pamanīju, ka izstrādātāji aktīvi izmanto šo praksi, taču ar kādu papildinājumu. Visos risinājumos, ko esmu redzējis, automātiskā slaidrāde tiek pārtraukta, ja lietotājs veic manuālu pārslēgšanu. Tāpēc es nolēmu darīt to pašu savā bibliotēkā.
Lai pārtrauktu JavaScript karuseļa slaidu automātisko attēlošanu, es nolēmu izmantot standarta JS funkciju clearInterval(), kurai kā argumentu nododu laika intervāla identifikatoru, ko atgriež funkcija setInterval(), kad tā ir iestatīta.
Rezultātā es saņēmu šādu kodu, kuru es nolēmu nerakstīt kā atsevišķu metodi:
ClearInterval(self.slideCycle);
Un ievietoja to vietās, kur ir aprakstītas darbības, noklikšķinot uz dažādiem navigācijas elementiem, t.i. sekojošajā:
Link.addEventListener("klikšķis", funkcija (e) (...)); self.prevBtn.addEventListener("klikšķis", funkcija (e) (...)); self.nextBtn.addEventListener("klikšķis", funkcija (e) (...));
Labāk ir izsaukt clearInterval() tuvāk pašam klikšķa notikumam, galvenais ir pirms tā, nevis pēc tā.
JavaScript slīdņa integrēšana vietnēTātad, mūsu slīdnis tīrā JS ir gatavs. Tagad atliek tikai savienot to ar vietni.
Lai to izdarītu, jums ir jāveic šādas darbības secīgi, kas ir standarta darbības, integrējot trešās puses JavaScript bibliotēkas kopumā.
1. darbība. Mēs kopējam bibliotēkas failus uz mūsu vietni atsevišķā direktorijā.
2. darbība. Pievienojiet šo kodu to lapu HTML kodam, kurās būs jāparāda slīdnis, ievietojot to pirms beigu body taga:
3. darbība. Mēs ievietojam šādu kodu JS karuseļa izsaukšanai jebkurā esošajā JavaScript failā, kas tiek iekļauts lapā pēc paša slīdņa pievienošanas:
Var aSlider = new Slider("#slider");
Kā redzat, šis kods būtībā veido Slider klases objektu, kas ir ietverts popupSlider.js. Tāpēc to vajadzētu izsaukt tikai pēc paša klases faila pievienošanas lapai.
Jaunu slaidu pievienošana JavaScript karuselimŠeit viss ir ļoti vienkārši. Tā kā mūsu slaidi ir ņemti no atsevišķa slaidu bibliotēkas direktorija, pievienojot jaunus attēlus, jums būs jāiemet tajā nepieciešamie faili, vispirms piešķirot tiem tādu pašu izmēru kā pārējiem.
Un pēc tam faila aktīvi/popupSlider.html kodā konteineram pievienojiet jaunu bloku ar id slider-wrapper :
Teksts
Principā var vienkārši nokopēt līdzīgu esošu un mainīt ceļu uz attēla failu un paraksta tekstu (ja tas vispār ir vajadzīgs).
Jums būs jāpievieno arī jauns navigācijas elements apļa formā, jo... Šobrīd tā automātiskā pievienošana vēl nav ieviesta. Lai to izdarītu, konteineram ar slider-nav ID būs jāpievieno šāds kods, ierakstot to pašā beigās:
Datu slaida atribūta vērtībai ir jābūt lielākai par pārējo elementu lielāko vērtību. Pietiek tikai palielināt maksimālo strāvu par vienu.
JS karuseļa iesaiņošana vienā skriptāViss, JavaScript slīdnis ir gatavs un pievienots. Es personīgi iesaku izmantot šo iespēju praksē, ja jums tas vispār ir nepieciešams :)
Lai paātrinātu tā darbību, starp citu, varat vēl vairāk saspiest statiskos komponentus: CSS, HTML un JavaScript failus. Es to nedarīju un piedāvāju jums samazinātu kodu, jo tagad ir daudz priekšgala veidošanas sistēmu: Gulp, Grunt, Webpack un citas. Un katram no tiem ir savs algoritms failu saspiešanai un savienošanai.
Turklāt samazinātie rezultāti dažādās operētājsistēmās var darboties atšķirīgi. Kopumā ir daudz iemeslu.
Un paši pirmkodi, manuprāt, nav tik smagi, lai tiem būtu nepieciešama šī procedūra. Bet, ja jums tie ir nepieciešami, konfigurējiet minifikāciju pats, ņemot vērā savu OS un savācēju.
Kā jau rakstīju pašā sākumā, lai atrisinātu sākotnēji uzdoto uzdevumu, man vajadzēja iegūt vienu JS failu, lai pareizi izmantotu manu slīdni, izmantojot vietnes trešās puses pakalpojumu. Šī iemesla dēļ es, stingri ņemot, neizmantoju gatavas trešo pušu bibliotēkas.
Tad jums noderēs viena JavaScript karuseļa skripta iespēja, jo... viss saturs tiks ietverts tieši tajā, ieskaitot HTML/CSS kodu, kas bibliotēkas gadījumā tiek glabāts atsevišķos failos.
Skripts manā gadījumā sastāv no divām daļām. Pirmajā daļā bija popupSlider.js faila saturs, kuru otrreiz neprezentēšu. Ievietojiet to pats, no klases koda noņemot loadStatic() metodes aprakstu un tās izsaukumu, jo mums tie nebūs vajadzīgi.
Vietnes viena JavaScript slīdņa skripta otrā daļa ir DOMContentLoaded notikuma apstrādātājs, kas notiek, kad tiek ielādēts lapas saturs.
Tur pievienosim karuseļa JS kodu HTML/CSS lapai un izveidosim Slider klases objektu, kas ir līdzvērtīgs paša slīdņa aktivizēšanai.
Shematiski kods izskatās šādi:
/* faila popupSlider.js saturs, neaprakstot metodi loadStatic() un tās izsaukumu */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css kods*/ \ /* html kods * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Tā kā manā gadījumā failu augšupielādes iespēja serverī bija pilnībā aizvērta, JavaScript karuseļa vadīklu attēlu faili bija jāaugšupielādē mākonī un HTML un CSS kodā jāieraksta ģenerētās saites, nevis ceļi uz tiem. ietaupot.
Ja jums nav šādu grūtību, jums nekas nav jāmaina, taču neaizmirstiet kopēt slaidus un vadīklu bibliotēkas direktorijus uz serveri un norādīt pareizos ceļus uz tiem.
Pielāgots JS slīdnis - attīstības perspektīvasJa godīgi, tad neplānoju nodarboties ar mērķtiecīgu paša radītā risinājuma atbalstīšanu un izstrādi :) Šobrīd ir kaudze līdzīgu slideriņu un mazie ratiņi, kuriem atšķirībā no manējā ir sava vēsture, ir rūpīgi pārbaudīti, un tos atbalsta liela lietotāju un izstrādātāju kopiena.
Man kaut kā nav interesanti sākt visu šo ceļojumu no nulles un izveidot citu velosipēdu, un man tam īsti nav laika. Bet, no otras puses, šis JavaScript slīdnis ir lieliska iespēja praktizēt izstrādi, pārveidojot tā kodu un ieviešot jaunas interesantas funkcijas, kuras, iespējams, vēl nepastāv.
Tātad, ja jums, tāpat kā man, ir nepieciešama koda bāze eksperimentiem un jums ir vismaz nedaudz papildu brīvā laika, kopējiet manis aprakstītā JavaScript slīdņa kodu vai pievienojieties GitHub atbalstītājiem. Repozitorijs ir atvērts, un raksta sākumā es norādīju saiti uz to.
Ja vēlaties uzlabot savas priekšgala prasmes manā darbā, es pat varu jums sniegt nelielu sarakstu ar labojumiem un uzlabojumiem, kas nepieciešami kodam un kas varētu jūs interesēt to ieviešanas ziņā:
Manis sniegtais labojumu saraksts, protams, nav galīgs un to var papildināt. Par saviem priekšlikumiem, domām un vēlmēm rakstiet komentāros zem raksta un dalieties ar draugiem sociālajos tīklos, lai arī viņus iesaistītu izstrādē.
Aicinu strikti nevērtēt manu kodu, jo, kā jau teicu, neuzskatu sevi par Frontend speciālistu un arī neesmu. Esmu atvērts arī visiem jūsu komentāriem par kodēšanas stilu un ceru, ka varu kaut ko mācīties no jums, bet jūs no manis, t.i. izpildītu galveno mērķi – izstrādāt un atbalstīt OpenSource produktus.
Pievienojieties projektu kopienām, abonējiet atjauninājumus, un jūs pat varat man palīdzēt finansiāli, izmantojot veidlapu tieši zem raksta, ja es varēju jums kaut ko palīdzēt vai jums vienkārši patīk tas, ko daru :)
Tas ir viss, ko es gribēju pateikt! Visu to labāko! 🙂
Bet, tā kā mēs apskatām JS pamatus, lai izpētītu pamatus, es aprakstīšu, kā izveidot vienkāršu slīdni, izmantojot tikai JavaScript valodu. Nu, sāksim analizēt materiālu!
Kādi slīdņu veidi pastāv un kur tie varētu būt nepieciešami?Visos tīmekļa pakalpojumos, kuros ir vismaz dažas fotogrāfijas, ir jāizveido ērtas galerijas attēlu apskatei. Tie var būt tiešsaistes veikali, portfeļa vietnes, ziņu un izglītības pakalpojumi, uzņēmumu un izklaides iestāžu vietnes ar fotoreportāžiem utt.
Tomēr šī ir standarta slīdņu izmantošana. Šādas tehnoloģijas tiek izmantotas arī, lai piesaistītu klientus akcijas precēm, pakalpojumiem vai aprakstītu uzņēmumu priekšrocības.
Pārsvarā klienti to lūdz ieviest “Karuseļa” tipa galerijās. Šis ir ērts rīks liela izmēra attēlu skatīšanai ar iespēju lietotājam pārslēgt slaidus uz priekšu un atpakaļ. Šādā gadījumā paši attēli parasti pēc noteikta laika pārslēdzas automātiski. Šis mehānisms tika nosaukts tāpēc, ka attēlu parādīšana tiek atkārtota aplī.
Šodien, ja vēlaties, jūs varat atrast visneparastākos un pievilcīgākos spraudņus internetā, lai skatītu fotoattēlu kopu.
Patstāvīga darbībaNu, tagad sāksim izveidot savu slīdni. Šajā mācību posmā, lai to īstenotu, iesaku izmantot tīru . Tas automātiski pārslēgs attēlus lokā.
Zemāk esmu pievienojis sava pieteikuma kodu. Kodējot, atstāju jums komentārus.
| 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 |
|
Automātiskais attēlu pārslēdzējs /*Rāmja izskata aprakstīšana, nākotnes slīdņa pamats */ #slaidi( pozīcija: relatīvs; augstums: 415 pikseļi; platums: 100%; polsterējums: 0px; saraksta stila veids: nav; lodziņš- ēna: 0 0 7px #010, 0 0 10px zils, 0 0 15px #010, 0 0 35px #010; ) /* Attēlu displeja rediģēšana*/ img ( platums: auto; augstums: 390px; polsterējums: 13px; ) /* Norāda, ka satura saraksta vienumi tiks parādīti vecākelementa centrā, t.i. šajā gadījumā ul elementa centrā - slaidu pamats */ li ( text-align: center; ) /* Es aprakstu pašu slaidu izskatu */ .slide( pozīcija: absolūts; necaurredzamība: 0 ; augšā: 0px: 100% - moz-pāreja: necaurredzamība 1,5 s; : 1; z-indekss: 4;
Ceru, ka jums nebija nekādu problēmu ar css un html kodu. Bet es uzskatu, ka ir nepieciešams izjaukt scenārija darbu. Tātad pāriesim pie rakstītā atšifrēšanas.
Tātad, pirmkārt, izmantojot querySelectorAll metodi, es piešķiru MySlider mainīgajam visu elementu sarakstu norādītajā diapazonā. Norāda šo ierakstu
document.querySelectorAll("#slaidi .slaids")
Tādējādi MySlider saglabā četru elementu kolekciju.
Tālāk es norādīju, kurš attēls jāsāk rādīt, iestatot pašreizējo attēla mainīgo uz nulli. Tad norādu, ka slaidu maiņa notiek 2,7 sekundēs un jāizsauc nextSlide apstrādes funkcija.
Pāriesim pie pašas funkcijas.
Sākotnēji aktuālajam saraksta elementam mainu klašu aprakstu, t.i. Es pārrakstu “slaidrāde” uz “slaids”. Līdz ar to attēls kļūst neredzams.
Tagad es definēju jaunu kolekcijas elementu, kas tiks parādīts ekrānā. Lai to izdarītu, es ieņemu pašreizējo pozīciju +1. Iespējams, esat ievērojuši, ka es izmantoju arī dalīšanu ar atlikumu (%) pēc pieejamo slaidu skaita. Šis triks ar ausīm ir nepieciešams, lai izrādi sāktu jaunā lokā. Lūk, kā tas burtiski izskatītos:
Bet tagad iegūtajam elementam piešķiru klases aprakstu “slaidrāde”. Kā redzat, viss tiek īstenots pēc iespējas vienkāršāk.
Paldies par jūsu uzmanību. Neaizmirstiet pievienoties manu abonentu grupai, lasīt jaunus rakstus un, protams, kopīgot saites uz savām iecienītākajām publikācijām ar draugiem. Es novēlu jums veiksmi JavaScript apguvē. Čau čau!
Ar cieņu, Romāns Čuešovs
Lasīts: 256 reizes
Ja savai vietnei ir jāpievieno augstas kvalitātes jQuery attēla slīdnis, tad šajā rakstā atradīsit nepieciešamo spraudņu aprakstu. Lai gan JQuery ir padarījis darbu ar JavaScript daudz vienkāršāku, mums joprojām ir nepieciešami spraudņi, lai paātrinātu tīmekļa izstrādes procesu.
Mēs varam veikt izmaiņas dažos no šiem spraudņiem un izveidot jaunus slīdņus, kas ir daudz piemērotāki mūsu vietnes mērķiem.
Citiem slīdņiem vienkārši pievienojiet nosaukumus, attēlus un atlasiet slaidu pārejas efektus, kas tiek piegādāti kopā ar slīdni. Visiem šiem spraudņiem ir pievienota detalizēta dokumentācija, tāpēc jaunu efektu vai funkciju pievienošana tiem nebūs sarežģīta. Ja esat pieredzējis JQuery programmētājs, varat pat mainīt uz notikumiem balstītus aktivizētājus.
Jaunākās tendences, piemēram, adaptīvais dizains, ir ļoti svarīgas tīmekļa projektos neatkarīgi no tā, vai ieviešat spraudni vai skriptu. Visi šie elementi padara katru no šiem spraudņiem ļoti elastīgu. Viss, kas iznāca 2014. gadā, ir iekļauts šajā sarakstā.
JQuery attēlu slīdņi Jssor atsaucīgais slīdnisEs nesen saskāros ar šo jaudīgo JQuery slīdni un varēju redzēt, ka tas ļoti labi veic savu darbu. Tajā ir neierobežotas iespējas, kuras var paplašināt, izmantojot slīdņa atvērtā pirmkoda kodu:
- Adaptīvs dizains;
- Vairāk nekā 15 pielāgošanas iespējas;
- Vairāk nekā 15 attēlu maiņas efekti;
- Attēlu galerija, karuselis, pilnekrāna izmēra atbalsts;
- Vertikālais banera rotators, slaidu saraksts;
- Video atbalsts.
Demo | Lejupielādēt
PgwSlider — atsaucīgs slīdnis, kura pamatā ir JQuery/ZeptoVienīgais šī spraudņa uzdevums ir parādīt attēlu slaidus. Tas ir ļoti kompakts, jo jQuery faili ir tikai 2,5 KB lieli, kas ļauj to ļoti ātri ielādēt:
- Adaptīvs izkārtojums;
- SEO optimizācija;
- Atbalsts dažādām pārlūkprogrammām;
- Vienkāršas attēlu pārejas;
- Arhīva lielums ir tikai 2,5 KB.
Demo | Lejupielādēt
Elastīgs un noderīgs JQuery slīdnis, kas paredzēts ziņu resursiem ar publikāciju sarakstu kreisajā pusē un attēlu labajā pusē:
- Adaptīvs dizains;
- Vertikālā kolonna ziņu pārslēgšanai;
- Izvērstas galvenes.
Demo | Lejupielādēt
Šis slīdnis nesatur jQuery, taču es vēlētos to prezentēt, jo tas ir ļoti kompakts un var ievērojami samazināt lapas ielādes laiku. Paziņojiet man, ja jums tas patīk:
- Adaptīvs izkārtojums;
- Vienkāršs dizains;
- Dažādas slaidu maiņas iespējas;
- minimāls JavaScript kods;
- Izmērs ir tikai 3KB.
Demo | Lejupielādēt
Dokumentu izkaisītai uz rakstāmgalda stila galerijai ar elastīgu izkārtojumu un skaistu dizainu vajadzētu interesēt daudzus no jums. Vairāk piemērots planšetdatoriem un lieliem displejiem:
- Adaptīvs slīdnis;
- Plakans dizains;
- Slaidu nejauša maiņa;
- Pilna piekļuve pirmkodam.
Demo | Lejupielādēt
Demo | Lejupielādēt
HiSlider ir ieviesis jaunu bezmaksas jQuery slīdņa spraudni, ar kuru varat izveidot dažādas attēlu galerijas ar fantastiskām pārejām:
- Adaptīvs slīdnis;
- neprasa programmēšanas zināšanas;
- Vairākas pārsteidzošas veidnes un ādas;
- Skaisti pārejas efekti;
- Atbalsts dažādām platformām;
- Savietojams ar WordPress, Joomla, Drupal;
- Iespēja attēlot dažāda veida saturu: attēlus, YouTube video un Vimeo video;
- Elastīga iestatīšana;
- Noderīgas papildu funkcijas;
- Neierobežots rādītā satura daudzums.
Demo |Lejupielādēt
WOW Slider ir atsaucīgs jQuery attēlu slīdnis ar pārsteidzošiem vizuāliem efektiem (domino, pagriešana, aizmiglošana, apvēršana un mirgošana, izlidošana, žalūzijas) un profesionālām veidnēm.
WOW Slider ir aprīkots ar instalēšanas vedni, kas ļauj dažu sekunžu laikā izveidot fantastiskus slīdņus, neizprotot kodu vai rediģējot attēlus. Lejupielādei ir pieejamas arī Joomla un WordPress spraudņa versijas:
- Pilnībā atsaucīgs;
- Atbalsta visas pārlūkprogrammas un visu veidu ierīces;
- Skārienierīču atbalsts;
- Vienkārša instalēšana uz WordPress;
- Elastība konfigurācijā;
- SEO optimizēts.
Demo |Lejupielādēt
Nivo Slider ir pazīstams visā pasaulē kā skaistākais un vienkāršākais attēlu slīdnis. Nivo Slider spraudnis ir bezmaksas un izdots saskaņā ar MIT licenci:
- Nepieciešama JQuery 1.7 un jaunāka versija;
- Skaisti pārejas efekti;
- Vienkārši un elastīgi konfigurējams;
- Kompakts un pielāgojams;
- Atvērtais avots;
- Spēcīgs un vienkāršs;
- Vairākas dažādas veidnes;
- Automātiska attēlu apgriešana.
Demo |Lejupielādēt
Ideju iedvesmojuši Apple slīdņi, kuros vairāki mazi elementi var izlidot ar dažādiem animācijas efektiem. Izstrādātāji centās ieviest šo koncepciju, ņemot vērā minimālās prasības vienkārša interneta veikala dizaina izveidei, kurā “lidojošie” elementi pārstāv dažādas kategorijas:
- Adaptīvs izkārtojums;
- minimālistisks dizains;
- Dažādi pamešanas un slaidu maiņas efekti.
Demo |Lejupielādēt
Ļoti vienkāršs slīdnis, kas aizņem 100% no lapas platuma un pielāgojas mobilo ierīču ekrāna izmēriem. Tas darbojas ar CSS pārejām, un attēli tiek "sakrauti" kopā ar enkuriem. Enkuru var nomainīt vai noņemt, ja nevēlaties pievienot attēlam saiti.
Kad tas ir instalēts, slīdnis tiek paplašināts līdz 100% no ekrāna platuma. Tas var arī automātiski samazināt slaidu attēlu lielumu:
- Adaptīvs JQuery slīdnis;
- Pilna izmēra;
- Minimālistisks dizains.
Demo |Lejupielādēt
Elastīgais satura slīdnis automātiski pielāgo platumu un augstumu, pamatojoties uz galvenā elementa izmēriem. Šis ir vienkāršs jQuery slīdnis. Tas sastāv no slaidu apgabala augšpusē un navigācijas cilnes joslas apakšā. Slīdnis pielāgo tā platumu un augstumu atbilstoši vecākkonteinera izmēriem.
Skatoties uz maziem diagonāliem ekrāniem, navigācijas cilnes kļūst par mazām ikonām:
- Adaptīvs dizains;
- Ar peles klikšķi ritiniet.
Demo |Lejupielādēt
Eksperimentāls slīdnis, kas ritina attēlus 3D formātā. Abas kaudzes atgādina papīra kaudzes, no kurām ritinot tiek parādīti attēli slīdņa centrā:
- Adaptīvs dizains;
- Flip - pāreja;
- 3D efekti.
Demo |Lejupielādēt
Šī apmācība parādīs, kā izveidot slīdni ar pagriezienu: ideja ir “izgriezt” un parādīt pašreizējo slaidu, atverot nākamo vai iepriekšējo attēlu. Izmantojot JQuery un CSS animāciju, mēs varam izveidot unikālus pārejas efektus:
- Adaptīvs dizains;
- Sadalīta pāreja;
- Pilnekrāna slīdnis.
Demo |Lejupielādēt
Nav nevajadzīgu zvanu un svilpienu, mazāks par 3 KB. Slaidiem izmantojiet jebkuru HTML kodu, paplašiniet to ar CSS. Viss, kas saistīts ar Unslider, tiek mitināts vietnē GitHub:
- Atbalsts dažādām pārlūkprogrammām;
- Tastatūras atbalsts;
- Augstuma regulēšana;
- Adaptīvs dizains;
- Pieskāriena ievades atbalsts.
Demo | Lejupielādēt
Vienkāršs un kompakts spraudnis (tikai 1 KB liels), kas izveido atsaucīgu slīdni, izmantojot konteinera elementus. ResponsiveSLides.js darbojas ar plašu pārlūkprogrammu klāstu, tostarp visām IE versijām no IE6 un jaunākām versijām:
- Pilnībā atsaucīgs;
- Izmērs 1 KB;
- CSS3 pārejas ar iespēju darboties caur JavaScript;
- Vienkārša iezīmēšana, izmantojot aizzīmju sarakstus;
- Iespēja pielāgot pārejas efektus un viena slaida skatīšanās ilgumu;
- Atbalsta iespēju izveidot vairākas slaidrādes;
- Automātiska un manuāla ritināšana.
Demo |Lejupielādēt
Kamera ir spraudnis ar daudziem pārejas efektiem un atsaucīgu izkārtojumu. Viegli iestatīt, atbalsta mobilās ierīces:
- Pilnībā atsaucīgs dizains;
- Paraksti;
- Iespēja pievienot video;
- 33 dažādu krāsu ikonas.
Demo |Lejupielādēt
SlidesJS ir adaptīvs spraudnis JQuery (1.7.1 un jaunākām versijām) ar atbalstu skārienierīcēm un CSS3 pārejām. Eksperimentējiet ar to, izmēģiniet dažus gatavus piemērus, kas palīdzēs izdomāt, kā projektam pievienot SlidesJS:
- Adaptīvs dizains;
- CSS3 pārejas;
- Skārienierīču atbalsts;
- Viegli uzstādīt.
Demo | Lejupielādēt
Šis ir bezmaksas atsaucīgs jQuery slīdnis:
- Pilnībā atsaucīgs – pielāgojas jebkurai ierīcei;
- Horizontāla, vertikāla slaida maiņa;
- Slaidos var būt attēli, videoklipi vai HTML saturs;
- Paplašināts atbalsts skārienierīcēm;
- CSS pāreju izmantošana slaidu animācijai (aparatūras paātrinājums);
- Atzvanīšanas API un pilnībā publiskas metodes;
- mazs faila izmērs;
- Viegli īstenojams.
Demo |Lejupielādēt
Labākais atsaucīgais slīdnis. Jaunā versija ir uzlabota, lai palielinātu ātrumu un kompaktumu.
Demo | Lejupielādēt
Galleria tiek izmantota miljoniem vietņu, lai izveidotu augstas kvalitātes attēlu galerijas. Pozitīvo atsauksmju skaits par viņas darbu ir vienkārši ārpus saraksta:
- Pilnīgi bezmaksas;
- Pilnekrāna skatīšanās režīms;
- 100% adaptīvs;
- Nav nepieciešama programmēšanas pieredze;
- Atbalsts iPhone, iPad un citām skārienjūtīgajām ierīcēm;
- Flickr, Vimeo, YouTube un citi;
- Vairākas tēmas.
Demo | Lejupielādēt
Es piedāvāju jums jQuery attēla slīdni, kas īpaši izstrādāts adaptīvam tīmekļa dizainam. Blueberry ir eksperimentāls atvērtā pirmkoda attēlu slīdņa spraudnis, kas tika rakstīts īpaši darbam ar adaptīvām veidnēm:
- minimāls dizains;
- Adaptīvs izkārtojums;
- Prezentācijas.
Demo | Lejupielādēt
Tiek izmantoti pirmās programmas versijas standarta elementi: slīdnis paslēpjas pa kreisi un uznirst pa labi. Tie paši navigācijas elementi un paraksti, kas tiek parādīti, novietojot peles kursoru:
- Adaptīvs dizains;
- Parakstu atbalsts;
- Slaidrādes režīms.
Demo | Lejupielādēt
Mums ir nepieciešams vienkāršs slīdnis ar automātisku ritināšanu. Sāksim...
Slīdņa darbības apraksts.Slaidi tiks sarindoti un pēc noteikta laika ritināsies.
Sarkanais rāmis parāda slīdņa redzamo daļu.
Slīdņa beigās jums jādublē pirmais slaids. Tas ir nepieciešams, lai nodrošinātu ritināšanu no trešā slaida uz pirmo. Jums arī jāpievieno pēdējais slaids sākumam, lai varētu ritināt atpakaļ no pirmā slaida uz trešo. Tālāk ir parādīts, kā slīdnis darbojas virzienā uz priekšu.
Kad slīdnis sasniedz beigas, pēdējā slaida vietā uzreiz tiek ievietota tā kopija no slīdņa sākuma. Pēc tam cikls atkārtojas vēlreiz. Tas rada ilūziju par nebeidzamu slīdni.
HTML marķējumsVispirms izveidosim vienkāršu slīdni ar automātisku ritināšanu. Lai strādātu, nepieciešami divi konteineri. Pirmais iestatīs slīdņa redzamā laukuma lielumu, bet otrais ir nepieciešams, lai tajā ievietotu slīdņus. Slīdņa izkārtojums izskatīsies šādi:
Container.slider-box norāda slīdņa izmērus. Izmantojot rekvizītu overflow:hidden, visi elementi, kas nav iekļauti elementa apgabalā, tiek paslēpti.
Container.slider ir iestatīts uz lielāku platumu. Tas ir nepieciešams, lai visi slaidi ietilptu līnijā.
Slaidi tiek līdzināti, izmantojot rekvizītu float:left.
Zemāk ir shematisks slīdņu bloku izkārtojums.
Slaidu kustība tiks veikta, vienmērīgi mainot konteinera margin-left īpašību.slider.
$(function () ( var width= $(".slider-box" ) .width () ; // Slīdņa platums. intervāls = 4000 ; // Slaida maiņas intervāls. $(".slider img:last" ) .clone () .prependTo (.slider" ) // Pēdējā slaida kopija tiek ievietota sākumā tiek nobīdīts pa kreisi par viena slaida platumu setInterval("animation()" , intervāls) // Tiek palaista animācijas() funkcija, lai mainītu slaidus. function animation() ( var margin = parseInt($(.slider") .css ("marginLeft" ) ) ; // Pašreizējā bloka nobīde.slider width= $(.slider-box" ) .width () , / / Slīdņa platums. slaids nav pēdējais , ( margin= margin- width; // tad piemales vērtība tiek samazināta par slaida platumu. ) else ( // Ja tiek rādīts pēdējais slaids, $(.slider" ). css ("margin-left" , - platums) ; // tad block.slider atgriežas sākotnējā pozīcijā, margin=- width* 2 ) $(.slider" ) .animate (( marginLeft: margin) , 1000 ) // Block.slider ir nobīdīts pa kreisi par 1 slaidu ) ;Rezultāts ir vienkāršs slīdnis ar bezgalīgu automātisku ritināšanu.
