Design neobișnuit de glisor folosind jquery. Galerie foto adaptivă plus. Galerie cu miniaturi „Kit Slider”

Dar, deoarece trecem peste elementele de bază ale JS, pentru a studia baza, voi descrie cum se creează glisor simplu doar cu ajutorul limbaj JavaScript. Ei bine, să începem să analizăm materialul!

Ce tipuri de glisoare există și unde ar putea fi necesare?

Crearea unor galerii convenabile pentru vizualizarea imaginilor este necesară pentru toate serviciile web care conțin cel puțin câteva fotografii. Acestea pot fi magazine online, site-uri de portofoliu, servicii de știri și educaționale, site-uri web ale companiilor și unităților de divertisment cu reportaje foto etc.

Cu toate acestea, aceasta aplicație standard glisoare. Tehnologii similare folosit și pentru a atrage clienți la bunuri, servicii promoționale sau pentru a descrie avantajele întreprinderilor.

În cea mai mare parte, clienții cer să o implementeze pe galerii de tip „Carusel”. Acest instrument la îndemână pentru a vizualiza imagini la dimensiuni mari, cu posibilitatea utilizatorului de a comuta diapozitivele înainte și înapoi. În acest caz, imaginile în sine comută de obicei automat prin anumit timp. Acest mecanism a fost poreclit datorită faptului că afișarea imaginilor se repetă într-un cerc.

Astăzi, dacă doriți, puteți găsi cele mai neobișnuite și atractive plugin-uri de pe Internet pentru vizualizarea unui set de fotografii.

Activitate independentă

Ei bine, acum să începem să creăm propriul nostru glisor. Pe în această etapăînvățând să-l implementați, vă sugerez să folosiți pure . Va fi comutator automat imagini în cerc.

Mai jos am atasat codul programului aplicatia ta. Ți-am lăsat comentarii așa cum am codificat.

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

Comutator automat de imagini /*Descrie aspect cadru, baza pentru viitorul glisor */ #slides( poziție: relativă; înălțime: 415px; lățime: 100%; umplutură: 0px; tip list-style: niciunul; umbră casetă: 0 0 7px #010, 0 0 10px albastru , 0 0 15px #010, 0 0 35px #010; ) /* Editez afișarea imaginilor*/ img ( lățime: auto; înălțime: 390px; padding: 13px; ) /* Indică faptul că conținutul elementele din listă vor fi afișate în centrul elementului părinte, adică. V în acest caz,în centrul elementului ul - baza pentru diapozitive */ li ( text-align: center; ) /* Descriu aspectul diapozitivelor în sine */ .slide( poziție: absolut; opacitate: 0; sus: 0px ; stânga: 0px; înălțime: 100 %; z-index: 3; lățime: 100%; fundal: albastru; -moz-tranziție: opacitate 1,5 s; tranziție: opacitate 1,5 s; -webkit-tranziție: opacitate 1,5 s; ) /*Când este afișat, obiectul devine vizibil și se mută în față*/ .showing( opacitate: 1; z-index: 4; )

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); funcția nextSlide())( MySlider.className = „diapozitiv”; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = „afișare diapozitiv”; )

Sper că nu ați avut probleme cu codul css și html. Dar consider că este necesar să dezasamblam lucrarea scenariului. Deci, să trecem la descifrarea a ceea ce a fost scris.

Deci, mai întâi, folosind metoda querySelectorAll, atribui variabilei MySlider o listă cu toate elementele din intervalul specificat. Indică această intrare

document.querySelectorAll("#slides .slide")

Astfel, MySlider stochează o colecție de patru elemente.

Apoi, specific ce imagine să înceapă să fie afișată setând variabila currentPicture la zero. Apoi indică faptul că schimbarea diapozitivului are loc în 2,7 secunde și trebuie apelată funcția de procesare nextSlide.

Să trecem la funcția în sine.

Inițial, pentru elementul de listă curent, schimb descrierea claselor, adică. Rescriu „prezentare de diapozitive” în „diapozitive”. În consecință, imaginea devine invizibilă.

Acum definesc element nou colecție, care va fi afișată pe ecran. Pentru a face acest lucru iau poziția curentă +1. Poate ați observat că folosesc și împărțirea cu un rest (%) după numărul de diapozitive disponibile. Acest truc cu urechile este necesar pentru a începe spectacolul într-un nou cerc. Cam așa ar arăta literalmente.

Permiteți-mi să încep prin a spune că acest articol a fost scris pentru a vorbi despre cum să creați un glisor de defilare a imaginii pentru paginile web. Acest articol nu este în niciun caz de natură educațională, ci servește doar ca un exemplu al modului în care obiectul nostru de considerare poate fi implementat. Puteți folosi codul oferit în acest articol ca un fel de șablon pentru dezvoltări similare; sper că voi reuși să transmit cititorului esența a ceea ce am scris suficient de detaliat și într-un mod accesibil.

Și acum la obiect, nu cu mult timp în urmă trebuia să instalez un glisor pe un site, dar după ce am căutat pe Internet scripturi gata făcute, nu am găsit nimic util, pentru că unele nu au funcționat așa cum aveam nevoie, în timp ce altele nu au pornit deloc fără erori în consolă. Mi s-a părut prea neinteresant să folosesc pluginuri jQuery pentru glisor, pentru că... Deși acest lucru va rezolva problema, nu voi înțelege cum funcționează acest mecanism, iar utilizarea unui plugin pentru un singur glisor nu este foarte optimă. De asemenea, nu prea aveam chef să înțeleg scripturile strâmbe, așa că am decis să-mi scriu propriul script pentru glisor, pe care l-aș marca chiar eu după cum aveam nevoie.

În primul rând, trebuie să decidem asupra logicii cursorului în sine și apoi să trecem la implementare.În această etapă, o înțelegere clară a funcționării acestui mecanism este foarte importantă, deoarece fără el nu putem scrie cod care funcționează exact așa cum am vrei.

Obiectul nostru principal va fi viewport, adică un bloc în care vom vedea cum se învârt pozele noastre, în el vom avea un slidewrapper, acesta va fi blocul nostru care conține toate imaginile aliniate într-o singură linie și care se va schimba. poziţia sa în interiorul fereastra în sine.

Apoi, pe părțile laterale din interiorul ferestrei de vizualizare, pe verticală în mijloc, vor exista butoane înapoi și înainte, când facem clic, vom schimba și poziția slidewrapper-ului nostru în raport cu fereastra, provocând astfel efectul de defilare a imaginilor. Și, în sfârșit, ultimul obiect va fi butoanele noastre de navigare, situate în partea de jos a ferestrei de vizualizare.

Când facem clic pe ele, ne vom uita pur și simplu la numărul de serie al acestui buton și îl vom muta în diapozitivul de care avem nevoie, din nou prin deplasarea slidewrapper-ului (deplasarea se va face prin modificarea proprietății transform css, a cărei valoare va fi calculate constant).

Cred că logica modului în care funcționează toată treaba ar trebui să fie clară după ce am afirmat mai sus, dar dacă undeva mai apar neînțelegeri, atunci totul va deveni mai clar în codul de mai jos, trebuie doar puțină răbdare.

Acum hai sa scriem! Mai întâi de toate, să deschidem fișierul nostru index și să scriem acolo markupul de care avem nevoie:

După cum puteți vedea, nu este nimic complicat, block-for-slider servește doar ca bloc în care va fi plasat glisorul nostru, în interiorul acestuia se află fereastra în sine, în care se află slidewrapper-ul nostru, de asemenea o listă imbricată, aici sunt slide-urile, iar img sunt imagini în interiorul lor. Vă rugăm să fiți atenți la faptul că toate imaginile trebuie să aibă aceeași dimensiune sau cel puțin proporții, altfel glisorul va arăta strâmb, deoarece dimensiunile sale depind direct de proporțiile imaginii.

Acum trebuie să stilizăm toată treaba; de obicei, stilurile nu sunt comentate în mod deosebit, dar am decis să atrag atenția în continuare asupra acestui lucru, astfel încât să nu existe neînțelegeri în viitor.

body ( margine: 0; padding: 0; ) #block-for-slider ( lățime: 800px; margine: 0 auto; margin-top: 100px; ) #viewport ( lățime: 100%; afișare: tabel; poziție: relativă; overflow: ascuns; -webkit-user-select: niciunul; -moz-user-select: niciunul; -ms-user-select: niciunul; -o-user-select: niciunul; user-select: niciunul; ) #slidewrapper ( poziție: relativă; lățime: calc(100% * 4); sus: 0; stânga: 0; margine: 0; umplutură: 0; -webkit-tranziție: 1s; -o-tranziție: 1s; tranziție: 1s; -webkit -funcția-temporizare-tranziție: ease-in-out; -o-transition-timing-function: ease-in-out; function-timing-tranziție: ease-in-out; ) #slidewrapper ul, #slidewrapper li ( margine : 0; padding: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Să începem cu block-for-slider , acesta, din nou, este blocul nostru de pe pagină, pe care îl vom aloca pentru glisor, înălțimea acestuia va depinde de lățimea sa și de proporțiile imaginii noastre, deoarece viewport-ul ocupă toată lățimea blocului-pentru-slider , apoi slide-ul în sine are aceeași lățime și, în consecință, imaginea din interiorul său își schimbă înălțimea în funcție de lățime (proporțiile sunt păstrate). Am plasat acest element pe pagina mea orizontal în mijloc, cu 100px indentat din partea de sus, făcându-i poziția mai convenabilă pentru exemplu.

Elementul viewport, așa cum am menționat deja, ocupă întreaga lățime a blocului pentru slider, are proprietatea overflow:hidden, acest lucru ne va permite să ne ascundem fluxul de imagini, care se extinde dincolo de viewport.

Următoarea proprietate CSS este user-select:none , ceea ce vă permite să scăpați de evidențierea albastră a elementelor glisante individuale atunci când faceți clic pe butoane de mai multe ori.

Trecând la slidewrapper, de ce poziție:relativă și nu absolută? Totul este foarte simplu, pentru că... dacă alegem a doua opțiune, atunci cu viewport overflow:proprietatea ascunsă, nu ne va apărea absolut nimic, deoarece fereastra în sine nu se va ajusta la înălțimea slidewrapper-ului, motiv pentru care va avea înălțime:0 . De ce contează lățimea și de ce o setăm deloc? Ideea este că diapozitivele noastre vor avea o lățime egală cu 100% din fereastra de vizualizare, iar pentru a le alinia avem nevoie de un loc unde vor sta, așa că lățimea slidewrapper-ului ar trebui să fie egală cu 100% din lățimea ferestrei de vizualizare. înmulțit cu numărul de diapozitive (în cazul meu, 4). În ceea ce privește tranziția și funcția de sincronizare a tranziției, aici 1s înseamnă că schimbarea poziției slidewrapper-ului va avea loc în decurs de 1 secundă și o vom observa, iar ease-in-out este un tip de animație în care mai întâi merge încet și accelerează până la mijloc și apoi încetinește din nou, aici puteți seta valorile la discreția dvs.

Următorul bloc de proprietăți setează slidewrapper-ul și copiii săi să aibă zero padding, fără comentarii necesare aici.

Apoi, ne stilăm diapozitivele, lățimea lor ar trebui să fie egală cu lățimea ferestrei de vizualizare, dar deoarece... sunt într-un slidewrapper a cărui lățime este egală cu lățimea ferestrei de vizualizare înmulțită cu numărul de diapozitive, apoi pentru a obține din nou lățimea ferestrei de vizualizare, trebuie să împărțim 100% din lățimea slidewrapperului la numărul de diapozitive (în cazul meu, din nou, prin 4). Apoi le transformăm în elemente inline folosind display:inline și setați float la stânga adăugând proprietatea float:left. Despre list-style:none pot spune că îl folosesc pentru a elimina markerul implicit din li , în cele mai multe cazuri este un fel de standard.

Cu slide-img totul este simplu, imaginea va ocupa toată lățimea diapozitivului, slide-ul se va ajusta la înălțimea sa, slidewrapper se va ajusta la înălțimea diapozitivului, iar înălțimea ferestrei de vizualizare va lua la rândul său valoarea înălțimii. de slidewrapper , deci înălțimea sliderului nostru va depinde de proporțiile imaginii și de dimensiunea blocului , prevăzut pentru slider, despre care am scris deja mai sus.

Cred că în acest moment ne-am dat seama de stiluri, haideți să facem o expunere de diapozitive simplă, fără butoane, și după ce ne asigurăm că funcționează corect, le vom adăuga și le vom stila.

Să deschidem fișierul nostru js, care va conține codul slider, nu uitați să conectați jQuery, deoarece Vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc jQuery versiunea 3.1.0. Fișierul cu scriptul în sine trebuie inclus la sfârșit eticheta corporală, deoarece vom lucra cu elemente DOM care trebuie inițializate mai întâi.

Deocamdată, trebuie să declarăm câteva variabile, una va stoca numărul diapozitivului pe care îl vedem la un moment dat în fereastra de vizualizare, l-am numit slideNow, iar a doua va stoca numărul acestor diapozitive, acesta este slideCount.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Variabila slideNow trebuie setată valoarea initiala 1, pentru că Când pagina se încarcă, pe baza markupului nostru, vom vedea primul diapozitiv în fereastra de vizualizare.

În slideCount vom plasa cantitatea elemente copil slidewrapper, totul este logic aici.
Apoi, trebuie să creați o funcție care va fi responsabilă pentru comutarea diapozitivelor de la dreapta la stânga, să o declarăm:

funcția nextSlide() ( )

Îl vom numi în blocul principal al codului nostru, la care vom ajunge mai târziu, dar deocamdată vom spune funcției noastre ce trebuie să facă:

funcția nextSlide() ( dacă (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )

În primul rând, verificăm dacă ne aflăm în prezent pe ultimul slide al feedului nostru? Pentru a face acest lucru, luăm numărul tuturor diapozitivelor noastre folosind $("#slidewrapper").children().length și îl verificăm cu numărul diapozitivului nostru, dacă acestea sunt egale, atunci aceasta înseamnă că trebuie să începem să arătăm feed-ul din nou, de la 1 slide , ceea ce înseamnă că schimbăm proprietatea de transformare CSS a slidewrapper-ului pentru a translate(0, 0) , mutându-l astfel la poziția inițială astfel încât primul diapozitiv să fie în câmpul nostru vizual, să nu uităm nici de –webkit și –ms pentru afișare adecvată între browsere (consultați cartea de referință despre proprietățile css). După aceasta, nu uitați să actualizați valoarea variabilei slideNow, spunându-i că diapozitivul numărul 1 este afișat: slideNow = 1;

Aceeași condiție include verificarea ca numărul diapozitivei pe care îl vedem să se încadreze în numărul diapozitivelor noastre, dar dacă cumva acest lucru nu este îndeplinit, atunci vom reveni din nou la primul diapozitiv.

Dacă prima condiție nu este îndeplinită, atunci aceasta indică faptul că suntem acest moment Nu suntem nici pe ultimul diapozitiv, nici pe unul inexistent, ceea ce înseamnă că trebuie să trecem la următorul, vom face acest lucru deplasând slidewrapper-ul la stânga cu o valoare egală cu lățimea ferestrei de vizualizare, deplasarea va fi din nou. apar prin proprietatea familiară translate, a cărei valoare va fi egală cu „translate(” + translateWidth + „px, 0)” , unde translateWidth este distanța cu care este deplasat slidewrapper-ul nostru. Apropo, să declarăm această variabilă la începutul codului nostru:

var translateWidth = 0;

După ce trecem la următorul diapozitiv, să spunem slideNow nostru că vedem următorul diapozitiv: slideNow++;

În acest moment, unii cititori s-ar putea să se întrebe: de ce nu am înlocuit $("#viewport").width() cu o variabilă precum slideWidth pentru a avea întotdeauna la îndemână lățimea diapozitivului nostru? Răspunsul este foarte simplu, dacă site-ul nostru este adaptiv, atunci, în consecință, blocul alocat pentru glisor este și adaptiv, pe baza acestui lucru putem înțelege că atunci când redimensionăm lățimea ferestrei fără a reîncărca pagina (de exemplu, pornirea telefonului partea sa), lățimea ferestrei de vizualizare se va modifica și, în consecință, lățimea unui diapozitiv se va modifica. În acest caz, slidewrapper-ul nostru va fi mutat la valoarea lățimii care a fost inițial, ceea ce înseamnă că imaginile vor fi afișate în părți sau nu vor fi afișate deloc în fereastra de vizualizare. Scriind $("#viewport").width() în loc de slideWidth în funcția noastră, îl forțăm să calculeze lățimea ferestrei de vizualizare de fiecare dată când comutăm diapozitive, asigurându-ne astfel că atunci când lățimea ecranului se schimbă brusc, acesta va derula la toboganul de care avem nevoie.

Totuși, am scris o funcție, acum trebuie să o apelăm după un anumit interval de timp, putem stoca și intervalul într-o variabilă, astfel încât dacă vrem să o modificăm, să putem schimba doar o singură valoare din cod:

var slideInterval = 2000;

Timpul în js este indicat în milisecunde.

Acum să scriem următoarea construcție:

$(document).ready(funcție () ( setInterval(nextSlide, slideInterval); ));

Totul nu poate fi mai simplu aici; prin construcția $(document).ready(funcție () ()) spunem că următoarele acțiuni trebuie făcută după sarcina completa document. Apoi, apelăm pur și simplu funcția nextSlide cu un interval egal cu slideInterval folosind funcția încorporată setInterval.

După toate acțiunile pe care le-am efectuat mai sus, glisorul nostru ar trebui să se rotească perfect, dar dacă ceva nu merge bine pentru tine, atunci problema poate fi fie versiuni jQuery, fie în conexiune incorectă orice fișiere. De asemenea, nu este necesar să excludeți faptul că ați fi putut face o eroare undeva în cod, așa că vă pot sfătui doar să verificați totul.

Între timp, să mergem mai departe, să adăugăm la glisorul nostru o funcție cum ar fi oprirea derulării când trecem cursorul. Pentru a face acest lucru, trebuie să scriem următorul lucru în blocul principal de cod (în interiorul $(document). funcția () ()) structură:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Pentru a începe să analizăm acest cod, trebuie să știm ce este switchInterval. În primul rând, aceasta este o variabilă care stochează apelul periodic la funcția nextSlide, pur și simplu, avem această linie de cod: setInterval(nextSlide, slideInterval); , transformat în acesta: switchInterval = setInterval(nextSlide, slideInterval); . După aceste manipulări, blocul nostru principal de cod a luat următoarea formă:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval); ( nextSlide, slideInterval); )); ));

Aici folosesc evenimentul hover, care înseamnă „la hover”, acest eveniment îmi permite să urmăresc momentul în care trec cursorul peste un obiect, în acest caz fereastra de vizualizare.

După trecerea cu mouse-ul, șterg intervalul, pe care îl indică în paranteze (acesta este switchInterval-ul nostru), apoi, despărțit prin virgule, scriu ce voi face când voi muta cursorul înapoi, în acest bloc atribuim din nou switchInterval-ul nostru unui periodic. apelați la funcția nextSlide.

Acum, dacă testăm, putem vedea cum reacționează cursorul nostru la hover, oprind comutarea slide-ului.

Acum este timpul să adăugați butoane la glisorul nostru, să începem cu butoanele înainte și înapoi.

În primul rând, să le marchem:

La început acest marcaj poate fi de neînțeles, o să spun imediat că am împachetat aceste două butoane într-un singur div cu clasa prev-next-btns doar pentru comoditatea ta, nu trebuie să faci asta, rezultatul nu se va schimba, acum noi' Le voi adăuga stiluri și totul va deveni clar:

#prev-btn, #next-btn ( poziție: absolut; lățime: 50px; înălțime: 50px; culoarea fundalului: #fff; raza chenarului: 50%; sus: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover (cursor: pointer; ) #prev-btn (stânga: 20px; ) #next-btn (dreapta: 20px; )

În primul rând, ne poziționăm butoanele utilizând position:absolute , controlând astfel liber poziția lor în fereastra noastră de vizualizare , apoi vom indica dimensiunile acestor butoane și folosind bord-raza Să rotunjim colțurile astfel încât aceste butoane să se transforme în cercuri. Culoarea lor va fi albă, adică #fff , iar decalajul lor față de marginea superioară a ferestrei de vizualizare va fi egal cu jumătate din înălțimea acestei ferestre minus jumătate din înălțimea butonului în sine (în cazul meu 25px), astfel încât să putem poziționați-le vertical în centru. Apoi, vom specifica că atunci când trecem cu mouse-ul peste ele, cursorul nostru se va schimba într-un indicator și, în final, vom spune butoanelor noastre individual că ar trebui să fie la 20 de pixeli distanță de marginile lor, astfel încât să le putem vedea într-un mod care ni se potrivește. .

Din nou, puteți stila elementele paginii așa cum doriți, vă dau doar un exemplu al stilurilor pe care am decis să le folosesc.

După coafare, glisorul nostru ar trebui să arate cam așa:

Apoi, mergeți din nou la fișierul nostru js, unde vom descrie funcționarea butoanelor noastre. Ei bine, să adăugăm încă o funcție, ne va arăta diapozitivul anterior:

funcția prevSlide() ( dacă (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ) )

Se numește prevSlide și va fi apelat doar când se face clic pe prev-btn. Mai întâi verificăm dacă suntem sau nu pe primul diapozitiv, aici verificăm și dacă slideNow a depășit raza reală a diapozitivelor noastre și, dacă vreuna dintre condiții este adevărată, vom trece la ultimul diapozitiv, mutând slidewrapper-ul. la valoarea de care avem nevoie. Vom calcula această valoare folosind formula: (lățimea unui diapozitiv) * (numărul de diapozitive - 1), luăm toate acestea cu semnul minus, deoarece o mutam la stanga, rezulta ca vizorul ne va arata acum ultimul slide. La sfârșitul acestui bloc, trebuie să spunem variabilei slideNow că ultimul diapozitiv este acum în viziunea noastră.

Dacă nu ne aflăm pe primul diapozitiv, atunci trebuie să ne întoarcem 1, pentru aceasta schimbăm din nou proprietatea de transformare a slidewrapper . Formula este: (lățimea unui diapozitiv) * (numărul diapozitivului curent - 2), din nou, luăm toate acestea cu semnul minus. Dar de ce -2, și nu -1, trebuie să mutăm doar 1 diapozitiv înapoi? Cert este că, dacă ne aflăm, să zicem, pe al 2-lea diapozitiv, atunci variabila x a proprietății transform:translate(x,0) a slidewrapper-ului nostru este deja egală cu lățimea unui diapozitiv, dacă îi spunem că avem nevoie pentru a scădea 1 din numărul slide-ului curent , apoi vom obține din nou unul, prin care slidewrapper-ul a fost deja deplasat, așa că va trebui să deplasăm aceleași lățimi ale ferestrei de vizualizare cu 0, ceea ce înseamnă pe slideNow - 2.

Acum trebuie doar să adăugăm aceste linii la blocul principal de cod:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Aici pur și simplu urmărim dacă butoanele noastre au fost apăsate, iar în acest caz numim funcțiile de care avem nevoie, totul este simplu și logic.

Acum să adăugăm butoanele de navigare din slide și să revenim din nou la marcaj:

După cum puteți vedea, în fereastra de vizualizare a apărut o listă imbricată, să-i dăm identificatorul nav-btns , în interiorul ei sunt butoanele noastre de navigare, le vom atribui clasa slide-nav-btn , cu toate acestea, putem termina cu marcajul, să trecem la stiluri:

#nav-btns ( poziție: absolut; lățime: 100%; jos: 20px; umplutură: 0; margine: 0; text-align: center; ) .slide-nav-btn ( poziție: relativă; afișare: inline-btn; stil listă: niciunul; lățime: 20px; înălțime: 20px; culoarea fundalului: #fff; raza chenarului: 50%; margine: 3px; ) .slide-nav-btn:hover (cursor: pointer; )

Dăm blocului nav-btns, în care se află butoanele noastre, poziția proprietății:absolute pentru a nu întinde fereastra în înălțime, deoarece slidewrapper are proprietatea position:relative, am setat lățimea la 100% pentru a centra butoanele pe orizontală în raport cu fereastra folosind text-align:center , apoi folosind proprietatea de jos, anunțăm blocul nostru că ar trebui să fie la distanță de 20px de la marginea de jos.

Cu butoanele facem același lucru ca și cu slide-urile, dar acum le dăm display:inline-block , deoarece cu display:inline nu răspund la lățime și înălțime deoarece sunt într-un bloc poziționat absolut. Să le facem albe și, folosind raza-chenar deja familiară, să le dăm forma unui cerc. Când trecem cu mouse-ul peste ele, vom schimba aspectul cursorului nostru pentru afișarea obișnuită.

Acum să trecem la partea jQuery:
Mai întâi, să declarăm o variabilă navBtnId, care va stoca indexul butonului pe care l-am făcut clic:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ));

Aici, când facem clic pe slide-nav-btn-ul nostru, numim o funcție care atribuie în primul rând variabilei navBtnId indexul butonului apăsat, adică numărul de serie al acestuia, deoarece numărătoarea inversă începe de la zero, atunci dacă vom facem clic pe al doilea buton, apoi se scrie în navBtnId valoarea 1. În continuare, facem o verificare în care adăugăm unul la numărul de serie al butonului pentru a obține un număr ca și cum numărătoarea inversă a început nu de la 0, ci de la 1, comparați acest număr cu numărul diapozitivului curent, dacă se potrivesc, atunci nu vom întreprinde nicio acțiune, deoarece diapozitivul dorit este deja în fereastra de vizualizare.

Dacă diapozitivul de care avem nevoie nu se află în câmpul vizual al ferestrei de vizualizare, atunci calculăm distanța cu care trebuie să mutăm slidewrapper-ul la stânga, apoi modificăm valoarea proprietății de transformare CSS pentru a traduce (aceeași distanță în pixeli, 0). ). Am făcut deja acest lucru de mai multe ori, așa că nu ar trebui să existe întrebări. La sfârșit, salvăm din nou valoarea slide-ului curent în variabila slideNow; această valoare poate fi calculată adăugând una la indexul butonului apăsat.

Asta e tot, de fapt, dacă ceva nu este clar, atunci voi lăsa un link către jsfiddle, unde va fi furnizat tot codul scris în material.

Vă mulțumim pentru atenție!

Etichete: Adăugați etichete

1. Excelent prezentare jQuery

O prezentare mare, spectaculoasă, folosind tehnologii jQuery.

2. Pluginul jQuery „Scale Carusel”

Prezentare scalabilă folosind jQuery. Puteți seta dimensiunile de prezentare de diapozitive care vi se potrivesc cel mai bine.

3. Pluginul jQuery „slideJS”

Glisor de imagine cu descriere text.

4. Plugin „JSliderNews”

5. Slider CSS3 jQuery

Când treceți cu mouse-ul peste săgețile de navigare, apare o miniatură circulară a următorului diapozitiv.

6. Frumos jQuery Slider Cycle de prezentare

Slider jQuery cu indicator de încărcare a imaginii. Este prevăzută schimbarea automată a diapozitivelor.

7. Pluginul jQuery „Parallax Slider”

Glisor cu efect volumetric de fundal. Punctul culminant al acestui glisor este mișcarea fundalului, care constă din mai multe straturi, fiecare derulând cu la viteze diferite. Rezultatul este o imitație a efectului volumetric. Arată foarte frumos, poți să vezi singur. Efectul este afișat mai ușor în browsere precum Opera, Google Chrome,IE.

8. Glisor jQuery proaspăt, ușor „bxSlider 3.0”

Pe pagina demo din secțiunea „exemple” puteți găsi link-uri către toate opțiuni posibile folosind acest plugin.

9. Slider imagine jQuery, plugin „slideJS”.

Un slider jQuery elegant vă poate decora cu siguranță proiectul.

10. Plugin de prezentare jQuery " Slides ușoare» v1.1

Usor de folosind JQuery plugin pentru crearea de diapozitive.

11. Plugin jQuery Slidy

Plugin jQuery ușor în diferite versiuni. Este prevăzută schimbarea automată a diapozitivelor.

12. jQuery CSS galerie cu schimbare automată a diapozitivelor

Dacă vizitatorul nu face clic pe săgețile „Înainte” sau „Înapoi” într-un anumit timp, galeria va începe să deruleze automat.

13. Slider jQuery „Nivo Slider”

Plugin foarte profesional, de înaltă calitate, ușor, cu cod valid. Există multe efecte diferite de tranziție de diapozitive disponibile.

14. Slider jQuery „MobilySlider”

Glisor proaspăt. Slider jQuery cu diverse efecte de schimbare a imaginii.

15. Pluginul jQuery „Slider²”

Glisor ușor cu schimbător automat de diapozitive.

16. Slider javascript proaspăt

Glisor cu schimbare automată a imaginii.

Plugin pentru implementarea prezentărilor de diapozitive cu schimbare automată a diapozitivelor. Este posibil să controlați afișajul folosind miniaturile imaginilor.

jQuery Glisor CSS imagini folosind pluginul NivoSlider.

19. Slider jQuery „jShowOff”

Plugin pentru rotația conținutului. Trei variante de utilizare: fără navigare (cu schimbare automată în format slide show), cu navigare sub formă de butoane, cu navigare sub formă de miniaturi de imagine.

20. Plugin „Shutter Effect Portfolio”.

Plugin jQuery proaspăt pentru proiectarea portofoliului unui fotograf. Implementat în galerie efect interesant schimbarea imaginilor. Fotografiile se succed cu un efect asemănător cu operarea unui obturator pentru obiectiv.

21. Lumină javascript css glisor „TinySlider 2”

Implementarea unui slider de imagine cu folosind javascriptși CSS.

22. Glisor minunat „Tinycircleslider”

Glisor rotund elegant. Tranziția între imagini se realizează prin tragerea cursorului sub forma unui cerc roșu în jurul circumferinței. Se va potrivi perfect în site-ul dvs. dacă utilizați elemente rotunde în design.

23. Glisor de imagine cu jQuery

Glisor ușor „Kit glisor”. Glisorul este disponibil în diferite modele: vertical și orizontal. De asemenea implementat tipuri diferite navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind mouse-ul clic pe slide.

24. Galerie cu miniaturi „Kit Slider”

Galeria „Kit Slider”. Derularea miniaturilor se realizează atât pe verticală, cât și pe orizontală. Tranziția între imagini se realizează folosind: rotița mouse-ului, clicul mouse-ului sau trecând cursorul peste miniatură.

25. Slider de conținut jQuery „Kit Slider”

Verticală și glisor orizontal Conținut jQuery.

26. Expunere de diapozitive jQuery „Kit Slider”

Prezentare de diapozitive cu schimbare automată a diapozitivelor.

27. Lumină javascript profesional Glisor CSS3

Un slider jQuery și CSS3 îngrijit creat în 2011.

Prezentare jQuery cu miniaturi.

29. Prezentare jQuery simplă

Prezentare de diapozitive cu butoane de navigare.

30. Prezentare minunată jQuery „Skitter”.

Plugin jQuery Skitter pentru a crea prezentări de diapozitive uimitoare. Pluginul acceptă 22 (!) tipuri diferite efecte de animație la schimbarea imaginilor. Poate lucra cu două opțiuni de navigare în diapozitive: folosind numerele de diapozitive și folosind miniaturi. Asigurați-vă că urmăriți demonstrația, o descoperire de foarte bună calitate. Tehnologii utilizate: CSS, HTML, jQuery, PHP.

31. Prezentare de diapozitive „Incomod”

Prezentare funcțională de diapozitive. Slide-urile pot fi: imagini simple, imagini cu legendă, imagini cu tooltips, videoclipuri. Puteți folosi săgețile, linkurile cu numerele diapozitivelor și tastele stânga/dreapta de pe tastatură pentru a naviga. Prezentarea de diapozitive vine în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo #1 - Demo #6 situate în partea de sus a paginii demo.

Foarte design original glisor de imagine care seamănă cu un ventilator. Tranziție animată de diapozitive. Navigarea între imagini se realizează cu ajutorul săgeților. Există, de asemenea, o schimbare automată care poate fi activată și dezactivată folosind butonul Redare/Pauză situat în partea de sus.

Glisor animat jQuery. Imagini de fundal scala automat atunci când fereastra browserului este redimensionată. Pentru fiecare imagine apare un bloc cu o descriere.

34. Slider „Flux Slider” folosind jQuery și CSS3

Slider nou jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

35. Plugin jQuery „jSwitch”

Galerie animată jQuery.

O prezentare de diapozitive jQuery simplă cu schimbare automată a diapozitivelor.

37. O noua versiune plugin „SlideDeck 1.2.2”

Glisor de conținut profesional. Există opțiuni cu schimbare automată a diapozitivelor, precum și o opțiune care utilizează rotița mouse-ului pentru a vă deplasa între diapozitive.

38. Slider jQuery „Sudo Slider”

Glisor de imagine ușor folosind jQuery. Există o mulțime de opțiuni de implementare: schimbarea orizontală și verticală a imaginilor, cu și fără link-uri către numărul de diapozitive, cu și fără legende de imagine, diferite efecte de schimbare a imaginii. Există o funcție schimbare automată diapozitive. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demo.

39. jQuery CSS3 slideshow

Prezentarea de diapozitive cu miniaturi acceptă modul de schimbare automată a diapozitivelor.

40. Slider jQuery „Flux Slider”

Glisor cu multe efecte de schimbare a imaginii.

41. Glisor jQuery simplu

Glisor de imagine elegant folosind jQuery.

42. „Craftyslide” jQuery slideshow

43. Ecran complet jQuery slideshow

Prezentare jQuery HTML5 care se întinde pe toată lățimea ecranului cu sunet.

O simplă prezentare de diapozitive jQuery.

Acum hai sa scriem! Mai întâi de toate, să deschidem fișierul nostru index și să scriem acolo markupul de care avem nevoie:

Următorul bloc de proprietăți setează slidewrapper-ul și copiii săi să aibă zero padding, fără comentarii necesare aici.

Apoi, ne stilăm diapozitivele, lățimea lor ar trebui să fie egală cu lățimea ferestrei de vizualizare, dar deoarece... sunt într-un slidewrapper a cărui lățime este egală cu lățimea ferestrei de vizualizare înmulțită cu numărul de diapozitive, apoi pentru a obține din nou lățimea ferestrei de vizualizare, trebuie să împărțim 100% din lățimea slidewrapperului la numărul de diapozitive (în cazul meu, din nou, prin 4). Apoi le vom transforma în elemente inline folosind display:inline și vom seta float la stânga adăugând proprietatea float:left. Despre list-style:none pot spune că îl folosesc pentru a elimina markerul implicit din li , în cele mai multe cazuri este un fel de standard.

Să deschidem fișierul nostru js, care va conține codul slider, nu uitați să conectați jQuery, deoarece Vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc jQuery versiunea 3.1.0. Fișierul cu scriptul în sine trebuie inclus la sfârșitul etichetei body, deoarece vom lucra cu elemente DOM care trebuie inițializate mai întâi.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Variabila slideNow trebuie setată la o valoare inițială de 1 deoarece Când pagina se încarcă, pe baza markupului nostru, vom vedea primul diapozitiv în fereastra de vizualizare.

În slideCount vom plasa numărul de elemente copil ale slidewrapper-ului, totul este logic aici.
Apoi, trebuie să creați o funcție care va fi responsabilă pentru comutarea diapozitivelor de la dreapta la stânga, să o declarăm:

funcția nextSlide() ( )

Îl vom numi în blocul principal al codului nostru, la care vom ajunge mai târziu, dar deocamdată vom spune funcției noastre ce trebuie să facă:

În primul rând, verificăm dacă ne aflăm în prezent pe ultimul slide al feedului nostru? Pentru a face acest lucru, luăm numărul tuturor diapozitivelor noastre folosind $("#slidewrapper").children().length și îl verificăm cu numărul diapozitivului nostru, dacă acestea sunt egale, atunci aceasta înseamnă că trebuie să începem să arătăm feed-ul din nou, de la 1 slide , ceea ce înseamnă că schimbăm proprietatea de transformare CSS a slidewrapper-ului la translate(0, 0) , mutându-l astfel în poziția inițială, astfel încât primul diapozitiv să fie în câmpul nostru vizual, să nu uităm de asemenea despre –webkit și –ms pentru afișare adecvată între browsere (consultați referința proprietăților .css). După aceasta, nu uitați să actualizați valoarea variabilei slideNow, spunându-i că diapozitivul numărul 1 este afișat: slideNow = 1;

Dacă prima condiție nu este îndeplinită, înseamnă că în prezent nu suntem nici pe ultimul diapozitiv, nici pe unul inexistent, ceea ce înseamnă că trebuie să trecem la următorul, vom face acest lucru deplasând slidewrapper-ul la stânga. cu valoarea egală cu lățimea ferestrei de vizualizare, deplasarea va avea loc din nou prin proprietatea translate familiară, a cărei valoare va fi egală cu „translate(” + translateWidth + „px, 0)” , unde translateWidth este distanța la care slidewrapper este deplasat. Apropo, să declarăm această variabilă la începutul codului nostru:

var translateWidth = 0;

După ce trecem la următorul diapozitiv, să spunem slideNow nostru că vedem următorul diapozitiv: slideNow++;

var slideInterval = 2000;

Timpul în js este indicat în milisecunde.

Acum să scriem următoarea construcție:

$(document).ready(funcție () ( setInterval(nextSlide, slideInterval); ));

Totul nu poate fi mai simplu aici; prin construcția $(document).ready(function () ()) spunem că următoarele acțiuni trebuie efectuate după ce documentul a fost încărcat complet. Apoi, apelăm pur și simplu funcția nextSlide cu un interval egal cu slideInterval folosind funcția încorporată setInterval.

După toți pașii pe care i-am efectuat mai sus, glisorul nostru ar trebui să se rotească perfect, dar dacă ceva nu merge bine, atunci problema poate fi fie în versiunea jQuery, fie în conexiunea incorectă a oricăror fișiere. De asemenea, nu este necesar să excludeți faptul că ați fi putut face o eroare undeva în cod, așa că vă pot sfătui doar să verificați totul.

Între timp, să mergem mai departe, să adăugăm la glisorul nostru o funcție cum ar fi oprirea derulării când trecem cursorul. Pentru a face acest lucru, trebuie să scriem următorul lucru în blocul principal de cod (în interiorul $(document). funcția () ()) structură:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Aici folosesc evenimentul hover, care înseamnă „la hover”, acest eveniment îmi permite să urmăresc momentul în care trec cursorul peste un obiect, în acest caz fereastra de vizualizare.

Acum, dacă testăm, putem vedea cum reacționează cursorul nostru la hover, oprind comutarea slide-ului.

Acum este timpul să adăugați butoane la glisorul nostru, să începem cu butoanele înainte și înapoi.

În primul rând, să le marchem:

La început, acest marcaj poate fi de neînțeles, voi spune imediat că am împachetat aceste două butoane într-un singur div cu clasa prev-next-btns doar pentru confortul dvs., nu trebuie să faceți acest lucru, rezultatul nu va schimbați, acum le vom adăuga stiluri și totul va fi bine. Este clar:

Mai întâi, ne poziționăm butoanele utilizând position:absolute, controlând astfel liber poziția lor în fereastra noastră de vizualizare, apoi vom specifica dimensiunile acestor butoane și vom folosi raza de margine pentru a rotunji colțurile, astfel încât aceste butoane să se transforme în cercuri. Culoarea lor va fi albă, adică #fff , iar decalajul lor față de marginea superioară a ferestrei de vizualizare va fi egal cu jumătate din înălțimea acestei ferestre minus jumătate din înălțimea butonului în sine (în cazul meu 25px), astfel încât să putem poziționați-le vertical în centru. Apoi, vom specifica că atunci când trecem cu mouse-ul peste ele, cursorul nostru se va schimba într-un indicator și, în final, vom spune butoanelor noastre individual că ar trebui să fie la 20 de pixeli distanță de marginile lor, astfel încât să le putem vedea într-un mod care ni se potrivește. .

Din nou, puteți stila elementele paginii așa cum doriți, vă dau doar un exemplu al stilurilor pe care am decis să le folosesc.

Acum trebuie doar să adăugăm aceste linii la blocul principal de cod:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Aici pur și simplu urmărim dacă butoanele noastre au fost apăsate, iar în acest caz numim funcțiile de care avem nevoie, totul este simplu și logic.

Acum să adăugăm butoanele de navigare din slide și să revenim din nou la marcaj:

Acum să trecem la partea jQuery:
Mai întâi, să declarăm o variabilă navBtnId, care va stoca indexul butonului pe care l-am făcut clic:

Asta e tot, de fapt, dacă ceva nu este clar, atunci voi lăsa un link către jsfiddle, unde va fi furnizat tot codul scris în material.

Vă mulțumim pentru atenție!

Etichete:

glisorul jquery
css
animație css3
html

Adaugă etichete