Krijimi i një rrëshqitësi të thjeshtë 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

Sot do të shikojmë se si mund të bëni një rrëshqitës duke përdorur jQuery me duart tuaja.

Rrëshqitës (ose siç e quajnë disa njerëz Rotator)është një bllok në një faqe interneti që përbëhet nga një grup fotografish me lidhje (dhe ndoshta tekst) që ndryshojnë njëra-tjetrën herë pas here.

Kështu që. Së pari, ne duhet të bëjmë një bllok që do të përmbajë të gjitha fotot (le ta quajmë atë pamje, si të themi "zona e dukshmërisë së rrëshqitësit").
Le të vendosim një listë të panumëruar (ul) në të, në mënyrë që të mund t'i ruajmë me lehtësi të gjitha rrëshqitjet në një vend (në parim, mund të përdorni çdo enë blloku që mbështet elementë të brendshëm).
Epo, dhe, në përputhje me rrethanat, vetë rrëshqitjet, të cilat do të vendosen në rrëshqitësin jQuery.

HTML. Rrëshqitësi në jQuery

Kështu duhet të duket HTML:

• Rrëshqitja 1
• Rrëshqitja 2
• Rrëshqitja 3

CSS. Rrëshqitësi në jQuery

Le të shkruajmë menjëherë CSS në mënyrë që kodi HTML të funksionojë siç duhet.
Kështu që:
1) duhet të bëjmë që porta e shikimit të tregojë vetëm përmbajtjen që nevojitet aktualisht, dhe pjesa tjetër e diapozitivëve janë të fshehura
2) në mënyrë që kontejneri i rrëshqitjes (ul, i cili ndodhet brenda portës së shikimit) të mund të lëvizë lehtësisht majtas dhe djathtas
3) në mënyrë që sllajdet (të cilat i kemi bërë në formën e elementeve të listës) ​​të vendosen njëri pas tjetrit nga e majta në të djathtë).

Këtu është CSS, gjithçka është e thjeshtë me të: overflow: fshehur për vieport, pozicioni: absolute për ul dhe float: la për li.

Porta e pamjes ( gjerësia: 300 pikselë; lartësia: 100 pikselë; tejmbushja: e fshehur; pozicioni: relative; ) .rrëshqitës (pozicioni: absolut; majtas: 0; lart: 0; lartësia: 100 px; diferenca: 0; mbushja: 0; ) .rrëshqitje( gjerësia: 300px: diferenca e majtë: #ff0000;

Për shembull, madhësitë e zgjedhura të portit të pamjes dhe të rrëshqitjes janë 300x100 piksele (por ato duhet të përputhen me portën e pamjes dhe rrëshqitjen). Klasat e para, të dyta dhe të treta përdoren vetëm për të vendosur ngjyrat e rrëshqitjeve për qartësi, zbatimi juaj mund të mos ketë këto klasa.

JS. Rrëshqitësi në jQuery

Tani le të kalojmë te kodi jQuery, i cili në vetvete nuk është gjithashtu ndonjë gjë tepër e komplikuar.
Duhet të sigurohemi që rrëshqitjet të lëvizin me një periudhë të caktuar kohore (javascript setInterval) dhe që kur rri pezull mbi rrëshqitje, lëvizja ndalet (në mënyrë që një person të mund të lexojë përmbajtjen e rrëshqitjes).

Pra, ne marrim këtë kod jQuery:

Var slideWidth=300; var sliderTimer; $(function())( $(".slidewrapper").width($(".slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport " ).hover(funksion())(clearInterval(sliderTimer); ),function())( sliderTimer=setInterval(nextSlide,1000); )); funksioni nextSlide())( var currentSlide=parseInt($(".slidewrapper").data("aktuale"));currentSlide++; if(currentSlide>=$(".slidewrapper").children().size()) (currentSlide=0; ) $(".slidewrapper").animate((majtas: -currentSlide*slideWidth),300).data("aktuale",currentSlide);

Në mënyrë:
1) deklaroni një variabël = gjatësia e rrëshqitjes
2) deklaroni një variabël të mbajtësit të kohëmatësit (e cila do të llogarisë periudhën e ndryshimit të rrëshqitjeve)
3) kur faqja ngarkohet, ne fillojmë kohëmatësin dhe i lidhim veprimet me vendosjen e miut mbi rrëshqitje (për të ndalur lëvizjen e rrëshqitjeve nën miun)
4) vendosni gjatësinë e enës ul = gjatësinë e rrëshqitjes * me numrin e rrëshqitjeve (në mënyrë që rrëshqitjet të mos derdhen në rreshtin e 2-të).
5) shkruani një funksion që ndryshon sllajdet (kontrolloni se ku jemi tani - cili rrëshqitës, duke përdorur atributin data-current ul-container; rrit pozicionin aktual; kontrolloni që ai të mos shkojë përtej kornizave të të gjitha sllajdeve; zhvendosni rrëshqitësin- kontejner në të majtë me numrin e kërkuar të pikselëve).

Ne kemi zhvilluar një version pune të një rrëshqitësi në jQuery që funksionon dhe mund të përdoret lehtësisht kur punoni në një faqe interneti.
Së fundi, kodi është postuar në jsfiddle.net, ku mund të klikoni dhe të luani.
http://jsfiddle.net/FUxWc/

Nëse keni ndonjë pyetje, komentet janë të hapura, ne do t'ju përgjigjemi, do t'ju ndihmojmë dhe do t'ju këshillojmë.

Në komentet e postimit, ata së fundmi pyetën nëse ka ndonjë shërbim online për krijimin e tyre. Në parim, nëse projekti juaj funksionon në një nga CMS-të e njohura (WordPress, Drupal), atëherë duhet të ketë shtojca të përshtatshme atje. Por çfarë të bëni kur faqja është e shkruar në HTML ose nuk ka module të përshtatshme? Sot do t'ju tregoj për disa opsione për zgjidhjen e këtij problemi.

Në përgjithësi, metodat për krijimin e rrëshqitësve janë të ndryshme. Më kujtohet kur punoja me TYPO3, kishte një modul që konvertonte automatikisht imazhet në Flash për t'u shfaqur në sit. Ekzistojnë gjithashtu programe të veçanta desktopi që ju lejojnë të krijoni disqe të ngjashme flash ose të gjeneroni kodin e nevojshëm HTML + CSS. Në ditët e sotme, rrëshqitësit zbatohen kryesisht duke përdorur Javascript dhe bibliotekat përkatëse, për shembull, jQuery. Për më tepër, ka shumë skenarë të ndryshëm. Unë do të shikoj disa prej tyre.

është një shërbim i shkëlqyer për krijimin e një rrëshqitësi në internet. Ju nuk keni nevojë të gërmoni në asnjë skript, pothuajse të gjitha cilësimet janë të disponueshme për redaktim ndërveprues: madhësitë, efektet, navigimi, etj. Thjesht ngarkoni fotot tuaja, zgjidhni opsionet që ju nevojiten dhe shkarkoni kodin rrëshqitës të gatshëm. E gjithë kjo është falas. HTML-ja përfundimtare përmban një lidhje me këtë shërbim, por teorikisht mund të hiqet, nuk ka filigranë shtesë në imazhe. Respekt për zhvilluesit!

ComSider

ComSider është një tjetër gjenerues falas i rrëshqitësve në internet për një faqe interneti. Parimi i funksionimit është i ngjashëm, ai përbëhet nga 3 hapa: ngarkimi i një fotografie, zgjedhja e një shablloni rrëshqitës dhe vendosja e tij, integrimi i kodit me faqen tuaj të internetit. Modelet e rrëshqitësit ju lejojnë të krijoni elementë të dizajneve të ndryshme. Në të njëjtën kohë, shërbimi në fakt ka shumë cilësime efektesh dhe opsione të tjera për të marrë rezultatin e dëshiruar. Faqja thotë se ju mund të futni kodin pa shkarkuar skedarët, ose t'i shkarkoni ato dhe të integroni vetë rrëshqitësin.

Cincopa

Cincopa është një shërbim shumë i mirë për krijimin e rrëshqitësve HTML, por, për fat të keq, jo plotësisht falas. Ky është një nga shumë projekte të ngjashme ku ofrohen plane tarifore speciale. Për versionin falas, si rregull, shtohen kufizime të ndryshme në numrin e imazheve të shkarkuara, trafikun dhe (gjëja më e keqe) vendoset një filigran. Për më tepër, gjithçka, natyrisht, zbatohet me mjeshtëri - shumë tema të projektimit, cilësime, shtojca për CMS të njohura, mbështetje teknike. Këtu duhet të shikoni tarifat në disa shërbime, ato mund të jenë mjaft të përballueshme.

Shërbimi është një nga të paktët ku plani falas nuk përfshin filigranë në imazhe. Vetëm numri i efekteve të mundshme është i kufizuar, por kjo nuk është kritike. Shumë cilësime, ka një shtojcë të veçantë për WordPress. Në përgjithësi një vendim i mirë.

Krijuesi HTML5

HTML5Maker është një shembull tjetër i një shërbimi me pagesë që funksionon në bazë të abonimit. Në versionin Falas do të duhet të vendosni një filigran, por tarifa fillestare ju lejon të heqni qafe atë. Në të njëjtën kohë, ai ka një çmim relativisht të përballueshëm (5$/muaj) dhe ju lejon të krijoni deri në 3 rrëshqitës me të gjitha efektet dhe shumë shabllone.

E rrëshqitshme

Lloji tjetër i sajteve me rrëshqitës janë projektet që përmbajnë skripte të gatshme për përdorim, për shembull Slippry. Nuk ka forma të përshtatshme për ngarkimin e fotove dhe specifikimin e cilësimeve, por gjithçka është falas. Ju ngarkoni kodin e rrëshqitësit HTML në hostin tuaj dhe e integroni manualisht me sitin. Në faqet e zhvilluesve, si rregull, ka dokumentacion për përdorimin e skriptit, shpjegime të kodit dhe shembuj të punës.

Rrëshqitje

Në përgjithësi, ka rrëshqitës të ndryshëm - Glide është një shembull i shkëlqyer për këtë. Skripti ju lejon të krijoni një rrëshqitës të bukur për sfondin e faqes. E thjeshtë, e shpejtë, adaptive.

TosRus

TosRus është një tjetër rrëshqitës interesant, i cili është disi i ndryshëm nga zbatimi klasik dhe është më shumë si një galeri (megjithatë, është i dobishëm). Ai shfaqet normalisht si në një kompjuter të zakonshëm ashtu edhe në një smartphone. Kur klikoni mbi një foto, ajo hapet në një dritare të plotë, ku do të ketë edhe një rrëshqitës. Ai mbështet futjen jo vetëm të imazheve, por edhe të përmbajtjes HTML me video.

Skenari i shkallëzon në mënyrë të përsosur imazhet, kështu që krijimi i tij është sa më i thjeshtë që të jetë e mundur. Në sit do të gjeni shembullin e kodit dhe përshkrimit. Rrëshqitësi ka aftësinë për të lundruar nëpër shigjeta ose një "element të theksuar" në fund të figurës.

Vizualisht, rrëshqitësi i faqes në internet duket shumë elegant. Ka elemente navigimi dhe një bllok teksti. Sfondi i përgjithshëm për elementin është një imazh i paqartë nga vetë rrëshqitësi, i cili krijon një efekt shumë interesant.

— rrëshqitës adaptiv në jQuery, i përshtatshëm për të gjitha pajisjet. Mund të shfaqet në të gjithë gjerësinë e ekranit ose në një bllok të veçantë. Përshkrimi është mjaft "primitiv", por mund ta kuptoni. Nuk ka aq shumë cilësime sa në disa opsione të tjera.

Kjo zgjidhje është më shumë si një galeri, por mua personalisht më pëlqeu. Lehtësia e përdorimit, lehtësia e personalizimit dhe liria janë avantazhet kryesore të DesoSlide. Mund të jetë e dobishme për zhvilluesit e faqeve të internetit.

Zhvilluesit po e pozicionojnë projektin si një galeri falas në jQuery, megjithëse vizualisht i ngjan një rrëshqitësi të rregullt. Zgjidhja është e pajtueshme me të gjithë shfletuesit kryesorë dhe ka shumë efekte të ndryshme për ndryshimin e imazheve. Më pëlqeu seksioni demo, ku mund të aplikoni cilësime të caktuara në kohë reale për të parë se si funksionon rrëshqitësi për sitin.

— një skript rrëshqitës i thjeshtë, funksional, i personalizueshëm në jQuery në HTML5 dhe CSS3. Zgjidhja është e pajtueshme me të gjithë shfletuesit dhe mbështet dizajn të përgjegjshëm. Zhvilluesit do ta pëlqejnë atë.

Zgjidhja është e dobishme nëse keni nevojë të krijoni një rrëshqitës të tipit carousel, kur shfaqen disa fotografi dhe ato lëvizin automatikisht majtas/djathtas (për shembull, për një linjë logosh të partnerëve ose shfaqin vepra). Kohët e fundit kam shikuar se si ta zbatoj këtë detyrë në WordPress për faqet e zakonshme, mund të provoni skriptin jsSimpleSlider.

Shërbimi krijon një flash drive nga fotot që ngarkoni, i cili shfaqet në sit në formën e një rrëshqitësi. Puna me këtë mjet është e thjeshtë, megjithëse nuk duket shumë si një rrëshqitës klasik (të paktën i mungojnë kontrollet). Gjithçka që mund të vendosni në të janë lidhje të jashtme dhe efekte tranzicioni. Unë mendoj se ju nuk keni gjasa ta përdorni këtë shërbim, unë thjesht po e paraqes atë si një nga opsionet për zbatimin e detyrës.

WOWSlider

Siç thashë në fillim, ka programe për krijimin e rrëshqitësve që janë të instaluar në kompjuterin tuaj. WOWSlider është një shembull i shkëlqyer i një softueri të tillë. Ka vetëm shumë opsione të ndryshme, cilësime, tema, etj. Ju nuk keni nevojë për ndonjë njohuri HTML; Ju mund ta shkarkoni programin falas, por pa blerë një licencë, logoja e tij do të shfaqet në rrëshqitës.

NJM 3OX

Programit CU3OX i pëlqyen efektet e pazakonta 3D për ndryshimin e imazheve. Përdoret për të krijuar galeri dhe rrëshqitës Flash. Punon në Win dhe Mac. Ka shumë cilësime të ndryshme, opsione për ndryshimin e fotografive, lokalizimin në gjuhë të ndryshme, etj. Për përdorim personal, mund të zgjidhni versionin falas, megjithëse fatkeqësisht përmban një filigran.

Nëse këto shërbime, programe dhe skriptet rrëshqitës nuk janë të mjaftueshme për ju, atëherë unë ju këshilloj të lexoni - ka rreth 100 opsione të ndryshme për zbatimin e tyre. Gjithçka, në parim, varet nga kërkesat e funksionalitetit dhe njohuritë tuaja. Shërbimet speciale të krijimit të rrëshqitësit të listuara në fillim funksionojnë mjaft mirë dhe janë falas. Nëse jeni të njohur me zhvillimin e uebit, do të jeni në gjendje të kuptoni skriptet jQuery të paraqitura në artikull. Për ata që janë të rinj në zhvillim, zgjidhjet me pagesë janë të përshtatshme. Disa prej tyre janë në dispozicion në internet me abonim, të tjerët janë programe desktop. Këto të fundit janë më të shtrenjta, por nuk ka kufizime në numrin e elementeve të krijuar ose kufizime kohore.

Nga rruga, nëse dini ndonjë shërbim/skript interesant për krijimin e rrëshqitësve për faqet e internetit, shkruani emrat e tyre dhe lidhjet me to në komente.

Gjithçka është e thjeshtë dhe funksionon shkëlqyeshëm!
POR!
Po përpiqem të shtoj 7 sllajde. Ende tregon vetëm 4 rrëshqitje.

Hmmm vërtet, Pavel, ke të drejtë, nuk mund të shtosh më shumë se 4 sllajde. U përpoqa ta rregulloja këtë gabim, por nuk funksionoi.

Aleksandri përgjigjet:
01/01/2016 në ora 15:52

Shtimi i më shumë rrëshqitësve është mjaft i thjeshtë. Tani do të shpjegoj për ata që nuk e dinë ose nuk e kuptojnë CSS. Lexo me kujdes!
Le të shohim këtë kod:

Teksti për rrëshqitësin #1

Teksti për rrëshqitësin #2

Teksti për rrëshqitësin #3

Teksti për rrëshqitësin #4

Ka vetëm 4 rrëshqitës, por të gjithë janë të numëruar. Shto një rrëshqitës të pestë si ky

Teksti për rrëshqitësin #5

Tani që të shfaqet tek ne, duhet të shkruhet në stile CSS.
Ne gjejmë këto rreshta në kod:

/* css3 vonesa */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s . ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; )

Kushtojini vëmendje numrave të sekuencës dhe kohës së animacionit.
Çdo rrëshqitës ka kohën e vet dhe ky interval korrespondon me 6.0 sekonda. Kjo do të thotë që në mënyrë që të shfaqet rrëshqitja e pestë, duhet të shtoni 6.0 në kohën kur shfaqet rrëshqitja e katërt dhe sigurohuni që të vendosni një numër serial
Këtu është kodi për rrëshqitësin e pestë:

Slides ul li:nth-child(5), .slides ul li:nth-child(5) div ( -webkit-animation-delay: 24.0s; -moz-animation-delay: 24.0s; )

Thjesht duhet të mbani mend të shtoni numrin e sekuencës dhe kohën për rrëshqitjen e re. Ora mund të ndryshohet sipas dëshirës. Për shembull, rrëshqitja e parë do të shfaqet në 6.0 s, dhe e dyta që duam të shfaqet jo në 6.0 por në 10.0 s, atëherë e dyta do të ketë një kohë paraqitjeje prej 16.0 s.

Kjo duket të jetë e gjitha. E kontrollova vetë dhe gjithçka funksionon.

Por ai me të vërtetë nuk dëshiron të punojë në IE. Ky shfletues nuk i kupton të gjitha stilet CSS3. Mund të them një gjë, ju nuk mund të kujdeseni për këtë shfletues dhe të instaloni këtë rrëshqitës, por për ata 10% të njerëzve që përdorin IE ata nuk do ta shohin rrëshqitësin. Nëse është e lidhur me stilet e faqes tuaj, atëherë sigurisht që nuk është shumë mirë nëse një person nuk e sheh atë. Me pak fjalë, shikoni vetë.

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 dizajni - 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 - prapa) 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.

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, 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 px, 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ë formularit numri, të cilat do të futen në sasinë e kërkuar automatikisht, së bashku me prindër.sli-links. 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: hidden dhe text-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") " + indeks + ""; }); $("

").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text() animSlide(goToNum )); , 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 e dëshiruar kohor: do të marrim një mbyllje që siguron lëvizje të vazhdueshme.

Gjithçka funksionon mirë, por ne duhet të ndalojmë automatizimin 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:

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):

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.

1. Slideshow i shkëlqyer jQuery

Një slideshow i madh, spektakolar duke përdorur teknologjitë jQuery.

2. Shtojca jQuery "Scale Carousel"

Slideshow i shkallëzuar duke përdorur jQuery. Ju mund të vendosni madhësitë e shfaqjes së rrëshqitjes që ju përshtaten më mirë.

3. Shtojca jQuery "slideJS"

Rrëshqitësi i imazhit me përshkrimin e tekstit.

4. Shtojca "JSliderNews"

5. Rrëshqitësi CSS3 jQuery

Kur rri pezull mbi shigjetat e navigimit, shfaqet një miniaturë rrethore e rrëshqitjes tjetër.

6. Rrëshqitësi i bukur i jQuery "Cikli i prezantimit".

Rrëshqitësi jQuery me tregues të ngarkimit të imazhit. Ofrohet ndryshimi automatik i rrëshqitjes.

7. Shtojca jQuery "Parallax Slider"

Rrëshqitës me një efekt sfondi vëllimor. Pika kryesore e këtij rrëshqitësi është lëvizja e sfondit, i cili përbëhet nga disa shtresa, secila prej të cilave lëviz me një shpejtësi të ndryshme. Rezultati është një imitim i efektit vëllimor. Duket shumë bukur, mund ta shihni vetë. Efekti shfaqet më mirë në shfletues të tillë si Opera, Google Chrome, IE.

8. Rrëshqitësi i freskët dhe i lehtë jQuery "bxSlider 3.0"

Në faqen demo në seksionin "shembuj" mund të gjeni lidhje për të gjitha përdorimet e mundshme të kësaj shtojce.

9. Rrëshqitësi i imazhit jQuery, shtojca “slideJS”.

Një rrëshqitës elegant jQuery sigurisht që mund të dekoroj projektin tuaj.

10. Shtojca e paraqitjes së rrëshqitjes jQuery "Easy Slides" v1.1

Një shtojcë e lehtë për t'u përdorur jQuery për krijimin e shfaqjeve rrëshqitëse.

11. Shtojca jQuery Slidy

Shtojcë e lehtë jQuery në versione të ndryshme. Ofrohet ndryshimi automatik i rrëshqitjes.

12. Galeria jQuery CSS me ndryshim automatik të rrëshqitjes

Nëse vizitori nuk klikon në shigjetat "Përpara" ose "Prapa" brenda një kohe të caktuar, galeria do të fillojë të lëvizë automatikisht.

13. Rrëshqitësi jQuery "Nivo Slider"

Shtojcë shumë profesionale, me cilësi të lartë, e lehtë me kod të vlefshëm. Ekzistojnë shumë efekte të ndryshme të tranzicionit të rrëshqitjes.

14. Rrëshqitësi jQuery "MobilySlider"

Rrëshqitës i freskët. Rrëshqitësi jQuery me efekte të ndryshme të ndryshimit të imazhit.

15. Shtojca jQuery "Slider²"

Rrëshqitës i lehtë me ndërrues automatik të rrëshqitjes.

16. Rrëshqitësi i freskët i javascript

Rrëshqitës me ndryshim automatik të imazhit.

Plugin për zbatimin e shfaqjeve të rrëshqitjes me ndryshim automatik të diapozitivëve. Është e mundur të kontrolloni ekranin duke përdorur miniaturat e imazhit.

Rrëshqitësi i imazhit jQuery CSS duke përdorur shtojcën NivoSlider.

19. rrëshqitësi jQuery "jShowOff"

Plugin për rrotullimin e përmbajtjes. Tre opsione për përdorim: pa navigim (me ndryshim automatik në formatin e shfaqjes së rrëshqitjes), me navigim në formën e butonave, me navigim në formën e miniaturave të imazhit.

20. Shtojca “Shutter Effect Portfolio”.

Shtojcë e freskët jQuery për dizajnimin e portofolit të një fotografi. Galeria ka një efekt interesant të ndryshimit të imazheve. Fotot ndjekin njëra-tjetrën me një efekt të ngjashëm me funksionimin e një kapaku të lenteve.

21. Rrëshqitësi i lehtë javascript CSS "TinySlider 2"

Zbatimi i një rrëshqitësi imazhi duke përdorur javascript dhe CSS.

22. Rrëshqitësi i mrekullueshëm "Tinycircleslider"

Rrëshqitës i rrumbullakët elegant. Kalimi midis imazheve kryhet duke zvarritur rrëshqitësin në formën e një rrethi të kuq rreth perimetrit. Do të përshtatet në mënyrë të përkryer në faqen tuaj të internetit nëse përdorni elementë të rrumbullakët në dizajnin tuaj.

23. Rrëshqitësi i imazhit me jQuery

Rrëshqitës i lehtë "Kit rrëshqitës". Rrëshqitësi është i disponueshëm në dizajne të ndryshme: vertikale dhe horizontale. Gjithashtu zbatohen lloje të ndryshme navigimi midis imazheve: duke përdorur butonat "Përpara" dhe "Prapa", duke përdorur timonin e miut, duke përdorur klikim të miut në rrëshqitje.

24. Galeria me miniatura “Slider Kit”

Galeria "Slider Kit". Lëvizja e miniaturave kryhet si vertikalisht ashtu edhe horizontalisht. Kalimi midis imazheve kryhet duke përdorur: rrotën e miut, klikimin e mausit ose duke lëvizur kursorin mbi miniaturë.

25. Rrëshqitësi i përmbajtjes jQuery "Kit rrëshqitës"

Rrëshqitësi i përmbajtjes vertikale dhe horizontale duke përdorur jQuery.

26. Slideshow jQuery "Slider Kit"

Slideshow me ndryshim automatik të rrëshqitjes.

27. Rrëshqitës i lehtë profesional javascript CSS3

Një rrëshqitës i pastër jQuery dhe CSS3 i krijuar në 2011.

Slideshow jQuery me miniaturë.

29. Slideshow i thjeshtë jQuery

Slideshow me butona navigimi.

30. Slideshow i mrekullueshëm i jQuery “Skitter”.

Shtojca jQuery Skitter për krijimin e rrëshqitjeve mahnitëse. Shtojca mbështet 22 (!) lloje të efekteve të ndryshme të animacionit kur ndryshoni imazhet. Mund të funksionojë me dy opsione navigimi me rrëshqitje: duke përdorur numrat e rrëshqitjes dhe duke përdorur miniaturë. Sigurohuni që të shikoni demonstrimin, një gjetje me cilësi shumë të lartë. Teknologjitë e përdorura: CSS, HTML, jQuery, PHP.

31. Slideshow "Awkward"

Slide show funksional. Slides mund të jenë: imazhe të thjeshta, imazhe me diçitura, imazhe me këshilla veglash, video. Ju mund të përdorni shigjetat, lidhjet e numrave të rrëshqitjes dhe tastet majtas/djathtas në tastierën tuaj për të lundruar. Shfaqja e diapozitivëve vjen në disa versione: me dhe pa miniatura. Për të parë të gjitha opsionet, ndiqni lidhjet Demo #1 - Demo #6 që ndodhen në krye të faqes demo.

Një dizajn shumë origjinal për rrëshqitësin e imazhit, që të kujton një tifoz. Tranzicion i animuar i rrëshqitjes. Lundrimi midis imazheve kryhet duke përdorur shigjeta. Ekziston gjithashtu një zhvendosje automatike që mund të ndizet dhe çaktivizohet duke përdorur butonin Play/Pause që ndodhet në krye.

Rrëshqitësi i animuar jQuery. Imazhet e sfondit shkallëzohen automatikisht ndërsa dritarja e shfletuesit ndryshon madhësinë. Për çdo imazh, shfaqet një bllok me një përshkrim.

34. Rrëshqitësi “Flux Slider” duke përdorur jQuery dhe CSS3

Rrëshqitësi i ri jQuery. Disa efekte të bukura të animuara kur ndryshoni rrëshqitjet.

35. Shtojca jQuery "jSwitch"

Galeria e animuar jQuery.

Një rrëshqitje e lehtë jQuery me ndryshim automatik të rrëshqitjes.

37. Versioni i ri i shtojcës "SlideDeck 1.2.2"

Rrëshqitësi i përmbajtjes profesionale. Ka opsione me ndryshim automatik të rrëshqitjes, si dhe një opsion që përdor rrotën e miut për të lëvizur midis rrëshqitjeve.

38. Rrëshqitësi jQuery "Sudo Slider"

Rrëshqitësi i lehtë i imazhit duke përdorur jQuery. Ka shumë opsione zbatimi: ndryshim horizontal dhe vertikal i imazheve, me dhe pa lidhje me numrin e rrëshqitjes, me dhe pa titrat e imazheve, efekte të ndryshme ndryshimi të imazhit. Ekziston një funksion automatik i ndryshimit të rrëshqitjes. Lidhjet me të gjithë shembujt e zbatimit mund të gjenden në faqen demo.

39. Slideshow jQuery CSS3

Slideshow me miniaturë mbështet modalitetin automatik të ndryshimit të rrëshqitjes.

40. Rrëshqitësi jQuery "Flux Slider"

Rrëshqitës me shumë efekte të ndryshimit të imazhit.

41. Rrëshqitësi i thjeshtë jQuery

Rrëshqitësi elegant i imazhit duke përdorur jQuery.

42. Slideshow "Craftyslide" jQuery

43. Slideshow jQuery me ekran të plotë

Slideshow jQuery HTML5 që shtrihet në të gjithë gjerësinë e ekranit me zë.

Një rrëshqitje e thjeshtë jQuery.