Pielāgots attēla slīdnis, izmantojot jQuery. Laba slīdņa izveidošana, izmantojot jQuery ar savām rokām. Kā izveidot slīdni ar jQuery
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 jums vienkārši jāpievieno virsraksti, attēli un jāatlasa slīdņa pārejas efekti. 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 3 KB.
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 avota kodam.
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āšanai);
- API atzvani un pilnīgi 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īgām ierīcēm;
- Flickr, Vimeo, YouTube un citas;
- 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ā koda 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 parādās, novietojot peles kursoru:
- Adaptīvs dizains;
- Parakstu atbalsts;
- Slaidrādes režīms.
Demo | Lejupielādēt
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 izmantoš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ā, varat izmantot šo 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().
navigēt ()
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.
Slīdslēdzis pats 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 tas ir 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ā koda modifikācija iekš 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ācija 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 mēs 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 atbalstu 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 vien 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, 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 apraksta, nākotnes slīdņa pamats */ #slaidi( pozīcija: relatīvā; augstums: 415 pikseļi; platums: 100%; polsterējums: 0 pikseļi; 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 metodi querySelectorAll, 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
Pirms kāda laika es sāku mācīties jQuery. Es domāju, ka visi zina, ka šis ir vispopulārākās bibliotēkas nosaukums JavaScript skriptu izstrādei un izveidei. Ar tās palīdzību ir ļoti vienkārši izveidot iespaidīgus un interaktīvus vietnes elementus.
Šajā rakstā es vēlos jums pastāstīt, kā izveidot vienkāršu universālu slīdni, izmantojot jQuery. Patiesībā internetā ir ļoti daudz dažādu gatavu slīdņu, kas reizēm izskatās ļoti kārdinoši un ir gana funkcionāli, bet mēs to uztaisīsim no nulles.
Tātad, kādas mūsu jQuery slīdņa (ko es nosaucu par HWSlider) funkcijas var atzīmēt?
- Lietošanas ērtums un dizains – vēlējos izveidot vienkāršu skriptu bez zvaniņiem un svilpieniem, tāpēc neizmantoju CSS3 animācijas, un kods izrādījās ļoti daudzpusīgs un saprotams.
- Iespēja ievietot slaidos gan attēlus, gan jebkuru HTML kodu.
- Iespēja ritināt slaidus gan secībā (uz priekšu - atpakaļ), gan atlasīt katru slaidu (1,2,3,4...)
- Automātiski ģenerētas saites (iepriekšējā - nākamā, un ar slaidu numuriem). Jums vienkārši jāievieto vajadzīgais divs skaits, un viss pārējais tiks aprēķināts pats. Nu, var atzīmēt, ka slaidu skaits ir neierobežots.
Skripts ir savietojams ar visām mūsdienu pārlūkprogrammām: IE, Opera, Firefox, Safari, Chrome (jo slīdnis neizmanto CSS3).
Sāksim ar HTML marķējumu. HTML lapa vai veidne ir jāievieto vajadzīgajā vietā.
Šeit ir 1. slaida saturs Šeit ir 2. slaida saturs Šeit ir 3. slaida saturs
Šeit viss ir vienkārši, kā redzat, varat ievietot tik daudz slaidu, cik vēlaties, izveidojot jaunus divus. Tajās varat ievietot jebkuru HTML kodu, piemēram, attēlu vai teksta bloku. Vienkārši neaizmirstiet iekļaut pašu jQuery bibliotēku kopā ar visiem js skriptiem. Ja nezināt, kā, skatiet piemēru.
#slider-wrap( /* Iesaiņotājs slīdnim un pogām */ platums:660px; ) #slider( /* Iesaiņotājs slīdnim */ platums:640px; augstums:360px; pārplūde: paslēpts; apmale:#eee solid 10px; pozīcija:relatīvs; ) .slide( /* Slaids */ platums: 100%; augstums: 100%; ) .sli-links( /* Pogas slaidu maiņai */ margin-top: 10px; text-align:center;) .sli-links . atkārtoti ( /* Saite " Nākamais" un "Iepriekšējais" */ displejs: bloks; platums: 15 pikseļi; augstums: 100%; pozīcija: absolūts; augšā: 0; pārpilde: slēpta; teksta atkāpe: -999 pikseļi; fons: url(arrowBg .png) kreisais centrs no-repeat:0.8; kontūra:nav !svarīgi;) #prewbutton(left:10px;) #nextbutton(right:10px; background:url(arrowBg.png) labi centrs no-repeat; ) #prewbutton:hover, #nextbutton:hover(necaurredzamība:1;)
Apskatīsim to sīkāk. Vispirms piešķiram galvenajam blokam, ID "slider-wrap", vēlamo platumu. Tā kā tajā ir ievietoti visi pārējie bloki, augstums nav jānorāda, tas būs atkarīgs no tā, kas ir iekšā. Pēc tam mums jāiestata konteinera izmēri, kurā atradīsies slaidi. Šis ir #slīdnis. Piešķirsim tai platumu un augstumu, kā arī, piemēram, 10 pikseļu apmali. Šeit platums ir 640 pikseļi, kas ir mazāks par vecāku platumu, jo mēs pievienojam 10 pikseļu apmales labajā un kreisajā pusē. Pašu slaidu platums (.slide) arī ir atkarīgs no šī div platuma.
Un pēdējā lieta: mums ir jāiestata pozīcija: relatīvi priekš slaidu konteinera, jo iekšpusē esošie priekšmetstikliņi ir ar absolūtu pozicionēšanu. Pašiem slaidiem CSS ir iestatīts tikai platums un augstums. Pārējie rekvizīti ir iestatīti jQuery skriptā.
Selector.sli-links ir bloks, kurā būs pogas, lai pārvietotos uz vajadzīgo slaidu. Šīs pogas ir vienkārši tipa numura elementi, kas tiks ievietoti vajadzīgajā daudzumā automātiski, kopā ar to parent.sli-saitēm. Pogām mēs iestatām skaistu izskatu, proti, katru pogu veidojam kvadrātveida, izlīdzinām tās visas centrā, kā arī, pateicoties pārpildei: paslēpts un teksta atkāpe:-9999px, mēs noņemam tekstu, atstājot tikai fona ikonas , kas arī mainās, virzot kursoru uz šī kursora elementa. Ērtības labad izmantoju spraitus, kas samazināja attēlu skaitu.
Tālāk tiek izstrādāta aktīvā poga. Mēs vienkārši mainām fona pozīciju. Pēc tam mēs pārveidosim saites, lai pārietu uz nākamo un iepriekšējo slaidu. Jūs varat tiem piešķirt jebkuru dizainu, tāpat kā pogas. Šīs saites tiek automātiski ievietotas iekšpusē #slider. Bet, lai tie būtu redzami, es tiem piešķīru absolūtu pozīciju un augšējo slāni (z-index:3), lai tie būtu redzami virs slaidiem. Es domāju, ka ar CSS šeit viss ir skaidrs un vienkāršs: jūs varat mainīt gandrīz visus rekvizītus, lai izveidotu slīdni tā, kā jums nepieciešams.
Tagad apskatīsim pašu scenāriju:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(.slide").css(("pozīcija" : "absolūts", "augšējā":"0", "pa kreisi": "0")).hide ().eq(0).show(); var slideCount = $("#slider .slide").size()(clearTimeout(slideTime); $ ("); .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(bultiņa == "nākamais")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( bultiņa == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = bultiņa; ) $(.slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active").eq(slideNum).addClass("active") ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(.slide").each(function(index) ( $adderSpan += "" + indekss + "" )); $("" + $ adderSpan +""). appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotators = funkcija())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pauze = patiess;), funkcija())(pauze = nepatiesa; rotators(); )); rotators (); ));
Pirmkārt, iestatījumi tiek saglabāti mainīgajos: hwSlideSpeed - slaidu pagriešanas ātrums, hwTimeOut - laiks, pēc kura slaids automātiski mainās, hwNeedLinks - kontrolē saites "Nākamais" un "Iepriekšējais" - ja šī mainīgā vērtība ir taisnība, tad šīs saites tiks parādītas, un, ja false , tad attiecīgi tās nebūs (kā mana emuāra galvenajā lapā).
Tālāk mēs iestatām nepieciešamos CSS rekvizītus slaidiem, izmantojot .css() metodi. Mēs sakraujam blokus ar slaidiem vienu virs otra, izmantojot absolūto pozicionēšanu, pēc tam paslēpjam tos visus hide() un pēc tam rādām tikai pirmo. Mainīgais slideNum ir aktīvā slaida numurs, tas ir, skaitītājs.
Mūsu jQuery slīdņa galvenā loģika ir funkcija animSlide. Tas aizņem vienu parametru. Ja tajā ievietosim virknes “next” vai “prew”, tad darbosies nosacījuma operatori un tiks parādīts attiecīgi nākamais vai iepriekšējais slaids. Ja mēs nosūtām skaitli kā vērtību, tad šis skaitlis kļūs par aktīvo slaidu un tiks parādīts.
Tātad šī funkcija slēpj pašreizējo div, aprēķina jaunu un parāda to.
Ņemiet vērā, ka metodei .fadeIn(), kas padara aktīvo slaidu redzamu, tiek piešķirts otrs arguments. Šī ir tā sauktā atzvanīšanas funkcija. Tas tiek izpildīts, kad slaids parādās pilnībā. Šajā gadījumā tas tiek darīts, lai nodrošinātu slaidu automātisku ritināšanu. Tālāk definētā rotatora funkcija vēlreiz izsauc animSlide funkciju, lai pārietu uz nākamo slaidu vajadzīgajā laika intervālā: mēs iegūsim aizvēršanu, kas nodrošina pastāvīgu ritināšanu.
Viss darbojas labi, taču mums ir jāpārtrauc automatizācija, ja lietotājs pārvieto kursoru uz slīdni vai nospiež pogas. Šim nolūkam tiek izveidots pauzes mainīgais. Ja tā vērtība ir pozitīva - patiesa, tad automātiskas pārslēgšanas nebūs. Izmantojot .hover() metodi, mēs norādām: notīriet taimeri, ja tas darbojas - clearTimeout(slideTime) un iestatiet pause = true. Un pēc kursora pārvietošanas izslēdziet pauzi un palaidiet rotatora () aizvēršanu.
Turklāt mums ir jāizveido jauni elementi lapā un jānovieto pareizajā vietā. Izmantojot katra() cilpu katram slaidam (div ar klasi .slide), mēs izveidosim span elementu, kura iekšpusē ir skaitlis - slaida numurs. Šis numurs tiek izmantots animācijas funkcijā, lai pārietu uz slaidu ar šo numuru. Ietinam visu divā ar nepieciešamajām klasēm, un beigās iegūsim šādu uzcenojumu:
0 1 2 3
Šķiet, kāpēc mēs veidojam marķējumu skripta iekšpusē, nevis HTML kodā? Fakts ir tāds, ka, piemēram, ja lietotājam ir atspējoti skripti, viņš neredzēs elementus, kas nedarbosies, un tas viņu nemulsinās. Turklāt kods ir vienkāršots, kas ir labs SEO.
Rezultātā slīdņa izkārtojums izskatīsies apmēram šādi (es izmantoju attēlus kā slaidus un instalēju 5 no tiem):
0
1
2
3
Zemāk varat redzēt, kā mūsu jQuery slīdnis darbojas demonstrācijas lapā, un lejupielādēt visus nepieciešamos avotus.
Visbeidzot, daži punkti par šī slīdņa integrāciju ar Drupal. Varat pievienot šo kodu veidnes failam, piemēram, lapā page.tpl.php, un pievienot skriptu kā atsevišķus js failus motīvam. Drupal Jquery ir iespējots pēc noklusējuma, bet darbojas saderības režīmā (). Ir divas uzlabošanas iespējas. Vai iesaiņojiet visu js kodu:
(funkcija ($) ( // Viss jūsu kods... ))(jQuery);
vai aizstājiet $ simbolus visā skriptā ar jQuery. Kā šis:
JQuery(document).ready(function(e) ( jQuery(.slide").css(("pozīcija" : "absolūts", "augšējā":"0", "pa kreisi": "0")).hide ().eq(0).show(); var slideCount = jQuery("#slider .slide").size( var animSlide = function(bultiņa)( // utt.);
Piemērā jau ir ieviesta pirmā metode.
Paldies, ka izlasījāt! Atstājiet komentārus, nāciet vēlreiz. Varat arī abonēt RSS, lai vispirms saņemtu emuāra atjauninājumus!
Pievienots: Tas vēl nav viss. Lasīt. Tur mēs šim skriptam pievienosim jaunas funkcijas.
