JQuery knjižnica: drsniki za vašo spletno stran

Sčasoma in razvoj tehnologij na področju spletnega oblikovanja se spreminjajo in potrebe / zahteve uporabnikov za vsebino spletnih strani. Če je bila prej vsebovana predvsem besedilna vsebina z majhnim številom tematskih slik, je danes grafična komponenta prevladujoča. Omogoča vam, da v kratkem času dobite največ koristnih in koristnih informacij in ne izgubljate časa, da bi prebrali dolga besedila. V zvezi s tem so vse bolj priljubljene in poleg tega bistveni element spletnih strani drsniki. So bloki z različno vsebino v njih - od slik do povezav. Sodoben način dodajanja tega spletnega predmeta je uporaba knjižnice JQuery. Drsniki, ustvarjeni s pomočjo tega orodja, so enostavni za uporabo, enostavni za uporabo in izgledajo zelo impresivno. Nato bomo preučili, kako naj sami izdelamo te elemente spletne strani. Zahvaljujoč številnim standardiziranim orodjem postane mogoče izvajati drsnike jQuery različnih vrst in različne vsebine.

Kako dodati drsnik na spletno stran?

Načini dodajanja drsnikov na strani mesta več. Pogosto vam ni treba pisati HTML kode in iti v skript. Obstaja veliko brezplačnih knjižnic, ki uporabnikom ponujajo že pripravljene predloge, ki omogočajo dodajanje drsnikov jQuery na vašo spletno stran. Vse, kar se zahteva od vas, je, da ga kopirate v izvorno kodo vaše spletne strani in uživate v rezultatu. Vendar pa so v tem primeru možnosti za uresničitev ustvarjalnih fantazij omejene. Zato bo odveč, da bi lahko sami ustvarili ta oblikovni element. Če želite to narediti, morate vedeti, kako izvajati preprost drsnik jQuery, zato ga lahko vedno kompliciramo tako, da kode dodate dodatne elemente.

Ustvarite drsnik sami: koda v HTML

Prva stvar, ki jo je treba začeti, je registracija postavitve prihodnjega drsnika.

1. Ustvarite blok diapozitiva v datoteki HTML, ki vsebuje vse naše diapozitive (slike, itd.).
2. V njej smo postavili seznam ul, katerega element bo shranil ločen diapozitiv.

Delo v CSS

Nato uporabite želene značilnosti sloga z uporabo dokumenta CSS. Potrebno je, da drsnik vsebine JQuery, ki smo ga ustvarili, deluje pravilno in ima zahtevan obrazec. Na tej stopnji imamo naslednje naloge:

• Prepričajte se, da je v bloku diapozitivov prikazan le en diapozitiv (slika ali vsebina, ki je trenutno potrebna), ostalo pa skrite;
• razporedi diapozitive eno za drugim (od leve proti desni);
• naredite ul-vsebnik, v katerem so diapozitivi shranjeni, premični (levo in desno).

Če želite to narediti, v datoteki CSS nastavimo naslednje parametre:

• za diaprojekcijo: overflow-x-scroll, overflow-y - skrit:
• za ul: plovec - levo.

Nastavite lahko tudi širino, višino, ozadje in tako naprej.

Pišemo kodo v jQuery

V HTML in CSS so bile vse potrebne spremembe. Še vedno deluje za kodo JQuery, pri čemer morajo drsniki imeti naslednje parametre:

• diapozitive je treba zamenjati med seboj z določenim časovnim intervalom;
• ko lebdite kazalec miške njihovo gibanje bi se moralo ustaviti.

Če želite to narediti, navedite dve spremenljivki: slidewidth (enak dolžini diapozitiva) in slidertime (določi obdobje spremembe diapozitiva). Časovnik se bo začel, ko bo stran mesta v celoti naložena. V ta parameter smo vezali na gibanje miškinega kazalca na drsniku (ki ustavi spremembo diapozitiva).

Določite dolžino vsebnika ul. To bo enako številu diapozitivov, pomnoženo z dolžino vsakega diapozitiva.

Vstavimo funkcijo, ki je odgovorna za spreminjanje diapozitivov. To je vse, lahko preverite delo vašega drsnika.

Zaključek

V tem članku smo pogledali, kako ustvariti drsnike jQuery sami. Z uporabo preprostega izvajanja drsnika lahko ustvarite lastne različice njene razlage, s čimer ustrezno spremenite izvorno kodo. To bo izboljšalo oblikovanje in naredilo uporabo vaše strani bolj priročno za obiskovalce.