JQuery library: klizači za vaše web stranice

S vremenom i razvojem tehnologije u području web dizajna se mijenjaju i potrebe / zahtjeve korisnika za sadržaj web-mjesta. Ako je ranije bilo je uglavnom tekstualni sadržaj sa malim brojem tematskih fotografija, danas je dominantna komponenta slike. To vam omogućuje da brzo dobili najviše potrebne i korisne informacije, a ne gubiti vrijeme na čitanje dugih tekstova. U vezi s tim sve popularniji i, u stvari, nužan element web stranice su klizači. Oni su blokovi s različitim sadržajem u njima - od slika na linkovima. Moderna način za dodavanje zadani web objekt - pomoću jQuery biblioteku. Klizači stvorene s ovim alatom, dobiti udoban, jednostavan za korištenje, i izgleda vrlo impresivno. Dalje smo pogledati kako napraviti ove elemente web stranice na svoje vlastite. Zahvaljujući dovoljno velik broj standardiziranih alata, moguće je provesti jQuery klizač tip i raznolik sadržaj.

Kako dodati klizača na web stranici?

Načini dodavanja slide blokova na stranicu broj. Često ni ne morate pisati HTML-kod i prekapati u pismu. Postoji znatan broj slobodnih knjižnica, nudeći korisnicima gotove predloške koji omogućuju dodavanje jQuery klizač na svoje stranice. Sve što trebate učiniti je - da ga kopirati u izvorni kod vaše web stranice i uživati u rezultatima. Međutim, u ovom slučaju mogućnost realizacije vašeg kreativne mašte je ograničen. Dakle, to je korisno biti u mogućnosti to stvoriti element dizajna samostalno. Da biste to učinili, morate znati kako provesti jQuery jednostavan klizač, a samo ga kompliciraju, uvijek možete dodavanjem dodatnih elemenata u kodu.

Stvaranje klizač po sebi: u HTML kodu

Prvo, gdje je za početak - je da se registrirate budući izgled klizača.

1. Osnovana je u HTML-datoteka Slideshow jedinice, koja će sadržavati sve naše guranje (slike, itd).
2. Ona stavi ul popis, svaki stavak koji će pohraniti poseban tobogan.

Radimo na CSS

Onda smo se primjenjivati na nju karakteristike željenog stila pomoću CSS-dokument. Potrebno je nametnuti naš sadržaj jQuery klizač kako bi ispravno funkcionirao i imao pravo gledati. U ovoj fazi, mi smo suočeni sa sljedećim zadacima:

• pobrinite se da na Slideshow jedinici prikazuje samo jedna, upravo u ovom trenutku slajd (ili sadržaj slika), a ostalo su bili skriveni;
• organizirati jedan iza drugoga (s lijeva na desno) slajdove;
• učiniti ul-kontejner, koji pohranjuje slajdove pokretni (lijevo i desno).

Da biste to učinili, postavite sljedeće opcije u CSS-datoteku:

• za Slideshow: preljeva-x - dođite, overflow-y - skrivena:
• za Ul: float - lijevo.

Također možete postaviti parametre širine (širina), visina (visina), pozadina (background) i tako dalje.

Mi smo stavili ovaj kod u jQuery

HTML i CSS sve potrebne su promjene napravljene. Ostaje slučaj za jQuery koda, klizača, koji bi trebao imati sljedeće parametre:

• Stakalca se trebaju uspjeti međusobno određenom vremenskom intervalu;
• kada prelazite pokazivač miša iznad njihovog kretanja treba prestati.

Da biste to učinili, izjavljujemo dvije varijable: slidewidth (koji je jednak duljini slide) i slidertime (određuje razdoblje slide show). Vremena će započeti kada je stranica u potpunosti učita stranica. Ovim parametrom se vezati akciju od miša koji upućuju na slajd (koji zaustavlja slide show).

Budite sigurni da se propisati ul dužine kontejnera. To će biti jednak broj slajdova, pomnožen duljina svaki slajd.

Umetnite funkcija odgovorna za mijenjanje slajdova. To je sve, možete provjeriti performanse vašeg klizač.

zaključak

U ovom članku smo pogledali kako stvoriti vlastite jQuery klizač za umetanje stranicu svoje web stranice. Na primjeru jednostavnog klizač, možete doći sa svojim vlastitim tumačenjem toga, što odgovarajuće izmjene u izvornom kodu. To će poboljšati dizajn i iskoristiti svoje stranice više prikladan za posjetitelje.