Facem singuri glisorul de conținut Jquery. Pluginul jQuery Slide. Slider jQuery frumos „Ciclul de prezentare”
Timpul nu stă pe loc și odată cu el progresează. Acest lucru a afectat și internetul. Puteți vedea deja cum se schimbă aspectul site-urilor web; designul adaptiv este deosebit de popular. Și în acest sens, au apărut destul de multe noi slidere adaptive jquery, galerii, carusele sau plugin-uri similare.
1. Slider pentru postări orizontale receptive
Carusel orizontal adaptiv cu instrucțiuni detaliate la 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. Folosește 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. Slider 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 de morphing (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. Moda adaptativă glisor
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 animații și momente diferite. 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
universal plugin 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.
Galeria de glisare experimentală 3DPanelLayout cu o grilă și efecte de animație interesante.
14. Glisor pe css3
Slider receptiv realizat folosind css3 cu aspect neted conținut ș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
Glisor 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ă a diapozitivelor. 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
3D Wall Gallery - creat pentru browserul 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 3D simplu folosind css3 și jQuery.
31. Modul ecran întreg cu efect 3D folosind css3 și jQuery
Un glisor cu capacitatea de a vizualiza imagini pe tot ecranul cu o tranziție frumoasă.
Adaptive, sau dacă preferați, responsive web design nu este acum doar o altă tendință de design, este deja un anumit standard pentru dezvoltarea site-urilor, asigurând versatilitatea site-urilor web, percepția vizuală armonioasă pe diferite ecrane dispozitivele utilizatorului. Mai recent, când am dezvoltat un șablon responsive, am avut de-a face cu diverse dificultăți în integrarea anumitor glisoare și galerii de imagini fără a deranja stilul general de design. Acum totul este mult mai simplu, există un număr mare de soluții gata făcuteși ceea ce este deosebit de plăcut este că majoritatea dintre ei sunt în acces liber, cu deschis cod sursa.
Datorită varietatii de instrumente oferite, am compilat scurtă recenzie cele mai notabile dezvoltări ale glisoarelor de imagine jQuery responsive care au apărut în cele mai multe În ultima vremeși distribuit fără nicio restricție, de ex. absolut gratuit.
WOW SliderGlisor de imagine jQuery receptiv cu un set grozav efecte vizuale(viraje, plecări, 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. Un plugin Wordpress separat și un modul pentru Joomla sunt, de asemenea, disponibile pentru descărcare. Sunt sigur că multora le va plăcea acest slider minunat, atât începătorilor, cât și webmasterilor experimentați.
HiSliderHiSlider - HTML5, slider Jquery și galerie de imagini, plugin absolut gratuit pentru uz personal pe site-uri care rulează sisteme populare - WordPress, Joomla, Drupal. Cu asta simplu dar destul de instrument 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 (modificare) a conținutului, ieșire de diferite conținuturi multimedia: videoclipuri de pe YouTube și Vimeo, flexibile setari personalizate etc...
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ă in perfecta ordine. Folosit pentru muncă biblioteca jQuery v1.7+, efecte frumoase tranziții, setări simple și foarte flexibile, aspect adaptiv, tăiere 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ă o lecție detaliată despre cum să creați acest glisor, un aspect complet al marcajului HTML, un set Reguli CSSși un plugin jQuery executabil, precum și un minunat exemplu live de utilizare a glisorului.
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. Folosind animația JQuery și CSS puteți crea tranziții unice între diapozitive. Aspectul receptiv al glisorului asigură că arată la fel de bine pe diferite tipuri de ecrane ale dispozitivului utilizatorului.
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; atunci 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.
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.
Un glisor de imagine jQuery foarte simplu, 100% receptiv și pe tot ecranul. Funcționarea glisorului se bazează pe tranziții CSS (proprietatea de tranziție) în combinație 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.
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ă prezentări 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. Markup simplu folosind o listă neordonată, setarea tranzițiilor și intervalelor de timp, controlul automat și manual al comutării diapozitivelor, precum și suport pentru mai multe prezentări de diapozitive simultan. Iată un „bebeluș” atât de jucăuș.
Aparat foto - jQuery gratuit plugin pentru organizarea prezentărilor de diapozitive pe paginile site-ului web, glisor ușor cu multe efecte de tranziție, aspect 100% receptiv și foarte setări 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 control manual cu ajutorul butoanelor și al blocului de miniaturi ale imaginii. O galerie aproape completă de imagini într-un design compact.
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 pentru ecranele tactile. Utilizarea animațiilor de tranziție CSS. Un număr mare de variante diferite de prezentări de diapozitive și galerii de imagini compacte. Control automat si 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 - O versiune actualizată a glisorului cu același nume, cu o capacitate 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.
Un plugin jQuery responsive bine cunoscut și destul de popular pentru crearea de galerii de imagini și slidere de înaltă calitate. Interfața glisor, datorită panoului de control, seamănă vizual cu un player video familiar; pluginul include mai multe teme de design diferite. Suport pentru videoclipuri și imagini încorporate de la servicii populare: Flickr, Vimeo, YouTube și altele. Documentație detaliată despre instalare și utilizare.
Un glisor de imagine jQuery simplu, fără ornamente, scris special pentru design web receptiv. Blueberry este un plugin experimental jQuery open source. Design minimalist, fără efecte, doar imagini pop-up care se înlocuiesc între ele după o anumită perioadă de timp. Totul este foarte simplu, instalați, conectați și mergeți...
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 o poza marita si controale. 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 o cantitate mare de informații.
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.
Un slider de imagine foarte simplu atât din punct de vedere al funcționalității, cât și al setărilor; printre setări se numără o modificare a vitezei de schimbare a diapozitivelor, activarea modului manual (butoanele de control sunt activate), prezentarea continuă de diapozitive. 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)))
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, drăguți nasturi și săgeți verzi, totul este destul de frumos și calm, fără presiune.
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 instala diverse metode animații, decolorarea diapozitivelor sau tranzițiile 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
Uneori trebuie să rezolv probleme legate de front-end, în ciuda faptului că nu-mi place :)
De fapt, ai putea estima atitudinea mea față de tot ce ține de „frumos” din designul acestui site, care a fost dezvoltat doar de mine :)
Cu toate acestea, relativ recent m-am confruntat cu nevoia de a implementa un glisor în JavaScript, iar acest lucru trebuia făcut fără biblioteci gata făcute și chiar fără jQuery favorit al tuturor.
Chemat această nevoie a fost că rezultatul ar fi trebuit să fie un script JS care să fie conectat la site printr-un serviciu terță parte. În consecință, caruselele gata făcute în JavaScript nu mai erau necesare, deoarece Pentru a le integra, a fost necesar să adăugați o conexiune de bibliotecă la codul HTML al site-ului printr-o etichetă de script și să copiați fișierele în sine fie pe server, fie să le extrageți prin cdn, dar acest lucru ar necesita din nou editarea codului resursei.
Cum să faci un slider JavaScript: începutulAstăzi, cred că toți cei care s-au găsit într-o situație similară au început prin a căuta dezvoltări existente, pentru că... atunci când sarcina de a realiza un carusel JS este în domeniul de aplicare, ar trebui să fie întotdeauna făcută cât mai repede posibil. Și în astfel de condiții, nimeni nu vă va permite să stați și să vă inventați propriile biciclete.
Clienților nu le pasă întotdeauna cum este scris codul, care este arhitectura lui, principalul lucru este să vadă rezultatul!
Ca rezultat, după cum înțelegeți, înainte de a scrie un slider în JavaScript fără jQuery, am decis să găsesc unul gata făcut și să îl modific pentru a se potrivi nevoilor mele. De ce nu jQuery? Da, pentru că pe resursa țintă, unde am plănuit să-mi conectez glisorul prin serviciu, apelul jQuery din cod a fost localizat mai târziu decât scriptul conectat de serviciu. Prin urmare, constructele jQuery din codul meu pur și simplu nu au fost percepute.
Ca bază, am luat acest slider de imagine JavaScript - https://codepen.io/gabrieleromanato/pen/pIfoD.
Am decis să mă opresc acolo, pentru că... codul său JS a fost scris folosind principiile OOP și clasele sale se bazează pe prototipuri, nu pe funcții banale.
Sincer să fiu, nu înțeleg și nu recunosc hype-ul actual în jurul JavaScript-ului folosind POO, cadre și alte lucruri arhitecturale într-un limbaj care a fost inițial intenționat să fie un simplu limbaj de scripting dinamic. La fel ca JS în sine, îmi displace sincer cu vinaigreta sa sintactică, care permite ca aceleași construcții să fie scrise în mai multe moduri.
Dar, din păcate, în lumea modernă Puțini oameni îmi împărtășesc pozițiile, pentru că... acest limbaj se dezvoltă într-un ritm nebun și chiar încearcă să câștige mințile dezvoltatorilor de backend care folosesc Node.js ca alternativă la Java, PHP, C#, Ruby și alți monștri.
Drept urmare, pentru a nu rămâne pur și simplu fără muncă, trebuie să vă dați seama în liniște JavaScript. Și în implementarea pură a sliderului JavaScript pe care am ales-o, am întâlnit ceva pe care, după cum înțelegeți, îl disprețuiesc în limba dată. De aceea l-am ales, astfel încât să existe măcar un motiv pentru a lucra și a înțelege JavaScript OOP și clasele prototip - altfel nu le-aș fi atins de bunăvoie în viața mea :)
Pe baza codului pe care l-am găsit, trebuia să dezvolt un glisor în JS pur într-o fereastră pop-up (acest lucru se mai numește și popup, popup etc.), care ar avea butoane pentru comutarea diapozitivelor și indicatori pe care se poate face clic ai curentului. diapozitiv. De asemenea, a fost necesar să se facă un buton pentru a închide această fereastră.
Cu asta am ajuns.
Realizarea unei biblioteci JS sliderÎn primul rând, am decis să implementez totul cu înțelepciune și să fac un slider JavaScript pentru site sub forma unei biblioteci care poate fi conectată la site cu un singur script, în care vor fi apelate componentele sliderului, împărțite în subdirectoare. Am decis să-l numesc popupSlider.js în onoarea scopului său inițial.
Codul său poate fi găsit pe GitHub la această adresă - https://github.com/Pashaster12/popupSlider.js
Structura bibliotecii este următoarea:
Dosarul de diapozitive este pentru imagini de diapozitive. Comenzile conține imagini ale comenzilor caruselului JS (butoane pentru închiderea glisorului și comutarea diapozitivelor). Și în active există elemente statice ale glisorului JS: marcaj HTML și un fișier cu stiluri CSS.
Ei bine, fișierul popupSlider.js este inima bibliotecii în sine, în care sunt scrise acțiunile JavaScript ale caruselului și se stabilește o conexiune cu alte fișiere. Acesta este pe care îl vom conecta pe site și îi va chema pe celelalte.
Am decis să încep cu marcajul HTML al caruselului nostru de imagini JS, care în cazul meu arată astfel:
Textul 1 
Textul 2 
Textul 3
Pentru a proiecta glisorul în JavaScript ca pop-up, am folosit următoarele stiluri:
#slider ( margine: automat; lățime: 600px !important; overflow: ascuns; ) #slider-wrapper ( lățime: 9999px; înălțime: 343px; poziție: relativă; tranziție: stânga 400ms liniar; ) .slide ( float: stânga; lățime : 600px; poziție: relativă; overflow: ascuns; ) .caption ( lățime: 600px; înălțime: 110px; line-height: 1,5; font-size: 15px; font-weight: 300; text-align: center; culoare: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav ( poziție: absolut; jos: -36px; text-align: center; stânga: 50%; transformare: translateX(-50%); ) #slider-nav a ( lățime: 8px; înălțime: 8px; text-decor: niciuna; culoare: #000; afișare: inline-block; chenar-rază: 50%; margine: 0 5px; culoare de fundal: #fafafa; ) #slider-nav a.current ( culoare de fundal: #337ab7; ) .control-orizontal (poziție: absolut; afișare: bloc inline; lățime: 12px ; înălțime: 20px; sus: 50%; margin-sus: -10px; ) #prev ( fundal: url(../controls/arrow_left_inactive.png); stânga: -40px; ) #prev:hover ( fundal: url(../controls/arrow_left_active.png); ) #next ( fundal: url(../controls/arrow_right_inactive.png); dreapta: -40px; ) #next:hover ( fundal : url(../controls/arrow_right_active.png); ) #cq-popup ( lățime: 600px; z-index: 23; stânga: calc(50%); sus: calc(50%); poziție: fix !important ; background-repeat: nu-repeat; fundal-poziție: dreapta; fundal-culoare: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; transform: translate(-50%, -50%) scale(1); ) #cq-popup .header ( afișare: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( lățime: 500px; dimensiunea fontului: 22px; înălțimea liniei: 36px; ) #cq-popup-btclose ( text-decor: niciunul; poziție: absolut; dreapta: -40px; sus: 0; fundal: url(. ./controls/btn_delete_inactive.png); înălțime: 16px; lățime: 16px; ) #cq-popup-btclose:hover ( fundal: url(../controls/btn_delete_active.png); ) #cq-popup-bg (poziția : fix; sus: 0; latime: 100%; inaltime: 100%; fundal: rgba(51,51,51,0.8); indicele z: 22; )
Ca rezultat al aplicării acestor stiluri JS, caruselul arată astfel:
Am pus atât stilurile HTML, cât și stilurile CSS fişiere separate popupSlider.html și popupSlider.css, care se află în directorul de active al bibliotecii glisante JavaScript. Am făcut acest lucru în mod intenționat, astfel încât, atunci când folosesc acest cod, utilizatorii să poată ajusta cu ușurință marcajul și designul fără a se încurca în codul JS, unde ceea ce ar trebui să fie scris ar trebui scris direct.
În plus, multor oameni încă le place să minimizeze JS pentru a accelera încărcarea site-ului. Deci ar fi foarte dificil să personalizați această soluție în condițiile specificate.
Ca urmare, am decis să includ pur și simplu fișiere gata făcute în fișierul bibliotecii principale popupSlider.js, care pentru sarcina mea a luat următoarea formă:
Funcție Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll) ("#slider-nav a"); this.wrapper = this.el.querySelector ("#slider-wrapper"); this.nextBtn = this.el.querySelector ("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), naviga: function () ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = „blocare”; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: funcție (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Câteva comentarii despre codul de mai sus. Conținutul fișierului popupSlider.js este o singură clasă JavaScript Slider, care, ca și în PHP, conține un constructor și metode de clasă. Numai în JS, definiția unui constructor, spre deosebire de PHP, este obligatorie.
Constructorul este definit folosind următorul construct:
Funcție Slider(element) ( //cod constructor)
În interiorul constructorului trebuie specificate acțiunile care vor fi efectuate la crearea unui obiect de clasă.
Metodele clasei în sine vor fi localizate în interiorul prototipului și vor fi disponibile pentru toate instanțele acestei clase JavaScript. Prototipul JS în cazul meu este descris de următorul design:
Slider.prototype = ( //metode )
Aceștia vor fi chemați în afara corpului clasei după cum urmează:
Var slider = new Slider(); slider.class_method();
Și în interiorul codului clasei în sine, este disponibilă următoarea metodă:
This.class_method();
Principalul lucru este să nu uiți că în Sensul JavaScript acest lucru depinde de contextul apelului, astfel încât în corpurile unor metode în care a fost necesar să se apeleze metode și proprietăți ale clasei, există o astfel de construcție:
Var self = aceasta; self.class_method(); // pentru a accesa o metodă care este cu un nivel mai mare decât codul metodei descrise
Se pare că am vorbit despre toate nuanțele scrierii codului. Acum câteva cuvinte despre metodele clasei noastre JavaScript, care conțin descrieri ale acțiunilor JS ale caruselului de imagini.
loadStatic()
Prima metodă apelată la crearea unei instanțe a unei clase în constructor. Responsabil pentru adăugarea unui marcaj de glisare și a unui fișier cu stiluri la codul HTML al paginii site-ului.
În primul rând, o nouă etichetă de link este creată în memorie cu folosind JavaScript funcția document.createElement() și i se atribuie valorile tuturor atributelor necesare, inclusiv calea către fișierul CSS cu stilurile de glisare JS. Și, în sfârșit, este adăugat la pagina HTML folosind metoda JavaScript appendChild() la sfârșitul secțiunii head, unde ar trebui să fie stilurile.
Apoi, facem același lucru pentru fișierul cu marcajul HTML al glisorului nostru în JavaScript pur. Există doar o mică nuanță aici: nu puteți include doar un fișier HTML în același, așa cum am făcut cu un fișier CSS. Există biblioteci speciale pentru aceasta, de exemplu, pentru a include HTML în HTML, lib de la w3.org este excelentă - https://www.w3schools.com/howto/howto_html_include.asp
Dar atunci ar trebui fie să fie inclus în biblioteca de glisare, fie să le ceară utilizatorilor să o instaleze ei înșiși. Dar toate acestea sunt suboptimale, pentru că... necesită multe mișcări ale corpului și încetinește viteza de încărcare a site-ului datorită scripturilor suplimentare.
Drept urmare, am decis să primesc conținutul fișier HTMLîn codul JavaScript și încărcați-l într-unul nou element div, creat în memorie, așa cum am făcut mai devreme pentru a include un fișier CSS în JavaScript. Elementul generat este inclus la sfârșitul secțiunii body a codului HTML al paginii site-ului.
Dacă doriți să inserați un div cu marcaj glisor nu doar la sfârșitul corpului, ci într-un anumit container, puteți utiliza următorul cod în schimb:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Introduceți următoarele, specificând identificatorul dorit al containerului țintă (în cazul meu, glisorul HTML JS va fi localizat în elementul cu id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Metoda, care este apelată în constructor după loadStatic(), este necesară pentru a inițializa proprietățile clasei corespunzătoare principalelor elemente HTML pe care le vom accesa în următorul cod.
La final, este apelată metoda navigate().
naviga ()
În această metodă, acțiunile care apar atunci când dați clic pe butoanele comutatorului cu glisare și pe elementele de navigare situate sub glisorul în sine sunt indicate sub formă de cercuri.
Pentru comoditate, am mutat codul JavaScript pentru schimbarea diapozitivelor într-o metodă separată slide(), dar în aceasta doar îl atașez la evenimentul clic pentru fiecare buton rotund din buclă.
Când faceți clic pe butoanele „diapozitivul anterior” / „diapozitivul următor”, după cum puteți vedea, am decis să emulez doar un clic pe cercul corespunzător, definindu-l pe cel dorit în raport cu cel curent, care are un curent de clasă CSS.
slide(element)
Metoda „responsabilă pentru magia” a caruselului JavaScript în sine, care conține codul care schimbă pozițiile diapozitivelor. La început, este apelată metoda setCurrentLink(), despre care vom vorbi puțin mai târziu.
Obiectul butonului de navigare glisor JS sub forma unui cerc îi este transmis ca parametru de intrare.
Comutatorul glisant în sine funcționează astfel:
La sfârșitul metodei, este descris comportamentul butoanelor „diapozitivul anterior”/”diapozitivul următor”, concepute ca săgeți stânga/dreapta, respectiv. Dacă diapozitivul curent este primul din întreaga listă, atunci butonul pentru a trece la diapozitivul anterior este ascuns. Dacă acesta din urmă, atunci eliminați butonul pentru a trece la următorul diapozitiv.
setCurrentLink(link)
Această metodă a clasei noastre de glisare JavaScript este responsabilă pentru evidențierea butonului rotund de navigare corespunzător elementului curent. Acestea. dacă avem al doilea slide selectat, al doilea buton va fi evidențiat.
Obiectul butonului care ar trebui selectat ca fiind cel curent este transmis ca parametru de intrare funcției.
Logica pentru evidențierea elementului curent este simplă:
Ultima metodă a clasei, care definește acțiunea atunci când faceți clic pe butonul de închidere al glisorului sub forma unei cruci. Aici, de fapt, codul este cel mai ușor de înțeles dintre toate conținute în clasa glisor JS.
Când faceți clic pe butonul de închidere, care este accesat prin identificatorul acestuia, elementul glisor și elementul care îl definește sunt eliminate din pagină. fundal translucid. Ele sunt, la rândul lor, obținute prin identificatori unici.
Metoda în sine este numită în navigate(), descris anterior, care conține toate scenariile de acțiuni care au loc pe glisorul nostru JavaScript.
Apropo, dacă doriți să închideți glisorul când faceți clic în afara lui, atunci adăugați următorul cod la această metodă:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Prezentare de diapozitive JavaScript bazată pe biblioteca dezvoltatăUneori, în practică, poate fi necesar să faceți un carusel de derulare JS, care este adesea numit o prezentare de diapozitive. În cazul meu, acest lucru nu a fost necesar, dar am decis totuși să fac unul pe baza codului final al bibliotecii pentru un caz în care ar putea fi util.
De fapt, implementarea JavaScript a unei prezentări de diapozitive diferă destul de puțin de un slider obișnuit. Singura diferență este că într-o prezentare de diapozitive, slide-urile comută automat la un anumit interval de timp, în timp ce în cazul unui carusel JS obișnuit se schimbă manual folosind elemente de navigare.
SlideShow: function (timeout) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current")).getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
Cred că este clar ce se întâmplă aici. Pentru a crea această metodă, am copiat codul din evenimentul de clic al butoanelor de slide manuale și l-am plasat într-un apel JavaScript la funcția setInterval(), care efectuează acțiunea specificată după o perioadă de timp specificată.
Scriptul de acțiune este trecut ca prim argument ca funcție anonimă, iar intervalul de timp este trecut ca al doilea, pe care am decis să îl fac ca o variabilă a cărei valoare este transmisă atunci când este apelată slideShow().
Singura modificare a codului din setInterval() care a fost necesară a fost de a determina numărul de diapozitive și de a compara indexul slide-ului curent cu acesta pentru a ciclă comutarea automată.
Ei bine, și pentru a acest cod câștigat, metoda în sine trebuie apelată. Am decis să fac toate acestea în același navigate(), care este tocmai o colecție de tot felul de scripturi. Am plasat apelul la sfârșit, trecând ca argument valoarea intervalului de timp pentru schimbarea automată a diapozitivelor din prezentarea noastră de diapozitive JS (am ales 2000 de milisecunde sau 2 secunde, puteți modifica acest număr după cum este necesar):
Self.slideShow(2000);
După acea verificare Funcționează JavaScript glisor, fără a uita să curățați browserul.
În teorie, totul ar trebui să funcționeze. Dacă nu, studiază erorile din consola browserului și distribuie-le în comentarii.
Ca rezultat, am obținut o prezentare de diapozitive JS în care diapozitivele comută automat și într-un cerc, de exemplu. când se ajunge la ultimul diapozitiv, spectacolul intră într-o nouă buclă și spectacolul începe din nou de la primul element.
Când lucram cu diferite biblioteci JS pentru carusele de imagini și recenzii, am observat că dezvoltatorii folosesc în mod activ această practică, dar cu ceva adaos. În toate soluțiile pe care le-am văzut, prezentarea automată de diapozitive este întreruptă dacă utilizatorul face o comutare manuală. Așa că am decis să fac același lucru în biblioteca mea.
Pentru a întrerupe afișarea automată a diapozitivelor din carusel JavaScript, am decis să folosesc funcția standard JS clearInterval(), căreia îi trec ca argument identificatorul intervalului de timp returnat de funcția setInterval() atunci când este setată.
Ca rezultat, am primit următorul cod, pe care am decis să nu îl scriu ca metodă separată:
ClearInterval(self.slideCycle);
Și așezat-o în locuri în care sunt descrise acțiunile atunci când faceți clic pe diferite elemente de navigare, de exemplu. în cele ce urmează:
Link.addEventListener(„clic”, funcția (e) (...)); self.prevBtn.addEventListener(„clic”, funcția (e) (...)); self.nextBtn.addEventListener(„clic”, funcția (e) (...));
Este mai bine să apelați clearInterval() mai aproape de evenimentul clic în sine, principalul lucru este înaintea acestuia și nu după el.
Integrarea cursorului JavaScript pe siteDeci, glisorul nostru în JS pur este gata. Acum nu mai rămâne decât să-l conectați la site.
Pentru a face acest lucru, trebuie să efectuați succesiv pasii urmatori, care sunt acțiuni standard la integrarea oricăror biblioteci JavaScript terță parte în general.
Pasul 1 . Copiem fișierele bibliotecii pe site-ul nostru într-un director separat.
Pasul 2. Adăugați următorul cod la codul HTML al paginilor în care va trebui să fie afișat glisorul, plasându-l înaintea etichetei de închidere a corpului:
Pasul 3. Plasăm următorul cod pentru a apela caruselul JS în orice fișier JavaScript existent, care este inclus în pagină după conectarea glisorului în sine:
Var aSlider = new Slider("#slider");
După cum puteți vedea, acest cod creează în esență un obiect al clasei Slider, care este conținut în popupSlider.js. De aceea ar trebui apelat numai după conectarea fișierului de clasă în sine la pagină.
Adăugarea de noi diapozitive la un carusel JavaScriptTotul este foarte simplu aici. Deoarece diapozitivele noastre sunt preluate dintr-un director separat al bibliotecii de diapozitive, atunci când adăugați imagini noi, va trebui doar să aruncați fișierele necesare în el, după ce le-ați dat mai întâi aceeași dimensiune ca și celelalte.
Și apoi în codul fișierului assets/popupSlider.html adăugați un nou bloc la container cu id slider-wrapper :
Text
În principiu, puteți pur și simplu să copiați unul similar existent și să schimbați calea către fișierul imagine și textul semnăturii (dacă este necesar).
De asemenea, va trebui să adăugați element nou navigare sub formă de cerc, deoarece pe acest moment adăugarea sa automată nu a fost încă implementată. Pentru a face acest lucru, va trebui să adăugați următorul cod în container cu id-ul slider-nav, scriindu-l la sfârșit:
Valoarea atributului data-slide trebuie să fie mai mare decât cea mai mare valoare a celorlalte elemente. Este suficient doar să crești curentul maxim cu unul.
Ambalarea caruselului JS într-un singur scriptGata, glisorul JavaScript este gata și conectat. Personal, recomand să folosiți această opțiune în practică dacă aveți nevoie de ea :)
Pentru a-i accelera funcționarea, apropo, puteți comprima și mai mult componente statice: fișiere CSS, HTML și JavaScript. Nu am făcut asta și ți-am oferit cod minimizat, pentru că acum există o mulțime de sisteme de construcție frontend: Gulp, Grunt, Webpack și altele. Și fiecare dintre ele are propriii algoritmi pentru comprimarea și conectarea fișierelor.
În plus, rezultatele reduse pot funcționa diferit pe diferite sisteme de operare. În general, există multe motive.
Și codurile sursă în sine, cred, nu sunt atât de grele încât să aibă nevoie de această procedură. Dar dacă aveți nevoie de ele, configurați singur minificarea, ținând cont de sistemul de operare și de colector.
După cum am scris la început, pentru a rezolva sarcina stabilită inițial pentru mine, trebuia să obțin un singur fișier JS pentru utilizarea corectă a glisorului meu printr-un serviciu terță parte de pe site. Din acest motiv, eu, strict vorbind, nu am folosit biblioteci gata făcute de la terți.
Apoi opțiunea unui singur Script JavaScript Caruselele vă vor fi la îndemână, deoarece... tot conținutul va fi conținut direct în acesta, inclusiv codul HTML/CSS, care în cazul unei biblioteci este stocat în fișiere separate.
În cazul meu, scenariul constă din două părți. Prima parte conținea conținutul fișierului popupSlider.js, pe care nu îl voi prezenta a doua oară. Introduceți-l singur, eliminând descrierea metodei loadStatic() și apelul acesteia din codul clasei, deoarece nu vom avea nevoie de ele.
A doua parte a unui singur script glisor JavaScript pentru site este un handler pentru evenimentul DOMContentLoaded, care are loc atunci când conținutul paginii este încărcat.
Acolo vom adăuga codul JS carusel la pagina HTML/CSS și vom crea un obiect din clasa Slider, ceea ce echivalează cu activarea slider-ului în sine.
Schematic codul arată astfel:
/* conținutul popupSlider.js fără a descrie metoda loadStatic() și apelul acesteia */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /* cod css*/ \ /* cod html*/ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider ("#slider");
Deoarece în cazul meu opțiunea de a încărca fișiere pe server a fost în general închisă, a trebuit să încarc fișiere imagine ale elementelor comenzi JavaScript carusel către cloud și în loc de căi către acestea în codul HTML și CSS, scrieți linkurile generate la salvare.
Dacă nu aveți astfel de dificultăți, atunci nu trebuie să schimbați nimic, dar nu uitați să copiați directoarele bibliotecii de diapozitive și controale pe server și să specificați căile corecte către ele.
Slider JS personalizat - perspective de dezvoltareSincer să fiu, nu intenționez să mă angajez în suport și dezvoltare direcționată a soluției pe care am creat-o :) În acest moment, există o grămadă de glisoare similare și un cărucior mic, care, spre deosebire de al meu, au propria lor istorie, sunt testate temeinic și sunt susținute de o comunitate mare de utilizatori și dezvoltatori.
Cumva nu este interesant pentru mine să încep toată această călătorie de la zero singur și să creez o altă bicicletă și nu prea am timp pentru asta. Dar, pe de altă parte, acest slider JavaScript este o oportunitate excelentă de a practica dezvoltarea prin refactorizarea codului său și implementarea de noi funcții interesante care ar putea să nu existe încă.
Deci, dacă tu, ca mine, ai nevoie baza de cod pentru experimente și aveți cel puțin ceva timp liber în plus - copiați codul slider-ului JavaScript pe care l-am descris sau alăturați-vă colaboratorilor de pe GitHub. Depozitul este deschis și am oferit un link către el la începutul articolului.
Dacă doriți să vă îmbunătățiți abilitățile de front-end cu privire la creația mea, vă pot oferi chiar și o mică listă de editări și îmbunătățiri de care are nevoie codul și care ar putea fi de interes pentru dvs. în ceea ce privește implementarea lor:
Lista de editări pe care am dat-o este, desigur, nu finală și poate fi completată. Scrieți despre sugestiile, gândurile și dorințele dvs. în comentariile de mai jos articol și împărtășiți-le prietenilor prin intermediul social media pentru a-i implica si in dezvoltare.
Vă rog să nu judecați codul meu cu strictețe, pentru că, așa cum am spus deja, nu mă consider un specialist Frontend și nu sunt. De asemenea, sunt deschis la toate comentariile tale despre stilul de codare și sper că pot învăța ceva de la tine și tu de la mine, de exemplu. îndeplini scopul principal de a dezvolta și susține produse OpenSource.
Alăturați-vă comunităților de proiect, abonați-vă la actualizări și chiar mă puteți ajuta financiar folosind formularul de sub articol în sine, dacă am putut să vă ajut cu ceva sau pur și simplu vă place ceea ce fac :)
Atât am vrut să spun! Toate cele bune! 🙂
P.S. : dacă aveți nevoie de un site web sau trebuie să faceți modificări unuia existent, dar nu există timp sau dorință pentru asta, îmi pot oferi serviciile.
Peste 5 ani de experiență în dezvoltarea profesională a site-urilor web. Lucrul cu PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular și alte tehnologii de dezvoltare web.
Experienta in dezvoltarea proiectelor diverse niveluri: pagini de destinație, site-uri web corporative, magazine online, CRM, portaluri. Inclusiv suport și dezvoltare de proiecte HighLoad. Trimiteți aplicațiile prin e-mail [email protected].
Dar, deoarece trecem peste elementele de bază ale JS, pentru a studia baza, voi descrie cum se creează glisor simplu folosind numai 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 este o utilizare standard a glisoarelor. 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”. Acesta este un instrument convenabil pentru vizualizarea imaginilor la dimensiuni mari, cu capacitatea 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. În această etapă de învățare, pentru a o implementa, vă sugerez să folosiți pure . Aceasta va schimba automat imaginile într-un cerc.
Mai jos am atașat codul aplicației mele. Ț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 aspectul cadrului, baza pentru viitorul slider */ #diapozitive(poziție: relativă; înălțime: 415px; lățime: 100%; padding: 0px; list-style-type: none; box- umbră: 0 0 7px #010, 0 0 10px albastru, 0 0 15px #010, 0 0 35px #010; ) /* Editarea afișajului imaginilor*/ img ( lățime: auto; înălțime: 390px; padding: 13px; ) /* Indicând faptul că elementele din lista de conținut vor fi afișate în centrul elementului părinte, adică î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-transition: opacitate 1,5 s; tranziție: opacitate 1,5 s; -webkit-transition: opacitate 1,5s; ) /*Când afișarea unui obiect devine vizibil și se mută în prim-plan*/ .showing( opacitate: 1; z-index: 4; )
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 un nou element de 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.
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 lui este foarte ușor să creezi spectaculoase și elemente interactive site-ul.
Î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 cursorului 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 diapozitivele î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).
Să începem cu marcajul HTML. Pagina sau șablonul HTML trebuie inserat în locul dorit.
Iată conținutul diapozitivului 1 Iată conținutul diapozitivului 2 Iată conținutul diapozitivului 3
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 */ lățime:100%; înălțime:100%; ) .sli-links( /* Butoane pentru schimbarea diapozitivelor */ 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; z-index:3; outline:none !important;) #prewbutton(stânga:10px;) #nextbutton(dreapta:10px; fundal:url(arrowBg.png) dreapta center no-repeat; ) #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, înălțimea nu trebuie specificată; 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 simple elemente ale numărului de formular care vor fi inserate cantitatea necesară automat, împreună și 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 treci cu mouse-ul peste acest element cu cursorul. Pentru comoditate, am folosit sprite-uri, care au redus numărul de imagini.
În continuare, butonul activ este proiectat. 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 slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(sageata)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(săgeată == „următorul”)( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(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("activ"); $(".control-slide").eq(slideNum).addClass("activ") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $ ( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + index + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("activ"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pauză = fals; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pauză = adevărat;), function()(pauză = fals; rotator(); )); rotator(); ));
Î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 nu vor fi (ca pe pagina principală a blogului 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(), iar 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, va funcționa declarații condiționale iar diapozitivul următor sau anterior va fi afișat corespunzător. 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:
0 1 2 3
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):
0
1
2
3
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 slideTime; 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 este tot. Citit. Acolo vom adăuga noi caracteristici acestui script.
