Slider cu schimbare verticală jquery. Un glisor jQuery simplu cu documentație tehnică. Slider jQuery frumos „Ciclul de prezentare”
Adaptiv, sau dacă vrei, design web responsiveÎn zilele noastre nu este doar o altă tendință de design, este deja un anumit standard pentru dezvoltarea site-urilor web, asigurând versatilitatea site-urilor web și percepția vizuală armonioasă pe ecranele diverselor dispozitive ale utilizatorilor. Mai recent, în timpul dezvoltării șablon adaptiv, a trebuit să întâmpin diverse dificultăți în integrarea anumitor glisoare și galerii de imagini fără a deranja stilul general de design. În zilele noastre totul este mult mai simplu, există un număr mare de soluții gata făcute pe Internet și ceea ce este deosebit de plăcut este că majoritatea sunt disponibile gratuit, open source.
Datorită varietatii de instrumente oferite, am compilat scurtă recenzie cele mai notabile dezvoltări ale glisoarelor de imagine adaptive jQuery care au apărut recent și sunt distribuite fără restricții, adică. absolut gratuit.
WOW Slider
Glisor de imagine jQuery receptiv cu un set grozav efecte vizuale(turnări, surplombi, estompări, spirale, jaluzele etc...) și multe șabloane gata făcute. Cu ajutorul asistentului de inserare a paginii încorporat din WOW Slider, puteți crea cu ușurință și fără efort prezentări de diapozitive uimitoare în câteva minute. Site-ul web al dezvoltatorului conține toată documentația necesară pentru configurarea și utilizarea pluginului în limba rusă, precum și exemple live excelente despre cum funcționează pluginul. Disponibil și pentru descărcare separat Plugin Wordpressși un modul pentru Joomla. Sunt sigur că multora le va plăcea acest slider minunat, atât începătorilor, cât și webmasterilor experimentați.
HiSlider
HiSlider - HTML5, slider Jquery și galerie de imagini, absolut plugin gratuit pentru uz personal pe site-uri care rulează sisteme populare - WordPress, Joomla, Drupal. Cu ajutorul acestui instrument simplu, dar destul de funcțional, puteți crea cu ușurință prezentări de diapozitive uimitoare și vibrante, prezentări spectaculoase și anunțuri de mesaje noi pe paginile site-urilor dvs. web. Mai multe șabloane și skin-uri gata făcute pentru glisor, efecte uimitoare de tranziție a conținutului, rezultate diferite continut multimedia: , videoclipuri de pe YouTube și Vimeo, flexibile setari personalizate etc...
Nivo Slider
Nivo Slider este unul vechi bun, bine cunoscut de toți cei cunoscători, unul dintre cele mai frumoase și ușor de utilizat glisoare de imagine. Pluginul JQuery Nivo Slider poate fi descărcat și utilizat gratuit și este licențiat sub licența MIT. Există și un plugin separat pentru WordPress, dar, din păcate, este deja plătit și va trebui să plătiți 29 USD pentru o licență. Este mai bine să faceți puțină magie cu fișierele cu tema WP și să atașați versiunea jQuery gratuită a pluginului Nivo Slider pe blogul dvs., deoarece există o mulțime de informații despre cum să faceți acest lucru pe Internet.
În ceea ce privește funcționalitatea, totul este în regulă. Biblioteca jQuery v1.7+ este folosită pentru lucru, efecte frumoase tranziții, simple și foarte setări flexibile, aspect adaptiv, decuparea automată a imaginii și multe altele.
Ideea slider-ului a fost inspirată de dezvoltatori, care sunt bine cunoscuți pentru stilul lor de prezentare Produse Apple, unde mai multe obiecte mici (imagini) se schimbă făcând clic pe categoria selectată cu un simplu efect de animație. Codrops vă prezintă la dispoziția dumneavoastră un tutorial detaliat despre cum să creați acest glisor, un aspect complet al marcajului HTML, un set de reguli CSS și un plugin jQuery executabil, precum și un minunat exemplu live de utilizare a glisorului.
Slider cu fantă
Glisor de imagine pe ecran complet folosind JQuery și CSS3 + tutorial detaliat despre integrarea pluginului în paginile site-ului. Ideea este să tăiați diapozitivul curent deschis cu conținut specific atunci când treceți la conținutul următor sau anterior. CU folosind JQueryși animații CSS puteți crea tranziții unice între diapozitive. Aspectul glisorului receptiv asigură că arată la fel de bine pe ecrane tipuri variate dispozitivele utilizatorului.
Glisor de conținut elastic
Un glisor de conținut care se ajustează automat în lățime și înălțime în funcție de dimensiunea containerului părinte în care se află. Destul de simplu de implementat și flexibil în setări, glisorul rulează pe JQuery, cu navigarea în jos când dimensiunea ecranului este schimbată în jos, navigarea este afișată sub formă de pictograme; Documentație foarte detaliată (tutorial de creare) și exemple live de utilizare.
Glisor stivă 3D
O versiune experimentală a glisorului care demonstrează imagini cu tranziții din planul 3D. Imaginile sunt împărțite în două stive orizontale, folosind săgețile de navigare pentru a schimba și trece fiecare imagine ulterioară în starea de vizualizare. În general, nimic deosebit, dar ideea în sine și tehnica de execuție sunt destul de interesante.
Foarte simplu, 100% receptiv și jQuery pe ecran complet glisor de imagine. Funcționarea cursorului se bazează pe tranziții CSS (proprietatea de tranziție) împreună cu magia jQuery. Valoarea lățimii maxime este setată la 100% în mod implicit, astfel încât dimensiunea imaginilor se va schimba în funcție de modificările dimensiunii ecranului. Nu există efecte speciale de animație sau bibelouri în design, totul este simplu și conceput pentru o funcționare fără probleme.
Diapozitive minime
Numele vorbește de la sine, acesta este poate unul dintre cele mai ușoare și minimaliste glisoare de imagine jQuery pe care le-am întâlnit (plugin de 1 kb). ResponsiveSlides.js este un mic plugin jQuery care creează o prezentare de diapozitive folosind elemente din interiorul unui container. Funcționează cu o gamă largă de browsere, inclusiv toate versiunile de IE - faimoasa frână a progresului, de la IE6 și mai sus. Lucrarea folosește tranziții CSS3 împreună cu javascript pentru fiabilitate. Aspect simplu folosind o listă neordonată, personalizarea tranzițiilor și a intervalelor de timp, controlul automat și manual al comutării diapozitivelor, precum și suport pentru mai multe prezentări de diapozitive simultan. Acesta este un „bebeluș” atât de jucăuș.
aparat foto
Camera este un plugin JQuery gratuit pentru organizarea de prezentări de diapozitive pe paginile site-ului web, un glisor ușor cu multe efecte de tranziție, un aspect 100% receptiv și setări foarte simple. Se potrivește perfect pe ecranele oricărui dispozitiv utilizator (monitoare PC, tablete, smartphone-uri și Celulare). Posibilitatea de a demonstra video încorporat. Schimbarea automată a diapozitivelor și controlul manual cu ajutorul butoanelor și al blocului de miniaturi ale imaginii. O galerie aproape completă de imagini într-un design compact.
bxSlider jQuery
Un alt glisor destul de simplu receptiv în jQuery. Puteți plasa orice conținut, videoclip, imagini, text și alte elemente pe diapozitive. Suport extins ecrane tactile. Utilizarea animațiilor de tranziție CSS. Un număr mare de opțiuni de prezentare diferite pentru prezentări de diapozitive și galerii de imagini compacte. Control automat și manual. Comutați diapozitive folosind butoane și selectând miniaturile. Dimensiunea mică a fișierului sursă, foarte ușor de configurat și implementat.
FlexSlider 2
FlexSlider 2 Versiune actualizata glisor cu același nume, cu viteză de răspuns îmbunătățită, minimizarea scriptului și minimizarea reflow/redrawing. Pluginul include un glisor de bază, control de diapozitiv cu miniaturi, săgeți încorporate stânga-dreapta și o bară de navigare de jos sub formă de butoane. Abilitatea de a afișa videoclipuri în diapozitive (vimeo), setări flexibile (tranziții, design, interval de timp), aspect complet adaptabil.
Galleria
Un plugin jQuery responsiv bine cunoscut și destul de popular pentru crearea de galerii de imagini și slidere de înaltă calitate. Interfața slider, datorită panoului său de control, seamănă vizual cu un player video familiar, pluginul include mai multe subiecte diferiteînregistrare Suport pentru videoclipuri și imagini încorporate de la servicii populare: Flickr, Vimeo, YouTube și altele. Documentație detaliată despre configurare și utilizare.
Coacăze
Un glisor de imagine jQuery simplu, fără ornamente, scris special pentru design web responsive. Blueberry este un plugin experimental jQuery open source. Design minimalist, fără efecte, doar imagini pop-up fără probleme care se înlocuiesc între ele după o anumită perioadă de timp. Totul este foarte simplu, instalați, conectați și mergeți...
jQuery popeye 2.1
Un glisor de imagine jQuery foarte compact cu elemente Lightbox. Datorita dimensiunilor sale flexibile, este foarte usor de integrat in orice container, intr-o singura intrare sub forma de miniaturi, la trecerea cursorului mouse-ului sau la click pe ele, se activeaza un lightbox cu poza marita si comenzi. Este convenabil să plasați un astfel de glisor în panourile laterale pentru a prezenta produse sau anunțuri de știri. O soluție excelentă pentru site-urile cu volum mare informație.
Secvenţă
Glisor cu răspuns gratuit cu tranziții CSS3 avansate. Stil minimalist, 3 teme de design, Fiecare cadru alunecă orizontal, apărând în centru, imaginea merge la stânga, semnătura în dreapta, miniaturile sunt duplicate în colțul din dreapta jos. Paginarea vizualizărilor de produse pentru a fi vizualizate în fiecare cadru. Comenzile includ, de asemenea, butoane înapoi și înainte. Sprijin din partea tuturor browsere moderne.
Beţivan
Un slider de imagine foarte simplu atât din punct de vedere al funcționalității, cât și al setărilor se numără o modificare a vitezei de schimbare a diapozitivelor, activarea modului manual (butoanele de control sunt activate), prezentarea continuă; Acest slider are dreptul de a exista și m-a atras doar pentru că există nu am găsit nimic deosebit de interesant în această dezvoltare, poate nu l-am căutat bine)))
Slider de imagine receptivă
Un slider de imagine atât de frumos și adaptiv de la Vladimir Kudinov, tovarăși. Un instrument solid, bine conceput, prevăzut cu exemple clare și instrucțiuni detaliate privind crearea, instalarea și utilizarea. Design adaptiv, butoane drăguțe și săgeți verzi, totul este destul de frumos și calm, fără presiune.
FractionSlider
Plugin de glisare JQuery gratuit cu efect de paralaxă pentru imagini și diapozitive de text. Animația de diapozitive are mai multe valori de afișare cu control totalîn fiecare parametru de sincronizare și animație. Abilitatea de a anima mai multe elemente dintr-un diapozitiv simultan. Puteți seta diferite metode de animație, fade de diapozitive sau tranziții dintr-o anumită direcție. Afișare automată și control manual folosind săgețile de navigare care apar atunci când treceți cu mouse-ul peste imagine. 10 tipuri de efecte de animație de diapozitive și multe altele...
Recenzia s-a dovedit a fi destul de extins, dar nu suficient de informativ din cauza numărului mare de produse luate în considerare. Toate detaliile și descrieri detaliate funcţionalitate despre acest sau acel plugin, puteți afla direct pe paginile dezvoltatorilor. Nu pot decât să sper că am făcut mai ușor pentru cineva să găsească acel instrument foarte necesar pentru a crea glisoare de imagini colorate pe paginile site-urilor lor.
Cu tot respectul, Andrew
Timpul nu stă pe loc și odată cu el progresează. Acest lucru a afectat și internetul. Puteți vedea deja cum se schimbă aspect site-uri web, designul responsive este deosebit de popular. Și în acest sens, au apărut destul de multe noi jquery adaptiv glisoare, galerii, carusele sau pluginuri similare.
1. Slider pentru postări orizontale receptive
Carusel orizontal adaptiv cu instrucțiuni detaliate de instalare. A fost finalizat în stil simplu, dar îl poți aranja după tine.
2. Glisor pe Glide.js
Acest glisor este potrivit pentru orice site web. Utilizează Glide.js cu sursa deschisa. Culorile cursorului pot fi schimbate cu ușurință.
3. Prezentare de diapozitive de conținut înclinat
Glisor de conținut receptiv. Punctul culminant al acestui glisor este efectul 3D al imaginilor, precum și diferite animații cu aspect aleatoriu.
4. Glisor folosind pânza HTML5
Un glisor foarte frumos și impresionant cu particule interactive. A fost realizat folosind canvas HTML5,
5. Glisor pentru transformarea imaginii
Glisor cu efect morph ( Transformare lină de la un obiect la altul). ÎN în acest exemplu Glisorul este potrivit pentru portofoliul unui dezvoltator web sau al unui studio web sub forma unui portofoliu.
6. Glisor circular
Glisor sub formă de cerc cu efect de răsturnare a imaginii.
7. Glisor cu fundal neclar
Glisor adaptiv cu comutare și estompare de fundal.
8. Glisor de modă receptiv
Glisor pentru site-ul web simplu, ușor și receptiv.
9. Slicebox - glisor de imagine 3D jQuery(ACTUALIZAT)
Versiune actualizată a glisorului Slicebox cu remedieri și funcții noi.
10.Grilă de imagini responsive animate gratuite
Plugin JQuery pentru a crea o grilă flexibilă de imagini care va schimba fotografiile folosind diferite animații și timpi. Acest lucru poate arăta bine ca fundal sau element decorativ pe un site web, deoarece putem apărea selectiv noi imagini și tranzițiile lor. Pluginul vine în mai multe versiuni.
11. Glisor Flex
Un plugin universal gratuit pentru site-ul dvs. Acest plugin vine în mai multe opțiuni de glisare și carusel.
12. Rama foto
Fotorama este un plugin universal. Are multe setări, totul funcționează rapid și ușor și puteți vizualiza diapozitive pe tot ecranul. Glisorul poate fi folosit atât la dimensiune fixă, cât și adaptiv, cu sau fără miniaturi, cu sau fără derulare circulară și multe altele.
P.S.Am instalat glisorul de mai multe ori și cred că este unul dintre cele mai bune
13. Galerie de glisare 3D gratuită și adaptivă cu miniaturi.
Glisor pentru galerie experimentală 3DPanelLayout cu o grilă și efecte de animație interesante.
14. Slider folosind css3
Glisorul adaptiv este realizat folosind css3 cu aspect neted al conținutului și animație ușoară.
15. Slider WOW
WOW Slider este un glisor de imagine cu efecte vizuale uimitoare.
17. Elastic
Glisor elastic cu capacitate de răspuns completă și miniaturi de diapozitiv.
18. Slit
Acesta este un glisor receptiv pe ecran complet care utilizează animația CSS3. Glisorul este realizat în două versiuni. Animația este realizată destul de neobișnuit și frumos.
19. Galerie foto adaptivă plus
Un glisor simplu gratuit pentru galerie cu încărcare a imaginii.
20. Slider responsive pentru WordPress
Glisor gratuit adaptiv pentru WP.
21. Parallax Content Slider
Slider cu efect de paralaxă și control al fiecărui element folosind CSS3.
22. Glisor cu link muzical
Slider folosind codul sursă deschis JPlayer. Acest glisor seamănă cu o prezentare cu muzică.
23. Slider cu jmpress.js
Glisorul receptiv se bazează pe jmpress.js și, prin urmare, vă va permite să adăugați câteva efecte 3D interesante la diapozitive.
24. Prezentare rapidă de diapozitive
Prezentare de diapozitive cu comutare rapidă diapozitive. Comutator de diapozitive la hover.
25. Image Accordion cu CSS3
Imagine acordeon folosind css3.
26. Un plugin pentru galerie optimizat la atingere
Acest galerie receptivă care este optimizat pentru dispozitive tactile.
27. Galerie 3D
Galeria de perete 3D- creat pentru browser Safari, unde efectul 3D va fi vizibil. Dacă îl priviți pe alt browser, funcționalitatea va fi în regulă, dar efectul 3D nu va fi vizibil.
28. Slider cu paginare
Glisor receptiv cu paginare folosind glisorul JQuery UI. Ideea este de a folosi un concept simplu de navigare. Este posibil să derulați înapoi toate imaginile sau să comutați diapozitiv cu diapozitiv.
29.Montajul imaginii cu jQuery
Aranjați automat imaginile în funcție de lățimea ecranului. Un lucru foarte util atunci când dezvoltați un site web de portofoliu.
30. Galerie 3D
Un glisor circular simplu 3D folosind css3 și jQuery.
31. Modul ecran complet cu efect 3D folosind css3 și jQuery
Un glisor cu capacitatea de a vizualiza imagini pe tot ecranul cu o tranziție frumoasă.
Cu ceva timp în urmă, am început să învăț jQuery. Cred că toată lumea știe că acesta este numele celei mai populare biblioteci pentru dezvoltarea și crearea de scripturi în JavaScript. Cu ajutorul acestuia este foarte ușor să creezi elemente de site spectaculoase și interactive.
În acest articol, vreau să vă spun cum să creați un glisor universal simplu cu folosind jQuery. De fapt, pe Internet există un număr foarte mare de diferite slidere gata făcute, care uneori arată foarte tentante și sunt destul de funcționale, dar o vom face de la zero.
Deci, ce caracteristici ale glisorului nostru jQuery (pe care l-am numit HWSlider) pot fi remarcate?
- Ușurință în utilizare și design - am vrut să creez un script simplu, fără clopoței și fluiere, așa că nu am folosit animații CSS3, iar codul s-a dovedit a fi foarte versatil și ușor de înțeles.
- Posibilitatea de a insera atât imagini, cât și orice cod HTML în diapozitive.
- Posibilitatea de a derula diapozitive atât în ordine (înainte - înapoi) și de a selecta fiecare diapozitiv (1,2,3,4...)
- Link-uri generate automat (anterior - următor și cu numere de diapozitive). Trebuie doar să introduceți numărul necesar de div-uri și totul va fi calculat de la sine. Ei bine, se poate observa că numărul de diapozitive este nelimitat.
Scriptul este compatibil cu toate browserele moderne: IE, Opera, Firefox, Safari, Chrome (din moment ce glisorul nu folosește CSS3).
Sa incepem cu Marcaj HTML. La locul potrivit pagini html sau șablonul trebuie inserat.
Totul este simplu aici, după cum puteți vedea, puteți introduce câte diapozitive doriți prin crearea de noi div-uri. Puteți introduce orice cod HTML în interiorul lor, de exemplu o imagine sau un bloc de text. Doar nu uitați să includeți biblioteca jQuery în sine împreună cu toate scripturile js. Dacă nu știi cum, uită-te la exemplu.
#slider-wrap( /* Wrapper pentru glisor și butoane */ width:660px; ) #slider( /* Wrapper pentru slider */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Butoane pentru schimbarea slide-urilor */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center jos no- repetă;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* Link „Următorul” și „Anterior” */ display:block; lățime:15px; înălțime:100%; poziție:absolut; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) centru stânga fără repetare; opacitate:0,8 contur:niciuna !important;) #prewbutton(stânga:10px;) #nextbutton( dreapta:10px; fundal:url(arrowBg.png) centru dreapta fără repetare; ) #prewbutton:hover, #nextbutton:hover( opacitate:1;)
Să ne uităm la asta mai detaliat. Mai întâi dăm blocului principal, ID „slider-wrap”, lățimea dorită. Deoarece toate celelalte blocuri sunt introduse în el, nu trebuie specificată înălțimea, aceasta va depinde de ceea ce se află în interior. Apoi trebuie să setăm dimensiunile containerului în care vor fi amplasate diapozitivele. Acesta este #slider. Să-i dăm lățime și înălțime, precum și, de exemplu, un chenar de 10 pixeli. Aici lățimea este de 640 px, care este mai mică decât lățimea părintelui, deoarece adăugăm margini de 10 px la dreapta și la stânga. Lățimea diapozitivelor în sine (.slide) depinde și de lățimea acestui div.
Și ultimul lucru: trebuie să setăm poziția: relativă pentru containerul de diapozitive, deoarece diapozitivele din interior sunt cu poziționare absolută. Pentru diapozitivele în sine, doar lățimea și înălțimea sunt setate în CSS. Proprietățile rămase sunt setate în scriptul jQuery.
Selector.sli-links este un bloc care va conține butoane pentru deplasarea la slide-ul dorit. Aceste butoane sunt elemente simple drăguț , care vor fi introduse automat în cantitatea necesară, împreună cu parent.sli-link-urile lor. Pentru butoane setam noi vedere frumoasă, și anume, facem fiecare buton pătrat, le aliniem pe toate în centru și, de asemenea, datorită overflow: hidden și text-indent:-9999px, eliminăm textul, lăsând doar pictogramele de fundal, care se schimbă și când treceți cu mouse-ul peste acest element cu cursorul. Pentru comoditate, am folosit sprite-uri, care au redus numărul de imagini.
Următorul este emis butonul activ. Schimbăm doar poziția fundalului. Apoi vom reproiecta linkurile pentru a merge la diapozitivele următoare și anterioare. Le poți oferi orice design, la fel ca butoanele. Aceste link-uri sunt inserate automat în #slider. Dar ca să se vadă, i-am întrebat poziționare absolutăși un strat superior (z-index:3) astfel încât acestea să apară deasupra diapozitivelor. Cred că cu CSS totul este clar și simplu aici: puteți schimba aproape toate proprietățile pentru a proiecta glisorul așa cum aveți nevoie.
Să ne uităm acum la scenariul în sine:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = adevărat; $(document).ready(function(e) ( $(".slide").css((("poziție": "absolut", "sus":"0", "stânga": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = $("#slider .slide").size( var animSlide = function(arrow)( clearTimeout(slideTime); $ ("); .slide). săgeată == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = săgeată; ) $(".slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " "; }); $("
În primul rând, setările sunt salvate în variabile: hwSlideSpeed - viteza de întoarcere a diapozitivelor, hwTimeOut - timpul după care diapozitivul se schimbă automat, hwNeedLinks - controlează legăturile „Următorul” și „Anterior” - dacă valoarea acestei variabile este adevărat, atunci aceste link-uri vor fi afișate, iar dacă false , atunci în consecință nu vor exista (ca în pagina principala blogul meu).
Apoi, setăm proprietățile CSS necesare pentru diapozitive folosind metoda .css(). Stivuim blocuri cu diapozitive unul peste altul folosind poziționarea absolută, apoi le ascundem pe toate.hide() și apoi îl arătăm doar pe primul. Variabila slideNum este numărul slide-ului activ, adică contorul.
Logica principală a cursorului nostru jQuery este funcția animSlide. Este nevoie de un singur parametru. Dacă trecem șirurile „next” sau „prew” în el, atunci operatorii condiționali vor funcționa și va fi afișat diapozitivul următor sau anterior, respectiv. Dacă trimitem un număr ca valoare, atunci acest număr va deveni slide-ul activ și va fi afișat.
Deci această funcție ascunde div-ul curent, calculează unul nou și îl arată.
Rețineți că metoda .fadeIn(), care face vizibil slide-ul activ, primește un al doilea argument. Aceasta este așa-numita funcție sună din nou. Se execută când diapozitivul apare complet. În acest caz, acest lucru se face pentru a asigura derularea automată a diapozitivelor. Funcția de rotator definită mai jos apelează din nou funcția animSlide pentru a avansa la următorul slide la intervalul de timp dorit: vom obține o închidere care asigură derularea constantă.
Totul funcționează bine, dar trebuie să oprim automatizarea dacă utilizatorul mută cursorul pe glisor sau apasă butoanele. Variabila pauză este creată în acest scop. Dacă valoarea sa este pozitivă - adevărată, atunci nu va exista o comutare automată. Folosind metoda .hover(), specificăm: ștergeți temporizatorul dacă rulează - clearTimeout(slideTime) și setați pauză = true. Și după ce mutați cursorul, opriți pauza și rulați închiderea rotator().
În plus, trebuie să creăm noi elemente pe pagină și să le plasăm la locul potrivit. Folosind bucla each() pentru fiecare diapozitiv (div cu clasa .slide), vom crea un element span în interiorul căruia există un număr - numărul slide-ului. Acest număr este folosit în funcția de animație pentru a trece la diapozitivul cu acest număr. Să înfășurăm totul într-un div cu clasele necesare și, la final, vom obține următorul marcaj:
S-ar părea, de ce creăm markup în interiorul scriptului și nu în codul HTML? Cert este că, de exemplu, dacă utilizatorul are scripturile dezactivate, nu va vedea elemente care nu vor funcționa, iar acest lucru nu îl va deruta. În plus, codul este simplificat, ceea ce este bun pentru SEO.
Ca rezultat, aspectul glisorului va arăta cam așa (am folosit imagini ca diapozitive și am instalat 5 dintre ele):
Mai jos puteți vedea cum funcționează glisorul nostru jQuery pe pagina demo și puteți descărca toate sursele necesare.
În sfârșit, câteva puncte despre integrarea acestui glisor cu Drupal. Puteți adăuga acest cod la un fișier șablon, de exemplu în page.tpl.php, și puteți atașa scriptul ca fișiere js separate la temă. Jquery în Drupal este activat implicit, dar rulează în modul de compatibilitate (). Există două opțiuni de îmbunătățire. Sau includeți tot codul js:
(funcția ($) ( // Tot codul dvs.... ))(jQuery);
sau înlocuiți simbolurile $ din tot scriptul cu jQuery. Ca aceasta:
JQuery(document).ready(function(e) ( jQuery(".slide").css((("poziție": "absolut", "sus":"0", "stânga": "0")). hide ().eq(0).show(); var slideNum = 0; var slideCount = jQuery("#slider .slide").size( var animSlide = function(arrow)( // etc.);
Exemplul a implementat deja prima metodă.
Multumesc pentru lectura! Lasă comentarii, vino din nou. De asemenea, vă puteți abona la RSS pentru a primi mai întâi actualizări de blog!
Adăugat: Asta nu e tot. Citit. Acolo vom adăuga noi caracteristici acestui script.
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 șablon pentru dezvoltări similare. Sper că voi putea transmite cititorului esența a ceea ce am scris în mod 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ă. Utilizare jQuery - pluginuri Pentru un slider mi s-a părut prea neinteresant, 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 cu privire la logica 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 fereastra de vizualizare, adică blocul în care vom vedea cum se rotesc pozele noastre, în el îl vom avea slidewrapper, acesta va fi blocul nostru care va conține toate imaginile aliniate într-o singură linie și care își va schimba poziția în fereastra de vizualizare.
Apoi, pe părțile laterale din interior fereastra de vizualizare, vertical în mijloc, vor exista butoane înapoi și înainte, când faceți clic pe ele vom schimba și poziția noastră slidewrapper relativ fereastra de vizualizare, provocând astfel efectul derulării imaginilor. Și, în sfârșit, ultimul obiect va fi butoanele noastre de navigare situate în partea de jos fereastra 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(deplasarea se va face prin schimbare transforma proprietățile css, a cărui valoare va fi calculată 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! În primul rând, să deschidem fișier indexși scrieți marcajul de care avem nevoie acolo:
După cum puteți vedea, nimic complicat, bloc-pentru-glisor servește doar ca bloc în care va fi plasat glisorul nostru, în interiorul acestuia este deja fereastra de vizualizare, care conține noastre slidewrapper, alias lista imbricată, aici li sunt diapozitive și img- poze î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ă această chestiune, de obicei, stilurile nu sunt comentate în mod deosebit, dar am decis să atrag în continuare atenția 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: hidden -webkit-user-select: -ms-user-select: none: 100%; : 1s; -funcție de sincronizare a tranziției: ease-in-out -o-transition-timing-function: ease-in-out-funcție: ease-in-out ) #slidewrapper li; ( margine: 0; umplutură: 0; ) #slidewrapper li ( lățime: calc(100%/4); stil listă: niciuna; afișare: inline; float: stânga; ) .slide-img ( lățime: 100%; )
Sa incepem cu bloc-pentru-glisor, acesta, repet, este blocul nostru de pe pagină, pe care îl vom aloca pentru glisor, înălțimea acestuia va depinde de lățimea și de proporțiile imaginii noastre, deoarece fereastra de vizualizare ocupă toată lățimea bloc-pentru-glisor, apoi eu însumi diapozitiv are aceeași lățime și, în consecință, poza din interiorul ei își schimbă înălțimea în funcție de lățime (se mențin proporțiile). 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.
Element fereastra de vizualizare, după cum am menționat deja, ocupă întreaga lățime a noastră bloc-pentru-glisor, are proprietatea overflow:ascuns, ne va permite să ne ascundem fluxul de imagini, care se extinde dincolo de fereastra de vizualizare. 
Ca urmare a proprietate css - user-select:none, vă permite să scăpați de evidențierea albastră elemente individuale glisor cu numeroase clicuri pe butoane.
Să trecem la slidewrapper, De ce poziție: relativă, dar nu absolut? Totul este foarte simplu, pentru că... dacă alegem a doua variantă, atunci cu proprietatea overflow viewport:ascuns Ni se va părea absolut nimic, pentru că... eu insumi fereastra de vizualizare nu se va ajusta la înălțime slidewrapper, din cauza căruia va avea inaltime:0. De ce contează lățimea și de ce o setăm deloc? Cert este că diapozitivele noastre vor avea o lățime egală cu 100% din fereastra de vizualizare, iar pentru a le aranja in linie, avem nevoie de un loc unde vor sta, deci de latime slidewrapper ar trebui să fie egal 100% lățimea ferestrei de vizualizare, înmulțit cu numărul de diapozitive (în cazul meu cu 4). Cu privire la tranzițieȘi tranziție-funcție de sincronizare, apoi aici 1sînseamnă că o schimbare este o schimbare de poziție slidewrapper se va întâmpla în decurs de 1 secundă și o vom observa și ușurință-in-out– un tip de animație în care începe încet, accelerează până la mijloc și apoi încetinește din nou aici poți seta valorile la discreția ta;
Următorul bloc de proprietăți specifică slidewrapper iar elementele sale secundare au zero padding, fără comentarii aici.
Apoi ne stilăm diapozitivele, lățimea lor ar trebui să fie egală cu lățimea fereastra de vizualizare, ci pentru că ei sunt in 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 lățimea fereastra de vizualizare din nou, avem nevoie de 100% din lățime slidewrapperîmpărțiți la numărul de diapozitive (în cazul meu, din nou, cu 4). Apoi le transformăm în elemente inline cu ajutor display: inlineși setați fluxul la stânga adăugând proprietatea plutește la stânga. Despre list-style:none Pot spune că îl folosesc pentru a elimina marcatorul implicit din li, în cele mai multe cazuri este un fel de standard.
Co slide-img Este simplu, imaginea va ocupa toată lățimea diapozitiv, diapozitiv se ajustează la înălțimea sa, slidewrapper reglați la înălțime diapozitiv, și înălțimea fereastra de vizualizare la rândul său va lua valoarea înălțimii slidewrapper, astfel î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ă ne deschidem fisierul js, care va conține codul glisor, nu uitați să vă conectați jQuery, deoarece Vom scrie folosind acest cadru. Apropo, la momentul scrierii acestui articol, folosesc versiunea jQuery 3.1.0. Fișierul cu scriptul în sine trebuie inclus la sfârșitul etichetei corp, 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 anumit moment în timp. fereastra de vizualizare, Am sunat-o slideAcum, iar al doilea va stoca numărul acestor diapozitive, acesta slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
Variabil slideAcum este necesar să se stabilească valoarea inițială 1, deoarece când pagina se încarcă, pe baza markupului nostru, vom vedea primul diapozitiv fereastra de vizualizare.
ÎN slideCount vom pune numărul de copii slidewrapper, aici totul este logic.
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<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * ( slideNow); $("#slidewrapper").css(( "translate": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0) ) )", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )
Mai întâi 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").copii().lungimeși verificați-l cu numărul diapozitivului nostru, dacă se dovedesc a fi egale, atunci aceasta înseamnă că trebuie să începem să arătăm din nou feedul, de la diapozitivul 1, ceea ce înseamnă că schimbăm transforma proprietatea css la slidewrapper pe traduce(0, 0), mutându-l astfel la poziția inițială astfel încât primul diapozitiv să apară în câmpul nostru vizual, să nu uităm –webkit și –ms pentru afișare adecvată între browsere (vezi. referință proprietăților css). După aceasta, nu uitați să actualizați valoarea variabilei slideAcum, spunându-i că diapozitivul numărul 1 este la vedere: 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ă ne aflăm acest moment Nu suntem nici pe ultimul slide, nici pe vreunul inexistent, ceea ce înseamnă că trebuie să trecem la următorul, vom face asta prin schimbarea slidewrapper la stânga cu o valoare egală cu lățimea fereastra de vizualizare, deplasarea se va produce din nou prin proprietatea familiară Traduceți, a cărui valoare va fi egală „traducere(” + translateWidth + „px, 0)”, Unde translateWidth– distanța cu care noastre slidewrapper. Apropo, să declarăm această variabilă la începutul codului nostru:
var translateWidth = 0;
După ce trecem la următorul diapozitiv, să spunem diapozitivului nostru Acum că vedem următorul diapozitiv: slideNow++;
În acest moment, unii cititori s-ar putea să se întrebe de ce nu am înlocuit $("#viewport").width() la o variabilă, de exemplu slideWidth să avem mereu la îndemână lățimea toboganului nostru? Răspunsul este foarte simplu, dacă site-ul nostru este adaptiv, atunci, în consecință, blocul alocat pentru glisor este și el adaptiv, pe baza acestuia putem înțelege că atunci când redimensionăm lățimea ferestrei fără a reîncărca pagina (de exemplu, rotind telefon pe o parte), lățimea fereastra de vizualizare se va modifica și, în consecință, lățimea unui diapozitiv se va modifica. În acest caz nostru slidewrapper va fi deplasat 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 în funcția noastră $("#viewport").width()în loc de slideWidthîl forțăm să calculeze lățimea de fiecare dată când comutăm diapozitive fereastra de vizualizare, asigurându-ne astfel că atunci când lățimea ecranului se schimbă brusc, putem derula la diapozitivul 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, trecem prin design $(document).gata(funcția () ()) Spunem că următoarele acțiuni trebuie efectuate după ce documentul a fost încărcat complet. Apoi, numim pur și simplu funcția următorul Slide 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 în versiune jQuery, fie în conexiune incorectă orice fișiere. De asemenea, nu este necesar să excludeți 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 precum oprirea derulării când trecem cursorul, pentru aceasta trebuie să scriem în blocul principal de cod (în interiorul constructului $(document).ready(funcție () ()). acest lucru:
$("#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 asta: 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 event planare, 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ă ce trec cu mouse-ul, șterg intervalul, pe care îl indic între paranteze (acesta este al nostru switchInterval), apoi, despărțit prin virgule, scriu ce voi face când voi muta cursorul înapoi, în acest bloc îi atribui din nou switchInterval apel periodic de funcții următorul Slide.
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, dar voi spune imediat că am împachetat aceste două butoane într-unul singur div cu clasa prev-next-btns doar pentru confortul dvs., nu trebuie să faceți acest lucru, rezultatul nu se va schimba, acum le vom 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; )
Mai întâi ne poziționăm butoanele prin poziție: absolută, astfel le vom controla liber poziția în interiorul nostru fereastra de vizualizare, apoi indicăm dimensiunile acestor butoane și folosind hotar-raza Să rotunjim colțurile astfel încât aceste butoane să se transforme în cercuri. Culoarea lor va fi albă, adică #fff, și indentarea lor din Marginea superioară fereastra de vizualizare va fi egală cu jumătate din înălțimea acesteia fereastra de vizualizare minus jumatate din inaltimea butonului in sine (in cazul meu 25px), astfel le putem pozitiona vertical in centru. În continuare, vom indica că atunci când trecem cu mouse-ul peste ele, cursorul nostru se va schimba în indicatorși, în sfârșit, să spunem butoanelor noastre în mod individual că ar trebui să fie așezate înapoi la 20 px față 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: 
În continuare, ne întoarcem la noi fisierul js, unde descriem 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<= 0 || 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(( "translate": "translate(" + translateWidth + "px , 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow--;
Se numeste prevSlide, va fi apelat doar când dați clic pe prev-btn. Mai întâi verificăm dacă suntem sau nu pe primul slide, aici verificăm și dacă suntem slideAcum dincolo de raza reală a diapozitivelor noastre și, dacă vreuna dintre condiții este declanșată, vom trece la ultimul diapozitiv, schimbând slidewrapper 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 îl deplasăm la stânga, se dovedește că fereastra de vizualizare acum ne va arăta ultimul diapozitiv. La sfârșitul acestui bloc trebuie să spunem și variabila slideAcum că ultimul diapozitiv este acum în câmpul nostru vizual.
Dacă nu suntem pe primul diapozitiv, atunci trebuie să ne mutăm înapoi 1, pentru aceasta schimbăm din nou proprietatea transforma pentru 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ă suntem, să zicem, pe al 2-lea slide, atunci variabila X proprietăți transform:translate(x,0) al nostru slidewrapper este deja egală cu lățimea unui diapozitiv, dacă îi spunem că trebuie să scădem 1 din numărul diapozitivului curent, vom obține din nou unul cu care ne-am deplasat deja slidewrapper, deci va trebui să mutați aceleași lățimi la 0 fereastra de vizualizare, 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ăuntru fereastra de vizualizare a apărut o listă imbricată, să-i dăm un identificator nav-btns, inauntru li– butoanele noastre de navigare, le vom atribui o clasă 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; list-style: nici lățimea: 20px margine: .slide-nav-btn: cursor;
Blok nav-btns, în care se află butoanele noastre, dăm proprietatea poziție: absolută, ca să nu se întindă fereastra de vizualizareîn înălţime, pentru că la slidewrapper proprietate poziție: relativă, setăm lățimea la 100%, astfel încât folosind text-align:center centrați butoanele orizontal față de fereastra de vizualizare, apoi folosind proprietatea fund Am anunțat blocul nostru că ar trebui să fie la 20 px de marginea de jos.
Cu butoane facem același lucru ca și cu slide-urile, dar acum le dăm display:inline-block, deoarece la display: inline ei nu raspund la lăţimeȘi înălţime, deoarece sunt într-un bloc poziționat absolut. Să le facem albe și să folosim ceea ce știm deja hotar-raza 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ă începem jQuery - părți:
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(( "translate": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth); + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1 ));
Iată-ne când faceți clic pe nostru slide-nav-btn apelați o funcție care atribuie mai întâi unei variabile navBtnId indexul butonului apăsat, adică numărul său de serie, deoarece numărătoarea inversă începe de la zero, atunci dacă facem clic pe al doilea buton, atunci navBtnId se înregistrează valoarea 1. Apoi, 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, comparăm acest număr cu numărul. slide-ul curent, dacă se potrivesc, atunci nu vom întreprinde nicio acțiune, nicio acțiune, deoarece slide-ul necesar este deja introdus fereastra de vizualizare.
Dacă toboganul de care avem nevoie nu este la vedere fereastra de vizualizare, apoi calculăm distanța cu care trebuie să ne deplasăm slidewrapper spre stânga, apoi modificați valoarea transforma proprietățile css pentru a le 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 într-o variabilă slideAcum, 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
Avem nevoie de un glisor simplu cu defilare automată. Să începem...
Descrierea modului în care funcționează glisorul.
Toboganele vor fi aliniate și în întregime anumit timp va derula.
Cadrul roșu arată parte vizibilă glisor.
La sfârșitul glisorului trebuie să duplicați primul diapozitiv. Acest lucru este necesar pentru a asigura derularea de la al treilea slide la primul. De asemenea, trebuie să adăugați ultimul diapozitiv la început pentru a putea derula înapoi de la primul diapozitiv la al treilea. Mai jos este arătat cum funcționează glisorul în direcția înainte.
Când glisorul ajunge la sfârșit, o copie a acestuia de la începutul glisorului este plasată instantaneu în locul ultimului slide. Apoi ciclul se repetă din nou. Acest lucru creează iluzia unui glisor nesfârșit.
Marcaj HTML
Mai întâi, să facem un glisor simplu cu defilare automată. Este nevoie de două containere pentru a funcționa. Primul va seta dimensiunea zonei vizibile a glisorului, iar al doilea este necesar pentru a plasa glisoarele în el. Dispunerea glisorului va arăta astfel:
Stiluri de glisare
.slider-box( lățime : 320px ; înălțime : 210px ; overflow : ascuns ; ) .slider( poziție : relativă ; lățime : 10000px ; înălțime : 210px ; ) .slider img( float : stânga ; z-index : 0 ;)Container.slider-box specifică dimensiunile glisorului. Folosind proprietatea overflow:hidden, toate elementele care nu sunt incluse în zona din interiorul elementului sunt ascunse.
Container.slider este setat la o lățime mare. Acest lucru este necesar pentru ca toate diapozitivele să se potrivească în linie.
Diapozitivele sunt aliniate folosind proprietatea float:left.
Mai jos este un aspect schematic al blocurilor de glisare.
Scenariul
Diapozitivele se vor mișca prin schimbarea lină a proprietății margine-stânga a containerului.slider.
$(funcție () ( var width= $(".slider-box" ) .width () ; // Lățimea cursorului. interval = 4000 ; // Interval de schimbare a diapozitivei.$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // O copie a ultimului diapozitiv este plasată la început.$().eq(1).clone().appendTo(".slider"); // O copie a primului diapozitiv este plasată la sfârșit. // Container.slider este deplasat la stânga cu lățimea unui diapozitiv. setInterval(„animație()” , interval) ; // Funcția animation() este lansată pentru a schimba diapozitive.) ) ; function animation() ( var margin = parseInt($(".slider" ) .css ( "marginLeft" ) ) ; // Blocul curent offset.slider width= $(".slider-box" ) .width() , // Lățimea cursorului. slidersAmount= $(".slider" ) .children () .length ; // Numărul de diapozitive din glisor. dacă (marja!= (- lățime* (glisori Sumă- 1) ) ) // Dacă slide-ul curent nu este ultimul,( margine = margine-lățime; // atunci valoarea marjei este redusă cu lățimea slide-ului.) altfel ( // Dacă este afișat ultimul diapozitiv,$(".slider" ) .css ("margine-stânga" , - lățime) ; // apoi block.slider este revenit la pozitia de pornire, margine=- latime* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider este deplasat la stânga cu 1 slide. } ;Rezultatul este un glisor simplu cu defilare automată nesfârșită.
