Pentru funcționarea corectă a exemplului, avem nevoie de biblioteca jQuery și de trei fișiere imagine numite pic1.jpg, pic2.jpg, pic3.jpg cu o dimensiune de 200x200 px.
Eșantionul de cod constă din două fișiere: slider.html și slider.js. În fișierul slider.html, marcajul HTML al blocului cu glisorul este definit, imaginile și butoanele de defilare ale cursorului sunt conținute. Fișierul slider.js conține o descriere a acțiunilor care se efectuează atunci când se apasă butoanele din stânga și din dreapta.
1. File slider.html
Stilurile sunt definite la începutul fișierului. Semnificația majorității stilurilor este eliminarea diferitelor liniuțe din elemente. la derularea glisorul aplicat calculul aritmetic folosind lățimea obiectelor și este important ca elementele nu au abateri de lățime de specificată manual, în caz contrar pot apărea în timpul defilare compensate imprevizibile și alte erori.
Structura glisorului reprezintă trei obiecte imbricate: lenta, cont și glisor.
Lenta Obiect opredeleyaet zona vizibilă a cursorului, în exemplul l-am 660 px lățime limita (acest lucru este suficient pentru 3 imagini 200x200 px cu liniuță).
Obiectul cont definește conținutul cursorului, se mișcă liber în interiorul obiectului lenta orizontal, creând un efect vizual de defilare.
Obiectul cursorului conține un tabel cu imagini afișate în cursor. În acest exemplu, nu există nici o modalitate de a face fără masă, altfel imaginile încep să se alinieze nu numai pe orizontală, ci și pe verticală, ceea ce contrazice ideea cursorului.
În plus față de cursor, butoanele left_btn ("stânga") și right_btn ("right") sunt definite în marcaj, pentru a derula cursorul în direcțiile corespunzătoare.
Operatorul de evenimente de la butoane este stocat în fișierul slider.js.
2. File slider.js
La începutul fișierului slider.js, se utilizează următoarele setări:
on_screen_pic - numărul de imagini din partea vizibilă a cursorului;
slider_diff - offset în px, pe care cursorul derulează la apăsarea butonului (trebuie să fie egal cu suma lățimii imaginii și a liniei);
Elementul aritmetic este folosit în fișierul slider.js. Algoritmul fiecărui buton este după cum urmează:
1. Determinați dacă putem încă să deplasăm glisorul în direcția specificată fără a vă sprijini pe margine;
2. Dacă putem, apoi mișcați cursorul, altfel lăsăm poziția neschimbată.
Doriți să completați materialul? - Contactați-ne: [email protected]