Realizarea unui glisor în JavaScript cu propriile mâini. Cel mai de succes plugin pentru carusel jQuery
Dar, deoarece trecem peste elementele de bază ale JS, pentru a studia baza, voi descrie cum se creează glisor simplu doar cu ajutorul limbaj JavaScript. Ei bine, să începem să analizăm materialul!
Ce tipuri de glisoare există și unde ar putea fi necesare?Crearea unor galerii convenabile pentru vizualizarea imaginilor este necesară pentru toate serviciile web care conțin cel puțin câteva fotografii. Acestea pot fi magazine online, site-uri de portofoliu, servicii de știri și educaționale, site-uri web ale companiilor și unităților de divertisment cu reportaje foto etc.
Cu toate acestea, aceasta aplicație standard glisoare. Astfel de tehnologii sunt, de asemenea, folosite pentru a atrage clienții către bunuri și servicii promoționale sau pentru a descrie avantajele întreprinderilor.
În cea mai mare parte, clienții cer să o implementeze pe galerii de tip „Carusel”. Acest instrument la îndemână pentru a vizualiza imagini la dimensiuni mari, cu posibilitatea utilizatorului de a comuta diapozitivele înainte și înapoi. În acest caz, imaginile în sine se schimbă de obicei automat după un 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 . Va fi comutator automat imagini în cerc.
Mai jos am atasat codul programului aplicatia ta. Ți-am lăsat comentarii așa cum am codificat.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Comutator automat de imagini /*Descrie aspect cadru, baza pentru viitorul glisor */ #slides( poziție: relativă; înălțime: 415px; lățime: 100%; umplutură: 0px; tip list-style: niciunul; umbră casetă: 0 0 7px #010, 0 0 10px albastru , 0 0 15px #010, 0 0 35px #010; ) /* Editez afișarea imaginilor*/ img ( lățime: auto; înălțime: 390px; padding: 13px; ) /* Indică faptul că conținutul elementele din listă vor fi afișate în centrul elementului părinte, adică. î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 element nou colecție, care va fi afișată pe ecran. Pentru a face acest lucru iau poziția curentă +1. Poate ați observat că folosesc și împărțirea cu un rest (%) după numărul de diapozitive disponibile. Acest truc cu urechile este necesar pentru a începe spectacolul într-un nou cerc. Cam așa ar arăta literalmente.
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 trebui să fie un script JS, care, prin serviciu terț M-as conecta la site. Î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 Marcaj HTML caruselul 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:
Și marcaj HTML și Stiluri CSS am adus 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 uităm că în JavaScript valoarea acestuia depinde de contextul apelului, astfel încât în corpurile unor metode în care a fost necesar să apelați metode și proprietăți ale unei clase, 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 cele din urmă, 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. Pentru asta există biblioteci speciale, de exemplu, pentru a conecta HTML la 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 conecta fișier CSSîn JavaScript. Elementul generat este conectat chiar la capătul secțiunii HTML al corpului codul 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 celor principale elemente HTML, pe care îl 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 Prezentarea de diapozitive diferă destul de puțin de un glisor 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 aceasta metoda Am copiat codul din evenimentul de clic pe butoanele comutatorului manual cu glisare și l-am plasat în interiorul apelului Funcții JavaScript 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 slide show-ul trece la ciclu nou, iar afișajul pornește din nou de la primul element.
În timp ce lucram cu diferite biblioteci JS pentru carusele de imagini și recenzii, am observat asta această practică dezvoltatorii folosesc activ, dar cu unele adaosuri. În toate soluțiile pe care le-am văzut, prezentarea automată de diapozitive este întreruptă dacă utilizatorul a făcut-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ă le plasați în el fisierele necesare, care le-a dat anterior aceeași dimensiune ca și celelalte.
Și apoi în codul fișierului assets/popupSlider.html add bloc nouîn container cu înveliș glisor-id:
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 un nou element de navigare sub forma unui 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. Eu personal recomand folosirea această opțiuneîn practică, dacă ai nevoie de el :)
Pentru a-i accelera funcționarea, apropo, puteți comprima și mai mult componentele statice: CSS, HTML și Fișiere 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 un singur scenariu Caruselul JavaScript vă va fi util, 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 aceleiași Script JavaScript Glisorul 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 dat JavaScript glisorul este o oportunitate excelentă de a practica dezvoltarea prin refactorizarea codului său și implementarea altora noi caracteristici interesante, care poate 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 rețelele de socializare pentru a-i implica și pe aceștia în 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].
1. Carusel jQuery „clickCarousel”
Blocați cu anunțuri de știri care se defilează. Folosiți săgețile stânga/dreapta pentru a derula prin blocuri. În arhivă există un carusel în două styling: lumina si intuneric.
1. Carusel jQuery, plugin „carouFredSel”
Un carusel de imagini curat și proaspăt în jQuery.
4. plugin jQuery: carusel „Elastislide”
Glisoare de conținut grozave sub forma unui carusel de imagini cu folosind jQuery. Pagina demonstrativă descrie cum să atașați acest carusel la site-ul dvs.
Plugin „Slider Kit”, un carusel ușor cu căi diferite sul.
7. carusel javascript
Navigare originală între miniaturile imaginilor. Pentru a vedea efectul în partea dreaptă a paginii demo, faceți clic pe butoanele Sus și Jos. Această soluție jQuery oferă, de asemenea, un efect de hover asupra miniaturii și derularea cu rotița mouse-ului.
9. Carusel ușor 10. Carusel realizat din blocuri „Easy Paginate”.
Plugin jQuery „Easy Paginate”. Fiecare bloc dreptunghiular reprezintă un element obișnuit din listă, iar dacă există mai mult de trei elemente, atunci pentru a le vizualiza pe toate trebuie să utilizați navigarea sub formă de glisor (folosind săgețile înainte și înapoi și folosind butoanele de navigare din partea de jos).
11. Rotator vertical Ticker
Rotator vertical pe jQuery: defilare automată a conținutului de pe pagină. Sunt furnizate butoane de navigare, precum și posibilitatea de a opri rotația și de a o reporni. Când treceți cursorul mouse-ului, mișcarea se oprește. La nivel de marcare HTML, blocurile de defilare sunt reprezentate de elemente obișnuite din listă.
12. javascript css zona de defilare
soluție javascript „TinyScroller” pentru a crea o zonă de defilare plasată într-un container DIV.
13. Pluginul jQuery „Smooth Div Scroll”
Plugin pentru implementare defilare orizontală conținut într-un anumit domeniu. Când treceți mouse-ul peste marginea din stânga sau din dreapta zonei, începe derularea.
Navigarea între diapozitivele de conținut se poate face folosind săgeți sau făcând clic pe miniatură. În partea de jos există un buton „Afișați” care vă permite să ascundeți/afișați miniaturile sau o descriere completă a diapozitivului.
15. Rotatorul de conținut „Carusel de conținut circular”
Un bloc cu un scroller care apare atunci când treceți cursorul. Puteți derula conținut folosind fie bara de defilare, fie rotița mouse-ului.
Această soluție jQuery a fost inspirată de un efect similar pe site-ul Apple. Dezvoltatorii acestei corporații au găsit întotdeauna solutii interesante, care a inspirat webmasteri din întreaga lume. Pentru a demonstra pluginul, selectați o categorie din listă.
19. Slider minunat
Glisorul este generat automat. Datele cu numele produsului, descrierea, linkul și adresa imaginii sunt preluate din fișierul slider.db.txt. Tehnologii folosite: CSS, PHP, jQuery.
20. Rotirea blocurilor folosind jQuery
Pentru a vedea efectul de rotație a blocurilor, faceți clic pe unul dintre dreptunghiurile mici de pe pagina demo
Un plugin de defilare a conținutului, de exemplu, poate fi folosit pentru a afișa cele mai recente știri sau pentru a afișa fluturași Twitter pe un site web.
22. Bloc dinamic „Recenzii clienților”
Rotirea automată a conținutului blocului. Tehnologii utilizate: PHP, XML, CSS, jQuery.
Acest plugin convertește elementele din listă (ul li) în elemente carusel jQuery.
26. carusel javascript „ImageFlow”
Este ușor să defilați prin imagini folosind rotița mouse-ului.
27. Derularea conținutului
Un bloc compact cu anunțul celor mai recente materiale pe site sau știri. Coloana din stânga afișează o listă paginată cu anunțuri scurte cu cele mai recente știri. Când selectați unul dintre ele, în coloana din dreapta sunt afișate mai multe descriere detaliata si un link de citit text complet publicații. Implementat folosind jQuery.
Imaginile cu linkuri sunt derulate, când treceți cu mouse-ul, defilarea se oprește și apare bara de navigare. Când treceți mouse-ul peste o imagine, numele acesteia este de asemenea afișat între butoanele de control. Arata foarte bine pe pagina
33. Derularea conținutului, pluginul Mootools „Scrollbar”
Defilarea se face folosind atât bara de defilare, cât și rotița mouse-ului.
Într-o zi, prietenii mei au decis să-mi facă o surpriză plăcută. Surpriza în sine a fost foarte simplă; a necesitat un tricou foarte obișnuit, fără niciun model.
Și apoi s-au confruntat cu o problemă - toate tricourile din magazine aveau imagini pe ele. Nu au putut găsi cel mai simplu tricou fără poze. Cred că ați întâmpinat o problemă similară când nu puteți găsi cel mai simplu lucru.
Și este aceeași poveste cu caruselele; aproape toate caruselele au deja un design. Și aproape întotdeauna aveți nevoie de un carusel curat, pe care apoi îl puteți proiecta așa cum a intenționat designerul.
Prin urmare, pentru a vă bucura imediat de a lucra cu carusele și pentru a le face rapid, vă sugerez să utilizați următorul plugin.
Plugin jQuery pentru un carusel curat și puternicLucrul tare la acest plugin este că nu are design și este mult mai ușor de lucrat cu el decât alte plugin-uri frumoase.
Poate fi decorat în orice fel doriți.
Și așa, iată acest plugin: Owl Carousel.
Instalarea pluginului1. Conectați jQuery, dacă nu este încă conectat, de exemplu așa
2. Copiați fișierele plugin în folderul site-ului
- Despachetarea
- Copiați folderul bufniță-carusel pe site
3. Conectați aceste fișiere la site:
4. Adăugați codul în pagină
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Lansați pluginul
$(document).ready(function())( // Găsiți blocul carusel var carusel = $("#carusel"); // Lansați pluginul carusel carousel.owlCarousel(); ));
6. Ne aranjam
/* Bloc principal */ .owl-wrapper-outer ( chenar: 1px solid #777; border-radius: 5px; overflow: hidden; fundal: alb; ) /* 1 carusel pătrat */ .carusel-element ( padding: 30px ; text-align: center; font-size: 300%; margine-dreapta: 1px solid #777; )
Butoanele Înapoi și ÎnainteÎn acest exemplu, voi arăta nu cea mai rapidă, ci cea mai universală metodă.
1. Adăugați butoanele în sine
2. Atașarea butoanelor la pluginul carusel
După lansarea pluginului, adăugați codul
// Înapoi // Când faceți clic pe "Înapoi" $("#js-prev").click(function () ( // Începeți înapoi spre stânga carousel.trigger("owl.prev"); return false; )); // Înainte // Când faceți clic pe „Înainte” $("#js-next").click(funcție () ( // Începeți derularea înapoi la dreapta carusel.trigger("owl.next"); return false; ) );
Acum, când faceți clic pe „Înapoi” și „Înainte”, va fi declanșată derularea înapoi.
MarkereAcestea sunt punctele care arată unde suntem acum.
Ele pot fi activate la rularea pluginului prin adăugarea următorului parametru
// Lansați pluginul carusel carousel.owlCarousel(( // Puncte sub paginarea caruselului: true ));
/* Bloc cu puncte */ .owl-pagination ( text-align: center; /* Aliniați punctele la mijloc */ ) /* 1 Punct */ .owl-page ( lățime: 10px; înălțime: 10px; chenar: 1px continuu #777; afișare: bloc în linie; fundal: alb; margine: 10px; rază chenar: 5px; ) /* Punct activ */ .owl-page.active ( fundal: #777; )
Pentru a afișa doar 1 blocAcest lucru este destul de des necesar, pentru aceasta adăugăm următorul parametru
// Lansează pluginul carusel carousel.owlCarousel(( singleItem: true, // Afișează doar 1 bloc la lățime completă ));
Număr diferit de blocuri pe diferite dispozitiveO caracteristică foarte utilă care vă permite să creați un carusel adaptiv pentru dispozitivele mobile.
// Lansați pluginul carusel carousel.owlCarousel(( // Numărul de blocuri afișate // în funcție de dispozitiv (lățimea ecranului) // Numărul de blocuri pe elemente de ecrane mari: 10, // 5 blocuri pe computere (ecran de la 1400px la 901px) itemsDesktop : , // 3 blocuri pe computere mici (ecran de la 900px la 601px) itemsDesktopSmall: , // 2 elemente pe tablete (ecran de la 600 până la 480 pixeli) itemsTablet: , // Setările telefonului sunt dezactivate, în acest caz acestea va // fi folosit setările tabletei articoleMobil: false ));
Ce fel de surpriză este asta?Prietenii vin la petrecerea mea de naștere, zâmbesc bucuroși, deliciul este debordant. Ei îmi oferă solemn un cadou.
Îl deschid și mă uit la tricou. o desfac. La naiba, ce prostie. Văd 3 fotografii cu mine pe acest tricou. Mi-am pus un tricou și toată lumea începe să râdă, a ieșit stupid și amuzant.
