Rrëshqitësi i personalizuar i imazhit duke përdorur jQuery. Bërja e një rrëshqitësi të mirë duke përdorur jQuery me duart tuaja. Si të krijoni një rrëshqitës duke përdorur jQuery

Nëse keni nevojë të shtoni një rrëshqitës imazhi jQuery me cilësi të lartë në faqen tuaj, atëherë në këtë artikull do të gjeni një përshkrim të shtojcave të nevojshme. Edhe pse JQuery e ka bërë shumë më të lehtë punën me JavaScript, ne kemi ende nevojë për shtojca për të përshpejtuar procesin e dizajnimit të uebit.

Ne mund të bëjmë ndryshime në disa prej këtyre shtojcave dhe të krijojmë rrëshqitës të rinj që janë shumë më të përshtatshëm për qëllimet e faqes sonë.

Për rrëshqitës të tjerë, thjesht shtoni tituj, imazhe dhe zgjidhni efektet e tranzicionit të rrëshqitjes që vijnë me rrëshqitësin. Të gjitha këto shtojca shoqërohen me dokumentacion të detajuar, kështu që shtimi i efekteve ose funksioneve të reja në to nuk do të jetë i vështirë. Ju madje mund të ndryshoni shkaktarët e bazuar në ngjarje nëse jeni një programues me përvojë në JQuery.

Tendencat e fundit si dizajni i përgjegjshëm janë shumë të rëndësishëm për projektet në ueb, pavarësisht nëse jeni duke zbatuar një plugin ose një skript. Të gjithë këta elementë e bëjnë secilën prej këtyre shtojcave shumë fleksibël. Gjithçka që doli në 2014 është përfshirë në këtë listë.

Rrëshqitësit e imazhit JQuery Jssor rrëshqitës i përgjegjshëm

Kohët e fundit kam hasur në këtë rrëshqitës të fuqishëm JQuery dhe kam mundur të shoh nga dora e parë se ai e bën punën e tij shumë mirë. Ai përmban mundësi të pakufishme që mund të zgjerohen përmes kodit me burim të hapur të rrëshqitësit:

• Dizajn përshtatës;
• Më shumë se 15 opsione personalizimi;
• Më shumë se 15 efekte të ndryshimit të imazhit;
• Galeria e imazheve, karusel, mbështetje për madhësinë e ekranit të plotë;
• Rotator vertikal i banerit, lista e rrëshqitjeve;
• Mbështetje për video.

Demo | Shkarko

PgwSlider - rrëshqitës i përgjegjshëm i bazuar në JQuery / Zepto

Detyra e vetme e kësaj shtojce është të shfaqë rrëshqitje të imazheve. Është shumë kompakt, pasi skedarët jQuery janë vetëm 2.5 KB në madhësi, gjë që e lejon atë të ngarkohet shumë shpejt:

• Struktura adaptive;
• optimizimi i SEO;
• Mbështetje për shfletues të ndryshëm;
• Tranzicione të thjeshta të imazhit;
• Madhësia e arkivit është vetëm 2.5 KB.

Demo | Shkarko

Rrëshqitësi vertikal i lajmeve Jquery

Një rrëshqitës fleksibël dhe i dobishëm JQuery i krijuar për burimet e lajmeve me një listë publikimesh në anën e majtë dhe një imazh të shfaqur në të djathtë:

• Dizajn përshtatës;
• Kolona vertikale për ndërrimin e lajmeve;
• Titujt e zgjeruar.

Demo | Shkarko

Wallop Slider

Ky rrëshqitës nuk përmban jQuery, por unë do të doja ta paraqes atë pasi është shumë kompakt dhe mund të reduktojë ndjeshëm kohën e ngarkimit të faqes. Më tregoni nëse ju pëlqen:

• Struktura adaptive;
• Dizajn i thjeshtë;
• Opsione të ndryshme për ndryshimin e rrëshqitjes;
• Kodi minimal JavaScript;
• Madhësia është vetëm 3 KB.

Demo | Shkarko

Galeria Polaroid e stilit të sheshtë

Një galeri e stilit të shpërndarë me dokumente mbi një tavolinë me një plan urbanistik fleksibël dhe dizajn të bukur duhet të jetë me interes për shumë prej jush. Më i përshtatshëm për tableta dhe ekrane të mëdhenj:

• Rrëshqitës përshtatës;
• Dizajn i sheshtë;
• Ndryshimi i rastësishëm i sllajdeve;
• Qasje e plotë në kodin burimor.

Demo | Shkarko

A-Rrëshqitës

Demo | Shkarko

HiSlider – HTML5, jQuery dhe rrëshqitës i imazhit të WordPress

HiSlider ka prezantuar një shtojcë të re pa pagesë jQuery rrëshqitës me të cilën mund të krijoni një shumëllojshmëri galerish imazhesh me tranzicione fantastike:

• Rrëshqitës përshtatës;
• Nuk kërkon njohuri programore;
• Disa shabllone dhe lëkura të mahnitshme;
• Efektet e bukura të tranzicionit;
• Mbështetje për platforma të ndryshme;
• E përputhshme me WordPress, Joomla, Drupal;
• Aftësia për të shfaqur lloje të ndryshme të përmbajtjes: imazhe, video në YouTube dhe video Vimeo;
• Konfigurimi fleksibël;
• Karakteristikat shtesë të dobishme;
• Sasi e pakufizuar e përmbajtjes së shfaqur.

Demo |Shkarko

Wow Slider

WOW Slider është një rrëshqitës imazhi i përgjegjshëm jQuery me efekte vizuale mahnitëse (domino, rrotullim, turbullim, rrokullisje dhe ndezje, fluturim jashtë, blinds) dhe shabllone profesionale.

WOW Slider vjen me një magjistar instalimi që ju lejon të krijoni rrëshqitës fantastikë në sekonda pa pasur nevojë të kuptoni kodin ose të modifikoni imazhet. Versionet e shtojcës për Joomla dhe WordPress janë gjithashtu të disponueshme për shkarkim:

• Plotësisht i përgjegjshëm;
• Mbështet të gjithë shfletuesit dhe të gjitha llojet e pajisjeve;
• Mbështetje për pajisjet me prekje;
• Instalim i lehtë në WordPress;
• Fleksibilitet në konfigurim;
• SEO-optimizuar.

Demo |Shkarko

Nivo Slider – shtojcë falas jQuery

Nivo Slider njihet në të gjithë botën si rrëshqitësi më i bukur dhe më i lehtë për t'u përdorur i imazhit. Shtojca Nivo Slider është falas dhe lëshohet nën licencën MIT:

• Kërkon JQuery 1.7 dhe më lart;
• Efektet e bukura të tranzicionit;
• E thjeshtë dhe fleksibël për t'u konfiguruar;
• Kompakte dhe adaptive;
• Burim i hapur;
• E fuqishme dhe e thjeshtë;
• Disa shabllone të ndryshme;
• Prerje automatike e imazhit.

Demo |Shkarko

Rrëshqitësi i thjeshtë jQuery me dokumentacion teknik

Ideja u frymëzua nga rrëshqitësit e Apple, në të cilët disa elementë të vegjël mund të fluturojnë me efekte të ndryshme animacioni. Zhvilluesit u përpoqën të zbatonin këtë koncept, duke marrë parasysh kërkesat minimale për krijimin e një dizajni të thjeshtë të dyqanit në internet, në të cilin elementët "fluturues" përfaqësojnë kategori të ndryshme:

• Struktura adaptive;
• Dizajn minimalist;
• Efekte të ndryshme të braktisjes dhe ndryshimit të rrëshqitjes.

Demo |Shkarko

Rrëshqitësi i imazhit jQuery me madhësi të plotë

Një rrëshqitës shumë i thjeshtë që zë 100% të gjerësisë së faqes dhe përshtatet me madhësitë e ekranit të pajisjeve mobile. Funksionon me tranzicione CSS dhe imazhet janë "grumbulluar" së bashku me ankorat. Spiranca mund të zëvendësohet ose hiqet nëse nuk dëshironi të bashkëngjitni një lidhje me imazhin.

Kur instalohet, rrëshqitësi zgjerohet në 100% të gjerësisë së ekranit. Gjithashtu mund të zvogëlojë automatikisht madhësinë e imazheve të rrëshqitjes:

• Rrëshqitësi përshtatës JQuery;
• Madhësia e plotë;
• Dizajn minimalist.

Demo |Shkarko

Elastic Content Slider + tutorial

Elastic Content Slider rregullon automatikisht gjerësinë dhe lartësinë bazuar në dimensionet e elementit prind. Ky është një rrëshqitës i thjeshtë jQuery. Ai përbëhet nga një zonë rrëshqitëse në krye dhe një shirit i skedës së navigimit në fund. Rrëshqitësi rregullon gjerësinë dhe lartësinë e tij sipas dimensioneve të kontejnerit mëmë.

Kur shikohen në ekrane të vogla diagonale, skedat e navigimit shndërrohen në ikona të vogla:

• Dizajn përshtatës;
• Lëvizja e klikimit të miut.

Demo |Shkarko

Rrëshqitës 3D Stack Falas

Një rrëshqitës eksperimental që lëviz nëpër imazhe në 3D. Dy rafte ngjajnë me pirgje letre, nga të cilat, kur lëvizni, imazhet shfaqen në qendër të rrëshqitësit:

• Dizajn përshtatës;
• Flip - tranzicion;
• efektet 3D.

Demo |Shkarko

Slider Slider me ekran të plotë bazuar në udhëzuesin JQuery dhe CSS3 +

Ky tutorial do t'ju tregojë se si të krijoni një rrëshqitës me një kthesë: ideja është të "preni" dhe të shfaqni rrëshqitjen aktuale ndërsa hapni imazhin tjetër ose të mëparshëm. Duke përdorur animacionin JQuery dhe CSS, ne mund të krijojmë efekte unike të tranzicionit:

• Dizajn përshtatës;
• Tranzicioni i ndarë;
• Rrëshqitësi i ekranit të plotë.

Demo |Shkarko

Unislider - një rrëshqitës shumë i vogël jQuery

Nuk ka zile dhe bilbila të panevojshme, më pak se 3 KB në madhësi. Përdorni çdo kod HTML për rrëshqitjet tuaja, zgjeroni atë me CSS. Gjithçka që lidhet me Unslider është pritur në GitHub:

• Mbështetje për shfletues të ndryshëm;
• Mbështetja e tastierës;
• Rregullimi i lartësisë;
• Dizajn përshtatës;
• Mbështetja e hyrjes me prekje.

Demo | Shkarko

Slides Minimal Responsive

Një shtesë e thjeshtë dhe kompakte (me madhësi vetëm 1 KB) që krijon një rrëshqitës të përgjegjshëm duke përdorur elementë brenda një kontejneri. ResponsiveSLides.js punon me një gamë të gjerë shfletuesish, duke përfshirë të gjitha versionet e IE nga IE6 dhe më lart:

• Plotësisht i përgjegjshëm;
• Madhësia 1 KB;
• Tranzicionet CSS3 me aftësinë për të ekzekutuar përmes JavaScript;
• Shënim i thjeshtë duke përdorur lista me pika;
• Aftësia për të personalizuar efektet e tranzicionit dhe kohëzgjatjen e shikimit të një rrëshqitjeje;
• Mbështet aftësinë për të krijuar shfaqje të shumta rrëshqitëse;
• Lëvizje automatike dhe manuale.

Demo |Shkarko

Kamera - rrëshqitës pa pagesë jQuery

Kamera është një shtojcë me shumë efekte tranzicioni dhe një plan urbanistik të përgjegjshëm. Lehtë për t'u konfiguruar, e mbështetur nga pajisjet celulare:

• Dizajn plotësisht i përgjegjshëm;
• Nënshkrimet;
• Aftësia për të shtuar video;
• 33 ikona me ngjyra të ndryshme.

Demo |Shkarko

SlidesJS, shtojcë e përgjegjshme jQuery

SlidesJS është një shtojcë e përgjegjshme për JQuery (1.7.1 dhe më lart) me mbështetje për pajisjet me prekje dhe tranzicionet CSS3. Eksperimentoni me të, provoni disa shembuj të gatshëm që do t'ju ndihmojnë të kuptoni se si të shtoni SlidesJS në projektin tuaj:

• Dizajn përshtatës;
• tranzicionet CSS3;
• Mbështetje për pajisjet me prekje;
• Lehtë për t'u vendosur.

Demo | Shkarko

BX Jquery Slider

Ky është një rrëshqitës pa pagesë i përgjegjshëm jQuery:

• Plotësisht i përgjegjshëm - përshtatet me çdo pajisje;
• Ndryshimi horizontal, vertikal i rrëshqitjes;
• Slides mund të përmbajnë imazhe, video ose përmbajtje HTML;
• Mbështetje e zgjeruar për pajisjet me prekje;
• Përdorimi i tranzicioneve CSS për animimin e rrëshqitjes (përshpejtimi i harduerit);
• Callback API dhe metoda plotësisht publike;
• Madhësia e vogël e skedarit;
• Lehtë për t'u zbatuar.

Demo |Shkarko

FlexSlider 2

Rrëshqitësi më i mirë i përgjegjshëm. Versioni i ri është përmirësuar për të rritur shpejtësinë dhe kompaktësinë.

Demo | Shkarko

Galeria - Galeria e fotografive e përgjegjshme e bazuar në JavaScript

Galleria përdoret në miliona faqe interneti për të krijuar galeri imazhesh me cilësi të lartë. Numri i vlerësimeve pozitive për punën e saj është thjesht jashtë grafikëve:

• Plotësisht falas;
• Mënyra e shikimit në ekran të plotë;
• 100% adaptive;
• Nuk kërkohet përvojë në programim;
• Mbështetje për iPhone, iPad dhe pajisje të tjera me prekje;
• Flickr, Vimeo, YouTube dhe më shumë;
• Disa tema.

Demo | Shkarko

Blueberry - një rrëshqitës i thjeshtë imazhi i përgjegjshëm jQuery

Unë ju prezantoj një rrëshqitës imazhi jQuery të shkruar posaçërisht për dizajn të përgjegjshëm të uebit. Blueberry është një shtesë eksperimentale e rrëshqitësit të imazhit me burim të hapur që është shkruar posaçërisht për të punuar me shabllone të përgjegjshme:

• Dizajn minimal;
• Struktura adaptive;
• Prezantimet.

Demo | Shkarko

jQuery Popeye 2.1

Përdoren elementë standardë të versionit të parë të programit: rrëshqitësi fshihet në të majtë dhe shfaqet në të djathtë. Të njëjtat elementë lundrimi dhe titrat që shfaqen në lëvizjen e miut:

• Dizajn përshtatës;
• Mbështetja e nënshkrimit;
• Modaliteti i shfaqjes së rrëshqitjes.

Demo | Shkarko

Ndonjëherë më duhet të zgjidh problemet që lidhen me frontin, pavarësisht se nuk më pëlqen :)

Në fakt, ju mund të vlerësoni qëndrimin tim ndaj gjithçkaje që lidhet me "të bukurën" nga dizajni i kësaj faqeje, e cila u zhvillua vetëm nga unë :)

Sidoqoftë, relativisht kohët e fundit u përballa me nevojën për të zbatuar një rrëshqitës në JavaScript, dhe kjo duhej të bëhej pa ndonjë bibliotekë të gatshme dhe madje edhe pa jQuery të preferuar të të gjithëve.

Kjo nevojë u shkaktua nga fakti se rezultati duhet të ishte një skript JS që do të lidhej me sitin përmes një shërbimi të palës së tretë. Rrjedhimisht, karuselet e gatshme në JavaScript nuk nevojiteshin më, sepse Për t'i integruar ato, ishte e nevojshme të shtohej një lidhje bibliotekë në kodin HTML të faqes nëpërmjet një etikete skripti dhe t'i kopjoni vetë skedarët ose në server ose t'i tërheqni ato përmes cdn, por kjo do të kërkonte përsëri modifikimin e kodit të burimit.

Si të krijoni një rrëshqitës JavaScript: fillimi

Sot mendoj se të gjithë ata që u gjendën në një situatë të ngjashme filluan të kërkojnë zhvillimet ekzistuese, sepse... kur detyra e krijimit të një karuseli JS është brenda fushës së punës, ajo duhet të bëhet gjithmonë sa më shpejt që të jetë e mundur. Dhe në kushte të tilla, askush nuk do t'ju lejojë të uleni dhe të shpikni biçikletat tuaja.

Klientëve gjithmonë nuk u intereson se si shkruhet kodi, cila është arkitektura e tij, gjëja kryesore është të shohësh rezultatin!

Si rezultat, siç e kuptoni, përpara se të shkruaj një rrëshqitës në JavaScript pa jQuery, vendosa të gjej një të gatshme dhe ta modifikoj atë për t'iu përshtatur nevojave të mia. Pse nuk ka jQuery? Po, sepse në burimin e synuar, ku kam planifikuar të lidh rrëshqitësin tim përmes shërbimit, thirrja jQuery në kod u vendos më vonë se skripti i lidhur nga shërbimi. Prandaj, konstruktet jQuery në kodin tim thjesht nuk u perceptuan.

Si bazë, mora këtë rrëshqitës imazhi JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.

Vendosa të ndalem atje, sepse... kodi i tij JS është shkruar duke përdorur parimet OOP dhe klasat e tij bazohen në prototipe, jo në funksione banale.

Për të qenë i sinqertë, unë thellësisht nuk e kuptoj dhe nuk e njoh zhurmën aktuale rreth JavaScript duke përdorur OOP, korniza dhe gjëra të tjera arkitekturore në një gjuhë që fillimisht ishte menduar të ishte një gjuhë e thjeshtë skriptimi dinamik. Ashtu si vetë JS, sinqerisht nuk e pëlqej atë me vinaigrette sintaksore, e cila lejon që të njëjtat ndërtime të shkruhen në disa mënyra.

Por, për fat të keq, në botën moderne pak njerëz ndajnë pozicionet e mia, sepse... kjo gjuhë po zhvillohet me një ritëm të çmendur dhe madje po bën përpjekje për të fituar mendjen e zhvilluesve të backend që përdorin Node.js si një alternativë ndaj Java, PHP, C#, Ruby dhe monstrave të tjerë.

Si rezultat, për të mos mbetur thjesht pa punë, duhet të kuptoni në heshtje JavaScript. Dhe në zbatimin e pastër të rrëshqitësit JavaScript që zgjodha, hasa diçka që, siç e kuptoni, e përbuz në këtë gjuhë. Kjo është arsyeja pse e zgjodha atë, në mënyrë që të kishte të paktën disa arsye për të punuar dhe kuptuar klasat OOP dhe prototipe të JavaScript - përndryshe nuk do t'i kisha prekur kurrë vullnetarisht në jetën time :)

Bazuar në kodin që gjeta, më duhej të zhvilloja një rrëshqitës në JS të pastër në një dritare kërcyese (kjo gjë quhet edhe një dritare kërcyese, popup, etj.), e cila do të kishte butona për ndërrimin e rrëshqitjeve dhe treguesit e klikueshëm të rrymës rrëshqitje. Ishte gjithashtu e nevojshme të bëhej një buton për të mbyllur këtë dritare.

Kjo është ajo me të cilën përfundova.

Krijimi i një biblioteke JS rrëshqitës

Së pari, vendosa të zbatoj gjithçka me mençuri dhe të bëj një rrëshqitës JavaScript për sitin në formën e një biblioteke që mund të lidhet me sitin me një skript të vetëm, në të cilin do të thirren përbërësit e rrëshqitësit, të ndarë në nëndrejtori. Vendosa ta quaj popupSlider.js për nder të qëllimit të tij origjinal.

Kodi i tij mund të gjendet në GitHub në këtë adresë - https://github.com/Pashaster12/popupSlider.js

Struktura e bibliotekës është si më poshtë:

Dosja e rrëshqitjeve është për imazhet e rrëshqitjes. Kontrollet përmbajnë fotografi të kontrolleve të karuselit JS (butona për mbylljen e rrëshqitësit dhe ndërrimin e rrëshqitjes). Dhe në aktive ka elemente statike të rrëshqitësit JS: shënimi HTML dhe një skedar me stile CSS.

Epo, skedari popupSlider.js është zemra e vetë bibliotekës, në të cilën shkruhen veprimet JavaScript të karuselit dhe vendoset një lidhje me skedarë të tjerë. Është ky që ne do të lidhim në faqe dhe ai do të thërrasë të tjerët.

Vendosa të filloj me shënimin HTML të karuselit tonë të imazhit JS, i cili në rastin tim duket kështu:

Teksti 1 Teksti 2 Teksti 3

Për të dizajnuar rrëshqitësin në JavaScript si një dritare kërcyese, përdora stilet e mëposhtme:

#rrëshqitës ( margjina: automatik; gjerësia: 600 pikselë ! e rëndësishme; tejmbushja: e fshehur; ) #slider-wrapper ( gjerësia: 9999 px; lartësia: 343 px; pozicioni: relative; tranzicioni: majtas 400 ms lineare; ) .rrëshqitje ( noton: majtas; gjerësia : 600 pikselë: tejmbushje relative: e fshehur; mbishkrimi (gjerësia: 600 px; lartësia: 1.5; madhësia e shkronjave: 15 px; pesha e shkronjave: 300; rreshtimi i tekstit: në qendër; ngjyra: # 000; shfaqja:tabela; 50% transformim: translateX(-50%) ) #slider-nav a (gjerësia: 8px; dekorimi i tekstit: asnjë; ngjyra: #000; ekrani: inline-block; kufiri-radius: 50%; margjina: 0 5px ngjyra e sfondit: #fafafa ) #slider-nav a.current (background-color: #337ab7;) .horizontal-controls (pozicioni: absolute; ekrani: 12px; lartësia; : 20px lart: 50% marzh-lart: -10px; majtas: -40px; ) #prev:hover ( sfond: url(../controls/arrow_left_active.png); ) #next ( sfond: url(../controls/arrow_right_inactive.png); djathtas: -40px; ) #next:hover ( sfond : url(../controls/arrow_right_active.png #cq-popup ( gjerësia: 600px; z-indeksi: 23; majtas: llogaritje (50%); lart: llogaritje (50%); pozicioni: fiks !i rëndësishëm ; background-repeat: no-repeat: #fff font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; %, -50%) shkalla(1) #cq-popup .header (ekrani: inline-block; madhësia e shkronjave: 17px; pesha e shkronjave: 500; ) #cq-popup > div (gjerësia: 500px; font-); madhësia: 22px; lartësia e rreshtit: 36px ) #cq-popup-btclose (tekst-dekorim: asnjë; pozicioni: absolut; djathtas: -40 px; sfondi: url(. ./controls/btn_delete_inactive.png) ;lartësia: 16px; lartësia: 100%; sfond: rgba (51,51,51,0.8); z-indeksi: 22; )

Si rezultat i aplikimit të këtyre stileve JS, karuseli duket kështu:

I zhvendosa të dy stilet e shënjimit HTML dhe CSS në skedarë të veçantë popupSlider.html dhe popupSlider.css, të cilat ndodhen në drejtorinë e aseteve të bibliotekës së rrëshqitësit JavaScript. E bëra këtë qëllimisht, në mënyrë që kur përdorni këtë kod, përdoruesit të mund të rregullonin lehtësisht shënjimin dhe dizajnin pa ngatërruar kodin JS, ku ajo që do të duhej të shkruhej do të duhej të shkruhej drejtpërdrejt.

Për më tepër, shumë njerëz ende duan të minimizojnë JS për të shpejtuar ngarkimin e faqes. Kështu që do të ishte shumë e vështirë të personalizoni këtë zgjidhje në kushtet e specifikuara.

Si rezultat, vendosa të përfshij thjesht skedarë të gatshëm në skedarin kryesor të bibliotekës popupSlider.js, i cili për detyrën time mori formën e mëposhtme:

Funksioni Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); ) ( var vetë = kjo; për (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blloku"; ndryshe nëse (indeksi == 1) this.prevBtn.style.display = "asnjë"; ), setCurrentLink: funksioni (lidhja) ( var prind = link.parentNode; var a = prind.querySelectorAll("a"); link.className = "aktual"; this.currentElement = lidhje; për (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

Disa komente në lidhje me kodin e mësipërm. Përmbajtja e skedarit popupSlider.js është një klasë e vetme JavaScript Slider, e cila, si në PHP, përmban një konstruktor dhe metoda të klasës. Vetëm në JS, përkufizimi i një konstruktori, ndryshe nga PHP, është i detyrueshëm.

Konstruktori përcaktohet duke përdorur konstruktin e mëposhtëm:

Funksioni rrëshqitës(element) ( //kodi i konstruktorit)

Brenda konstruktorit duhet të specifikohen veprimet që do të kryhen gjatë krijimit të një objekti të klasës.

Vetë metodat e klasës do të vendosen brenda prototipit dhe do të jenë të disponueshme për të gjitha instancat e kësaj klase JavaScript. Prototipi JS në rastin tim përshkruhet nga dizajni i mëposhtëm:

Slider.prototype = ( //metodat)

Ata do të thirren jashtë trupit të klasës si më poshtë:

Var rrëshqitës = new Slider(); rrëshqitës.klasë_metodë();

Dhe brenda vetë kodit të klasës, metoda e mëposhtme është e disponueshme:

This.class_method();

Gjëja kryesore është të mos harrojmë se në JavaScript vlera e kësaj varet nga konteksti i thirrjes, kështu që në trupat e disa metodave në të cilat ishte e nevojshme të thirreshin metodat dhe vetitë e një klase, ekziston një ndërtim i tillë:

Var vetë = kjo; vet.klasa_metoda(); //për të aksesuar një metodë që është një nivel më i lartë se kodi i metodës së përshkruar

Duket sikur fola për të gjitha nuancat e shkrimit të kodit. Tani disa fjalë për metodat e klasës sonë JavaScript, të cilat përmbajnë përshkrime të veprimeve JS të karuselit të imazhit.

loadStatic ()

Metoda e parë e thirrur kur krijohet një shembull i një klase në konstruktor. Përgjegjës për shtimin e shënjimit me rrëshqitës dhe një skedari me stile në kodin HTML të faqes së internetit.

Së pari, krijohet një etiketë e re lidhjeje në memorie duke përdorur funksionin JavaScript document.createElement() dhe vlerat e të gjitha atributeve të nevojshme i caktohen, duke përfshirë shtegun për në skedarin CSS me stilet e rrëshqitësit JS. Dhe së fundi, shtohet në faqen HTML duke përdorur metodën JavaScript appendChild() në fund të seksionit kokë, ku duhet të jenë stilet.

Më pas, ne bëjmë të njëjtën gjë për skedarin me shënjimin HTML të rrëshqitësit tonë në JavaScript të pastër. Këtu ka vetëm një nuancë të vogël: nuk mund të përfshini thjesht një skedar HTML brenda të njëjtit, siç bëmë me një skedar CSS. Ekzistojnë biblioteka të veçanta për këtë, për shembull, për të përfshirë HTML në HTML, lib nga w3.org është i shkëlqyeshëm - https://www.w3schools.com/howto/howto_html_include.asp

Por atëherë do të duhej ose të përfshihej në vetë bibliotekën e rrëshqitësit, ose t'u kërkonte përdoruesve ta instalojnë vetë. Por e gjithë kjo është jooptimale, sepse... kërkon shumë lëvizje të trupit dhe ngadalëson shpejtësinë e ngarkimit të faqes për shkak të skripteve shtesë.

Në fund, vendosa të marr përmbajtjen e skedarit HTML brenda kodit JavaScript dhe ta ngarkoj atë në një element të ri div të krijuar në memorie, ashtu siç bëra më parë për të përfshirë një skedar CSS në JavaScript. Elementi i krijuar përfshihet në fund të pjesës së trupit të kodit HTML të faqes së sajtit.

Nëse dëshironi të futni një div me shënjimin rrëshqitës jo vetëm në fund të trupit, por në një enë specifike, mund të përdorni kodin e mëposhtëm në vend të kësaj:

Var div = dokument.createElement("div"); div.innerHTML = rrëshqitës HTML; dokument.trupi.appendChild(div);

Futni sa vijon, duke specifikuar identifikuesin e dëshiruar të kontejnerit të synuar (në rastin tim, rrëshqitësi HTML JS do të vendoset në elementin me id popupSlider):

Var target = document.querySelector("#popupSlider"); target.innerHTML = rrëshqitës HTML;

Metoda, e cila thirret në konstruktor pas loadStatic(), nevojitet për të inicializuar vetitë e klasës që korrespondojnë me elementët kryesorë HTML që do t'i qasemi në kodin e mëposhtëm.

Në fund thirret metoda navigate().

navigate ()
Në këtë metodë, veprimet që ndodhin kur klikoni në butonat e çelësit të rrëshqitjes dhe elementët e navigimit të vendosura nën vetë rrëshqitësin tregohen në formën e rrathëve.

Për lehtësi, e zhvendosa kodin JavaScript për ndryshimin e rrëshqitjeve në një metodë të veçantë rrëshqitëse(), por në këtë unë thjesht e bashkëngjit atë në ngjarjen e klikimit për çdo buton të rrumbullakët në lak.

Kur klikoni në butonat "rrëshqitja e mëparshme" / "rrëshqitja tjetër", siç mund ta shihni, vendosa të emuloj thjesht një klikim në rrethin përkatës, duke përcaktuar atë të dëshiruar në lidhje me atë aktual, i cili ka një rrymë të klasës CSS.

rrëshqitje (element)

Metoda "përgjegjëse për magjinë" e vetë karuselit JavaScript, e cila përmban kodin që ndryshon pozicionet e rrëshqitjeve. Në fillim thirret metoda setCurrentLink(), për të cilën do të flasim pak më vonë.

Objekti i butonit të navigimit me rrëshqitës JS në formën e një rrethi i kalohet atij si parametër hyrës.

Vetë çelësi i rrëshqitjes funksionon si kjo:

Të gjitha rrëshqitjet tona janë të dizajnuara në formën e blloqeve me të njëjtën madhësi, njëri pas tjetrit. Dritarja e rrëshqitësit është vetëm pjesa e dukshme e elementit që përmban të gjitha rrëshqitjet.

Ne përcaktojmë zhvendosjen e skajit të majtë të rrëshqitjes aktuale nga skaji i majtë i elementit prind duke përdorur veçorinë offsetLeft.

Dhe ne e zhvendosim elementin prind me këtë vlerë në mënyrë që elementi i kërkuar të shfaqet në dritaren e rrëshqitësit.

Në fund të metodës, përshkruhet sjellja për butonat "rrëshqitje e mëparshme"/"rrëshqitje tjetër", të dizajnuara si shigjeta majtas/djathtas, përkatësisht. Nëse rrëshqitja aktuale është e para e të gjithë listës, atëherë butoni për të shkuar te rrëshqitja e mëparshme është i fshehur. Nëse kjo e fundit, atëherë hiqni butonin për të kaluar në rrëshqitjen tjetër.

setCurrentLink(lidhja)

Kjo metodë e klasës sonë të rrëshqitësit JavaScript është përgjegjëse për të theksuar butonin e rrumbullakët të lundrimit që korrespondon me elementin aktual. Ato. nëse kemi përzgjedhur rrëshqitjen e dytë, butoni i dytë do të theksohet.

Objekti i butonit që duhet të zgjidhet si aktual kalon si parametër hyrës në funksion.

Logjika për të theksuar elementin aktual është e thjeshtë:

Marrim objektin e elementit prind, i cili në rastin tonë është kontejneri me identifikuesin slider-nav.

Ne i marrim të gjithë elementët e navigimit si një grup lidhjesh.

Ne zgjedhim elementin e marrë si hyrje duke e shtuar atë në klasën aktuale.

Në një lak, ne kalojmë nëpër të gjithë elementët e navigimit dhe pastrojmë vlerën e klasës për të gjithë, përveç atij aktual. Kjo është e nevojshme për të çzgjedhur elementin që ishte aktual përpara thirrjes së funksionit.

Metoda e fundit e klasës, e cila përcakton veprimin kur klikoni butonin e mbylljes së rrëshqitësit në formën e një kryqi. Këtu, në fakt, kodi është më i kuptueshëm nga të gjithë të përfshirë në klasën e rrëshqitësit JS.

Kur klikoni në butonin e mbylljes, i cili aksesohet nga identifikuesi i tij, elementi rrëshqitës dhe elementi që vendos sfondin e tejdukshëm hiqen nga faqja. Ata gjithashtu, nga ana tjetër, merren nga identifikues unikë.

Vetë metoda thirret brenda navigate(), e përshkruar më parë, e cila përmban të gjithë skenarët e veprimeve që ndodhin në rrëshqitësin tonë JavaScript.

Nga rruga, nëse doni të mbyllni rrëshqitësin kur klikoni jashtë tij, atëherë thjesht shtoni kodin e mëposhtëm në këtë metodë:

Document.getElementById("cq-popup-bg").onclick = funksion () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;

Shfaqja e diapozitivëve JavaScript bazuar në bibliotekën e zhvilluar

Ndonjëherë në praktikë mund t'ju duhet të bëni një karusel rrotullues JS, i cili shpesh quhet një shfaqje rrëshqitëse. Në rastin tim kjo nuk kërkohej, por megjithatë vendosa të bëja një të tillë bazuar në kodin përfundimtar të bibliotekës për një rast ku mund të ishte i dobishëm.

Në fakt, zbatimi i JavaScript i një shfaqjeje diapozitivësh ndryshon paksa nga një rrëshqitës i zakonshëm. I vetmi ndryshim është se në një shfaqje rrëshqitëse, sllajdet ndërrohen automatikisht në një interval kohor të caktuar, ndërsa në rastin e një karuseli të rregullt JS ato ndryshojnë manualisht duke përdorur elementë navigimi.

SlideShow: funksioni (përfundimi i kohës) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector ("#slider-nav a.current").getAttribute ("data-slide" var slideId = parseInt(currentSlideNumber, 10) + 1 self.slide(document.querySelector(""));

Unë mendoj se është e qartë se çfarë po ndodh këtu. Për të krijuar këtë metodë, kopjova kodin nga ngjarja e klikimit të butonave të rrëshqitjes manuale dhe e vendosa brenda një thirrjeje JavaScript në funksionin setInterval(), i cili kryen veprimin e specifikuar pas një periudhe të caktuar kohe.

Skripti i veprimit kalohet si argumenti i parë si një funksion anonim, dhe intervali kohor kalohet si i dyti, të cilin vendosa ta bëj si një variabël vlera e së cilës kalohet kur thirret slideShow().

I vetmi modifikim i kodit brenda setInterval() që kërkohej ishte përcaktimi i numrit të rrëshqitjeve dhe krahasimi i indeksit të rrëshqitjes aktuale me të për të qarkulluar ndërrimin automatik.

Epo, në mënyrë që ky kod të funksionojë, duhet të thirret vetë metoda. Vendosa t'i bëj të gjitha këto në të njëjtën navigate(), që është pikërisht një koleksion i të gjitha llojeve të skripteve. E vendosa thirrjen në fund, duke kaluar si argument vlerën e intervalit kohor për ndryshimin automatik të rrëshqitjeve në shfaqjen tonë të rrëshqitjes JS (zgjodha 2000 milisekonda ose 2 sekonda, mund ta ndryshoni këtë numër sipas nevojës):

Vetë.SlideShow(2000);

Pas kësaj, kontrolloni funksionimin e rrëshqitësit JavaScript, duke mos harruar të pastroni shfletuesin tuaj.

Në teori, gjithçka duhet të funksionojë. Nëse jo, studioni gabimet në tastierën e shfletuesit dhe ndajini ato në komente.

Si rezultat, ne morëm një shfaqje rrëshqitëse JS në të cilën sllajdet kalojnë automatikisht dhe në një rreth, d.m.th. Kur arrihet rrëshqitja e fundit, shfaqja kalon në një cikli të ri dhe shfaqja fillon përsëri nga elementi i parë.

Kur punoja me biblioteka të ndryshme JS për karuselet e imazheve dhe rishikimet, vura re që zhvilluesit e përdorin në mënyrë aktive këtë praktikë, por me disa shtesa. Në të gjitha zgjidhjet që kam parë, shfaqja automatike e rrëshqitjes ndërpritet nëse përdoruesi bën një ndërrim manual. Kështu vendosa të bëj të njëjtën gjë në bibliotekën time.

Për të ndërprerë shfaqjen automatike të rrëshqitjeve të karuselit të JavaScript, vendosa të përdor funksionin standard JS clearInterval(), të cilit i kaloj si argument identifikuesin e intervalit kohor të kthyer nga funksioni setInterval() kur ai vendoset.

Si rezultat, mora kodin e mëposhtëm, të cilin vendosa të mos e shkruaj si një metodë të veçantë:

ClearInterval(self.slideCycle);

Dhe e vendosi në vendet ku përshkruhen veprimet kur klikoni në elementë të ndryshëm navigimi, d.m.th. ne vazhdim:

Link.addEventListener("kliko", funksioni (e) (...)); self.prevBtn.addEventListener("kliko", funksioni (e) (...)); self.nextBtn.addEventListener("kliko", funksioni (e) (...));

Është më mirë të thërrisni clearInterval() më afër vetë ngjarjes së klikimit, gjëja kryesore është para saj, dhe jo pas saj.

Integrimi i rrëshqitësit JavaScript në faqen e internetit

Pra, rrëshqitësi ynë në JS të pastër është gati. Tani gjithçka që mbetet është ta lidhni atë me sitin.

Për ta bërë këtë, ju duhet të kryeni hapat e mëposhtëm në mënyrë sekuenciale, të cilat janë veprime standarde kur integroni çdo bibliotekë JavaScript të palëve të treta në përgjithësi.

Hapi 1 . Ne kopjojmë skedarët e bibliotekës në faqen tonë të internetit në një drejtori të veçantë.
Hapi 2. Shtoni kodin e mëposhtëm në HTML-në e faqeve ku do të duhet të shfaqet rrëshqitësi, duke e vendosur atë përpara etiketës së mbylljes së trupit:

Hapi 3. Ne vendosim kodin e mëposhtëm për thirrjen e karuselit JS në çdo skedar ekzistues JavaScript, i cili përfshihet në faqe pas lidhjes së vetë rrëshqitësit:

Var aSlider = rrëshqitës i ri ("#rrëshqitës");

Siç mund ta shihni, ky kod në thelb krijon një objekt të klasës Slider, i cili gjendet në popupSlider.js. Kjo është arsyeja pse duhet të thirret vetëm pasi të lidhni vetë skedarin e klasës me faqen.

Shtimi i rrëshqitjeve të reja në një karusel JavaScript

Gjithçka është shumë e thjeshtë këtu. Meqenëse rrëshqitjet tona janë marrë nga një drejtori e veçantë e bibliotekës së rrëshqitjeve, kur shtoni fotografi të reja, thjesht do t'ju duhet të hidhni skedarët e nevojshëm në të, duke u dhënë fillimisht të njëjtën madhësi si të tjerët.

Dhe më pas në kodin e skedarit assets/popupSlider.html shtoni një bllok të ri në kontejner me id slider-wrapper:

Teksti

Në parim, thjesht mund të kopjoni një ekzistues të ngjashëm dhe të ndryshoni shtegun në skedarin e imazhit dhe tekstin e nënshkrimit (nëse është e nevojshme fare).

Do t'ju duhet gjithashtu të shtoni një element të ri navigimi në formën e një rrethi, sepse... Për momentin, shtimi automatik i tij ende nuk është zbatuar. Për ta bërë këtë, do t'ju duhet të shtoni kodin e mëposhtëm në kontejner me ID-në rrëshqitës-nav, duke e shkruar atë në fund:

Vlera e atributit data-slide duhet të jetë më e madhe se vlera më e madhe e elementeve të tjerë. Mjafton vetëm të rritet rryma maksimale me një.

Paketimi i karuselit JS në një skenar të vetëm

Kjo është e gjitha, rrëshqitësi JavaScript është gati dhe i lidhur. Unë personalisht rekomandoj përdorimin e këtij opsioni në praktikë nëse ju nevojitet fare :)

Për të përshpejtuar funksionimin e tij, nga rruga, mund të kompresoni më tej përbërësit statikë: skedarët CSS, HTML dhe JavaScript. Unë nuk e bëra këtë dhe ju ofrova kod të minuar, sepse tani ka shumë sisteme ndërtimi frontend: Gulp, Grunt, Webpack dhe të tjerë. Dhe secila prej tyre ka algoritmet e veta për kompresimin dhe lidhjen e skedarëve.

Për më tepër, rezultatet e minuara mund të funksionojnë ndryshe në OS të ndryshme. Në përgjithësi, ka shumë arsye.

Dhe vetë kodet burimore, mendoj, nuk janë aq të rënda sa të kenë nevojë për këtë procedurë. Por nëse keni nevojë për to, atëherë konfiguroni vetë minifikimin, duke marrë parasysh sistemin operativ dhe kolektorin tuaj.

Siç shkrova në fillim, për të zgjidhur detyrën e vendosur fillimisht për mua, më duhej të merrja një skedar të vetëm JS për përdorimin e saktë të rrëshqitësit tim përmes një shërbimi të palëve të treta në sit. Për këtë arsye, unë, në mënyrë rigoroze, nuk përdora biblioteka të gatshme të palëve të treta.

Atëherë opsioni i një skripti të vetëm karuseli JavaScript do t'ju vijë në ndihmë, sepse... e gjithë përmbajtja do të përmbahet drejtpërdrejt në të, duke përfshirë kodin HTML/CSS, i cili në rastin e një biblioteke ruhet në skedarë të veçantë.

Skenari në rastin tim përbëhet nga dy pjesë. Pjesa e parë përmbante përmbajtjen e skedarit popupSlider.js, të cilin nuk do ta prezantoj për herë të dytë. Futeni vetë, duke hequr përshkrimin e metodës loadStatic() dhe thirrjen e saj nga kodi i klasës, sepse nuk do të na duhen.

Pjesa e dytë e një skripti të vetëm rrëshqitës JavaScript për sitin është një mbajtës për ngjarjen DOMContentLoaded, e cila ndodh kur ngarkohet përmbajtja e faqes.

Aty do të shtojmë kodin carousel JS në faqen HTML/CSS dhe do të krijojmë një objekt të klasës Slider, i cili është i barabartë me aktivizimin e vetë rrëshqitësit.

Skematikisht kodi duket si ky:

/* përmbajtja e popupSlider.js pa përshkruar metodën loadStatic() dhe thirrjen e saj */ document.addEventListener("DOMContentLoaded", funksion())( var str = "\ \ /*kodi css*/ \ /* kodi html * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aRrëshqitës = rrëshqitës i ri ("#rrëshqitës");

Meqenëse në rastin tim opsioni i ngarkimit të skedarëve në server ishte plotësisht i mbyllur, më duhej të ngarkoja skedarët e imazheve të kontrolleve të karuselit të JavaScript në cloud dhe në vend të shtigjeve drejt tyre në kodin HTML dhe CSS, të shkruaja lidhjet e krijuara kur duke kursyer.

Nëse nuk keni vështirësi të tilla, atëherë nuk keni nevojë të ndryshoni asgjë, por mos harroni të kopjoni direktoritë e bibliotekës së rrëshqitjeve dhe kontrolleve në server dhe të specifikoni shtigjet e sakta për to.

Rrëshqitësi i personalizuar JS - perspektivat e zhvillimit

Për të qenë i sinqertë, nuk kam në plan të angazhohem në mbështetje dhe zhvillim të synuar të zgjidhjes që kam krijuar :) Për momentin, ka një mori rrëshqitësish të ngjashëm dhe një karrocë të vogël, të cilat, ndryshe nga e imja, kanë historinë e tyre, janë testuar tërësisht dhe mbështeten nga një komunitet i madh përdoruesish dhe zhvilluesish.

Nuk është disi interesante për mua të filloj gjithë këtë rrugëtim vetëm nga e para dhe të krijoj një biçikletë tjetër, dhe nuk kam vërtet kohë për të. Por, nga ana tjetër, ky rrëshqitës JavaScript është një mundësi e shkëlqyer për të praktikuar zhvillimin duke rifaktoruar kodin e tij dhe duke zbatuar funksione të reja interesante që mund të mos ekzistojnë ende.

Pra, nëse ju, si unë, keni nevojë për një bazë kodi për eksperimente dhe keni të paktën pak kohë shtesë të lirë, kopjoni kodin e rrëshqitësit JavaScript që përshkrova ose bashkohuni me kontribuesit në GitHub. Depoja është e hapur dhe unë ofrova një lidhje me të në fillim të artikullit.

Nëse dëshironi të përmirësoni aftësitë tuaja të përparme në krijimin tim, unë mund t'ju jap edhe një listë të vogël modifikimesh dhe përmirësimesh që i duhen kodit dhe që mund të jenë me interes për ju për sa i përket zbatimit të tyre:

bëni një konfigurim të jashtëm në mënyrë që të mund të konfiguroni me lehtësi rrëshqitësin;

bëjnë të mundur futjen e një rrëshqitësi brenda faqes (aktualisht është krijuar vetëm si një dritare kërcyese);

ngarkimi asinkron i kodit HTML (tani sinkron, i cili është shënuar si i vjetëruar nga shumë shfletues);

paketoni bibliotekën si një paketë, NPM, Bower ose paketë tjetër në mënyrë që të mund të instalohet dhe të menaxhohen varësitë duke përdorur menaxherët e paketave;

bëjnë paraqitjen përshtatëse për përdorimin e karuselit JS në pajisje të ndryshme;

bëni ndërrimin e rrëshqitjes bazuar në ngjarjen Swipe për përdoruesit e celularëve.

Lista e modifikimeve që kam bërë, natyrisht, nuk është përfundimtare dhe mund të plotësohet. Shkruani për sugjerimet, mendimet dhe dëshirat tuaja në komentet poshtë artikullit dhe ndajini me miqtë tuaj përmes rrjeteve sociale për t'i përfshirë edhe ata në zhvillim.

Ju kërkoj të mos gjykoni kodin tim në mënyrë rigoroze, sepse, siç thashë tashmë, nuk e konsideroj veten specialist të Frontend dhe nuk jam. Unë jam gjithashtu i hapur për të gjitha komentet tuaja për stilin e kodimit dhe shpresoj se unë mund të mësoj diçka nga ju, dhe ju nga unë, d.m.th. përmbushin qëllimin kryesor të zhvillimit dhe mbështetjes së produkteve të OpenSource.

Bashkohuni me komunitetet e projektit, abonohuni në përditësime dhe madje mund të më ndihmoni financiarisht duke përdorur formularin nën vetë artikullin, nëse kam qenë në gjendje t'ju ndihmoj me diçka ose thjesht ju pëlqen ajo që bëj :)

Kjo është gjithçka që doja të thoja! Gjithe te mirat! 🙂

Por meqenëse po shqyrtojmë bazat e JS, për të studiuar bazat do të përshkruaj se si të krijoj një rrëshqitës të thjeshtë duke përdorur vetëm gjuhën JavaScript. Epo, le të fillojmë të analizojmë materialin!

Çfarë lloje rrëshqitësish ekzistojnë dhe ku mund të nevojiten?

Krijimi i galerive të përshtatshme për shikimin e imazheve kërkohet në të gjitha shërbimet e internetit që përmbajnë të paktën disa fotografi. Këto mund të jenë dyqane online, faqet e portofolit, lajme dhe shërbime arsimore, faqet e internetit të kompanive dhe institucioneve argëtuese me raporte fotografike, etj.

Megjithatë, ky është një përdorim standard i rrëshqitësve. Teknologji të tilla përdoren gjithashtu për të tërhequr klientët në mallra, shërbime promovuese ose për të përshkruar avantazhet e ndërmarrjeve.

Kryesisht, klientët kërkojnë ta zbatojnë atë në galeritë e tipit “Carousel”. Ky është një mjet i përshtatshëm për shikimin e imazheve në përmasa të mëdha me aftësinë që përdoruesi të ndërrojë rrëshqitjet përpara dhe prapa. Në këtë rast, vetë fotografitë zakonisht ndryshojnë automatikisht pas një kohe të caktuar. Ky mekanizëm u emërua për shkak të faktit se shfaqja e fotografive përsëritet në një rreth.

Sot, nëse dëshironi, mund të gjeni shtojcat më të pazakonta dhe tërheqëse në internet për të parë një grup fotografish.

Veprimtari e pavarur

Epo, tani le të fillojmë të krijojmë rrëshqitësin tonë. Në këtë fazë të të mësuarit, për ta zbatuar atë, ju sugjeroj të përdorni të pastër. Kjo do të ndërrojë automatikisht fotografitë në një rreth.

Më poshtë kam bashkangjitur kodin për aplikacionin tim. Kam lënë komente për ju ndërsa kam koduar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Ndërruesi automatik i imazhit /*Përshkrimi i pamjes së kornizës, baza për rrëshqitësin e ardhshëm */ #slides( pozicioni: relative; lartësia: 415 px; gjerësia: 100%; mbushja: 0 px; lloji i stilit të listës: asnjë; kutia- hije: 0 0 7px #010, 0 0 10px blu, 0 0 15px #010, 0 0 35px #010 ) /* Redaktimi i shfaqjes së imazheve*/ img (gjerësia: automatik; lartësia: 390 px; mbushja: 13 px;) /* Duke treguar që artikujt e listës së përmbajtjes do të shfaqen në qendër të elementit prind, d.m.th. në këtë rast, në qendër të elementit ul - baza për rrëshqitjet */ li ( rreshtimi i tekstit: qendër; ) /* Unë përshkruaj pamjen e vetë rrëshqitjeve */ .rrëshqitje( pozicioni: absolute; opaciteti: 0 sipër: 0px: 100% gjerësi: -moz-tranzicion: opacity 1.5s; : 1; indeksi z: 4;

• 
• 
• 

var MySlider = document.querySelectorAll("#slides .slide"); var aktualeFoto = 0; var IntervalForChange = setInterval(nextSlide,2700); funksioni nextSlide())( MySlider.className = "rrëshqitje"; aktualePicture = (currentPicture+1)%MySlider.length; MySlider.className = "duke shfaqur rrëshqitje"; )

Shpresoj të mos keni pasur ndonjë problem me kodin css dhe html. Por e konsideroj të nevojshme çmontimin e punës së skenarit. Pra, le të kalojmë në deshifrimin e asaj që u shkrua.

Pra, së pari, duke përdorur metodën querySelectorAll, unë i caktoj variablit MySlider një listë të të gjithë elementëve brenda intervalit të caktuar. Tregon këtë hyrje

document.querySelectorAll("#slides .slide")

Kështu, MySlider ruan një koleksion prej katër elementësh.

Më pas, unë përcaktoj se cili imazh të fillojë të shfaqet duke vendosur variablin aktualPicture në zero. Pastaj tregoj se ndryshimi i rrëshqitjes ndodh në 2.7 sekonda dhe funksioni i përpunimit NextSlide duhet të thirret.

Le të kalojmë në vetë funksionin.

Fillimisht, për elementin aktual të listës, ndryshoj përshkrimin e klasave, d.m.th. Unë e rishkruaj "slide showing" në "slide". Rrjedhimisht, imazhi bëhet i padukshëm.

Tani përcaktoj një element të ri koleksioni që do të shfaqet në ekran. Për ta bërë këtë, unë marr pozicionin aktual +1. Ju mund të keni vënë re se unë përdor gjithashtu ndarjen me një mbetje (%) sipas numrit të sllajdeve në dispozicion. Ky truk me veshët është i nevojshëm për të nisur shfaqjen në një rreth të ri. Kështu do të dukej fjalë për fjalë:

Por tani ia caktoj përshkrimin e klasës "slide showing" elementit që rezulton. Siç mund ta shihni, gjithçka zbatohet sa më lehtë që të jetë e mundur.

Faleminderit per vemendjen. Mos harroni të bashkoheni në grupin e pajtimtarëve të mi, të lexoni artikuj të rinj dhe, natyrisht, të ndani lidhje me botimet tuaja të preferuara me miqtë tuaj. Ju uroj fat të mirë në mësimin e JavaScript. Mirupafshim!

Përshëndetje, Roman Chueshov

Lexuar: 256 herë

Disa kohë më parë, fillova të mësoj jQuery. Unë mendoj se të gjithë e dinë se ky është emri i bibliotekës më të njohur për zhvillimin dhe krijimin e skripteve në JavaScript. Me ndihmën e tij është shumë e lehtë të krijohen elemente spektakolare dhe interaktive të faqes në internet.

Në këtë artikull, unë dua t'ju tregoj se si të krijoni një rrëshqitës të thjeshtë universal duke përdorur jQuery. Në fakt, në internet ka një numër shumë të madh të rrëshqitësve të ndryshëm të gatshëm, të cilët ndonjëherë duken shumë joshëse dhe janë mjaft funksionale, por ne do t'i bëjmë nga e para.

Pra, cilat veçori të rrëshqitësit tonë jQuery (të cilin e quajta HWSlider) mund të vërehen?

• Lehtësia e përdorimit dhe dizajnit - Doja të krijoja një skenar të thjeshtë pa këmbanat dhe bilbilat, kështu që nuk përdora animacione CSS3 dhe kodi doli të ishte shumë i gjithanshëm dhe i kuptueshëm.
• Aftësia për të futur të dyja imazhet dhe çdo kod HTML në rrëshqitje.
• Mundësia për të lëvizur nëpër rrëshqitje si në rend (përpara - mbrapa) dhe për të zgjedhur çdo rrëshqitje (1,2,3,4...)
• Lidhje të krijuara automatikisht (e mëparshme - e ardhshme, dhe me numra rrëshqitës). Thjesht duhet të futni numrin e kërkuar të div-ve, dhe gjithçka tjetër do të llogaritet vetë. Epo, mund të vërehet se numri i rrëshqitjeve është i pakufizuar.

Skripti është i pajtueshëm me të gjithë shfletuesit modernë: IE, Opera, Firefox, Safari, Chrome (pasi rrëshqitësi nuk përdor CSS3).

Le të fillojmë me shënimin HTML. Faqja ose shablloni HTML duhet të futet në vendin e kërkuar.

Këtu është përmbajtja e rrëshqitjes 1 Këtu është përmbajtja e rrëshqitjes 2 Këtu është përmbajtja e rrëshqitjes 3

Gjithçka është e thjeshtë këtu, siç mund ta shihni, mund të futni sa më shumë rrëshqitje që dëshironi duke krijuar div të reja. Mund të futni çdo kod HTML brenda tyre, për shembull një foto ose një bllok teksti. Vetëm mos harroni të përfshini vetë bibliotekën jQuery së bashku me të gjithë skriptet js. Nëse nuk dini si, shikoni shembullin.

#slider-wrap( /* Mbështjellësi për rrëshqitësin dhe butonat */ gjerësia: 660 px; ) #rrëshqitës( /* Mbështjellësi për rrëshqitësin */ gjerësia: 640 px; lartësia: 360 px; tejmbushja: e fshehur; kufiri:#eee solid 10 px; Pozicioni:relativ; .sli-links control-slide( margin:2px; display:inline-block; gjerësia:16px; lartësia:16px; tejmbushje:fshehur; teksti-indent:-9999px; sfond:url(radioBg.png) në qendër të poshtme nr. përsërit;) .sli -links .control-slide:hover( kursori:pointer; background-position:center center;) .sli-links .control-slide.active(background-position:centre top;) #prewbutton, #nextbutton ( /* Lidhja " Tjetër" dhe "E mëparshme" */ shfaqja:blloku; gjerësia:15px; lartësia:100%; pozicioni:absolut; sipër:0; tejmbushja: fshehur; teksti-indent:-999px; sfondi:url(shigjetaBg .png) në qendër të majtë pa përsëritje: 0.8 skicë: asnjë !i rëndësishëm;) #prewbutton(majtas:10px;) #prewbutton:Hover, #Nextbutton:Hover( opacity:1;)

Le ta shohim më në detaje. Së pari i japim bllokut kryesor me ID "slider-wrap" gjerësinë e dëshiruar. Meqenëse të gjitha blloqet e tjera janë futur në të, lartësia nuk ka nevojë të specifikohet, ajo do të varet nga ajo që është brenda. Pastaj duhet të vendosim dimensionet e enës në të cilën do të vendosen rrëshqitjet. Ky është #rrëshqitësi. Le t'i japim gjerësinë dhe lartësinë, si dhe, për shembull, një kufi prej 10 pikselësh. Këtu gjerësia është 640 pikselë, që është më e vogël se gjerësia e prindit, pasi po shtojmë kufijtë 10 px djathtas dhe majtas. Gjerësia e vetë sllajdeve (.slide) varet edhe nga gjerësia e kësaj div.

Dhe gjëja e fundit: duhet të vendosim pozicionin: relative për kontejnerin e rrëshqitjes pasi rrëshqitjet brenda janë me pozicionim absolut. Për vetë rrëshqitjet, vetëm gjerësia dhe lartësia vendosen në CSS. Karakteristikat e mbetura vendosen në skriptin jQuery.

Selector.sli-links është një bllok që do të përmbajë butona për të lëvizur në rrëshqitjen e kërkuar. Këta butona janë elementë të thjeshtë të numrit të tipit, të cilët do të futen automatikisht në sasinë e kërkuar, së bashku me lidhjet e tyre prindër.sli. Për butonat, ne vendosim një pamje të bukur, domethënë, ne bëjmë çdo buton katror, ​​i rreshtojmë të gjithë në qendër dhe gjithashtu, falë tejmbushjes: fshehur dhe tekst-indent:-9999px, ne heqim tekstin, duke lënë vetëm ikona të sfondit , i cili gjithashtu ndryshon kur vendoset në këtë element kursori. Për lehtësi, përdora sprites, të cilat reduktuan numrin e imazheve.

Më pas, projektohet butoni aktiv. Ne thjesht ndryshojmë pozicionin e sfondit. Më pas do të ridizajnojmë lidhjet për të shkuar te rrëshqitjet e ardhshme dhe ato të mëparshme. Ju mund t'u jepni atyre çdo dizajn, ashtu si butonat. Këto lidhje futen automatikisht brenda #rrëshqitës. Por për t'i bërë ato të dukshme, u dhashë atyre një pozicion absolut dhe një shtresë të sipërme (z-index:3) në mënyrë që të shfaqen mbi rrëshqitje. Unë mendoj se me CSS gjithçka është e qartë dhe e thjeshtë këtu: ju mund të ndryshoni pothuajse të gjitha vetitë për të dizajnuar rrëshqitësin ashtu siç ju nevojitet.

Tani le të shohim vetë skenarin:

Var hwSlideSpeed ​​= 700; var hwTimeOut = 3000; var hwNeedLinks = e vërtetë; $(document).ready(funksion(e) ( $(".slide").css(("position" : "absolute", "lart":"0", "left": "0")).fshih () .eq(0).show(); .rrëshqitje").eq(slideNum).fadeOut(hwSlideSpeed); if(shigjeta == "tjetër")( if(slideNum == (slideCount-1))(slideNum=0;) other(slideNum++) ) other if( shigjeta == "prej") ( if(Numri i rrëshqitjes == 0)(Numri i rrëshqitjes=Numri i rrëshqitjes-1;) else(Numri i rrëshqitjes-=1) ) else(Numri i rrëshqitjes = shigjeta; ) $(".rrëshqitje").eq(Numri i rrëshqitjes) .fadeIn(hwSlideSpeed, rotator) $(".control-slide.active").removeClass("active").eq(slideNum) ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton"). kliko(funksion())(animSlide("next"); )) $( " #prewbutton") + indeksi + "" ) $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("aktive"); $(".control-slide").kliko(funksioni())(var goToNum = parseFloat($(this).tekst()); animSlide(goToNum); )); var pauzë = false; var rotator = funksion())( if(!pause)(slideTime = setTimeout(funksion())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(funksion( )) (clearTimeout(slideTime); pauzë = e vërtetë;), funksion () (pauzë = false; rrotullues (); )); rrotullues (); ));

Së pari, cilësimet ruhen në variabla: hwSlideSpeed ​​​​ - shpejtësia e rrotullimit të rrëshqitjeve, hwTimeOut - koha pas së cilës rrëshqitja ndryshon automatikisht, hwNeedLinks - kontrollon lidhjet "Next" dhe "Previous" - nëse vlera e kësaj ndryshore është e vërtetë, atëherë këto lidhje do të shfaqen, dhe nëse janë të rreme, atëherë ato nuk do të jenë në përputhje me rrethanat (si në faqen kryesore të blogut tim).

Më pas, vendosim vetitë e nevojshme CSS për rrëshqitjet duke përdorur metodën .css(). Ne grumbullojmë blloqe me rrëshqitje njëra mbi tjetrën duke përdorur pozicionimin absolut, pastaj i fshehim të gjitha.hide(), dhe më pas shfaqim vetëm të parin. Ndryshorja slideNum është numri i rrëshqitjes aktive, domethënë numëruesi.

Logjika kryesore e rrëshqitësit tonë jQuery është funksioni animSlide. Duhet një parametër. Nëse kalojmë vargjet "next" ose "prew" në të, atëherë operatorët e kushtëzuar do të punojnë dhe rrëshqitja tjetër ose e mëparshme do të shfaqet, përkatësisht. Nëse dërgojmë një numër si vlerë, atëherë ky numër do të bëhet rrëshqitja aktive dhe do të shfaqet.

Pra, ky funksion fsheh div-në aktuale, llogarit një të re dhe e shfaq atë.

Vini re se metodës .fadeIn(), e cila e bën të dukshme rrëshqitjen aktive, i jepet një argument i dytë. Ky është i ashtuquajturi funksion i kthimit të thirrjes. Ai ekzekutohet kur rrëshqitja shfaqet plotësisht. Në këtë rast, kjo bëhet për të siguruar lëvizjen automatike të rrëshqitjeve. Funksioni rrotullues i përcaktuar më poshtë thërret përsëri funksionin animSlide për të kaluar në rrëshqitjen tjetër në intervalin kohor të dëshiruar: do të marrim një mbyllje që siguron lëvizje të vazhdueshme.

Gjithçka funksionon mirë, por ne duhet të ndalojmë funksionimin e automatizimit nëse përdoruesi lëviz kursorin në rrëshqitës ose shtyp butonat. Për këtë qëllim krijohet ndryshorja pauzë. Nëse vlera e saj është pozitive - e vërtetë, atëherë nuk do të ketë ndërrim automatik. Duke përdorur metodën .hover(), ne specifikojmë: pastroni kohëmatësin nëse është duke u ekzekutuar - clearTimeout(slideTime) dhe vendosni pauzë = true. Dhe pasi të lëvizni kursorin, fikni pauzën dhe ekzekutoni mbylljen e rotatorit ().

Për më tepër, ne duhet të krijojmë elementë të rinj në faqe dhe t'i vendosim ato në vendin e duhur. Duke përdorur ciklin every() për çdo rrëshqitje (div me klasën .slide), ne do të krijojmë një element span brenda të cilit ka një numër - numrin e rrëshqitjes. Ky numër përdoret në funksionin e animacionit për të kaluar në rrëshqitje me këtë numër. Le të mbështjellim gjithçka në një div me klasat e nevojshme, dhe në fund do të marrim shënimin e mëposhtëm:

0 1 2 3

Do të duket, pse krijojmë shënim brenda skriptit, dhe jo në kodin HTML? Fakti është se, për shembull, nëse përdoruesi ka skriptet të çaktivizuara, ai nuk do të shohë elementë që nuk do të funksionojnë dhe kjo nuk do ta ngatërrojë atë. Për më tepër, kodi është thjeshtuar, gjë që është e mirë për SEO.

Si rezultat, faqosja e rrëshqitësit do të duket diçka e tillë (kam përdorur imazhe si rrëshqitje dhe kam instaluar 5 prej tyre):

0 1 2 3

Më poshtë mund të shihni se si funksionon rrëshqitësi ynë jQuery në faqen demo dhe të shkarkoni të gjitha burimet e nevojshme.

Së fundi, disa pika në lidhje me integrimin e këtij rrëshqitësi me Drupal. Mund ta shtoni këtë kod në një skedar shabllon, për shembull në page.tpl.php, dhe bashkëngjitni skriptin si skedarë të veçantë js në temë. Jquery në Drupal është aktivizuar si parazgjedhje, por funksionon në modalitetin e përputhshmërisë (). Ka dy opsione për përmirësim. Ose mbështillni të gjithë kodin js:

(funksioni ($) ( // I gjithë kodi juaj... ))(jQuery);

ose zëvendësoni simbolet $ në të gjithë skriptin me jQuery. Si kjo:

JQuery(document).ready(funksion(e) ( jQuery(".slide").css(("position" : "absolute", "lart":"0", "left": "0")).fshih () .eq(0).show();

Shembulli ka zbatuar tashmë metodën e parë.

Faleminderit per leximin! Lini komente, ejani përsëri. Ju gjithashtu mund të abonoheni në RSS për të marrë së pari përditësimet e blogut!

Shtuar: Kjo nuk është e gjitha. Lexoni. Atje do të shtojmë veçori të reja në këtë skenar.