"JQuery" biblioteka: slankikliai jūsų svetainei

Su laiko praeitimi ir technologijų vystymukeičiasi interneto dizaino sritys ir vartotojų poreikiai / reikalavimai turinio svetainėms. Jei anksčiau tai buvo daugiausia teksto turinys su nedideliu teminių vaizdų skaičiumi, šiandien dominuojantis grafinis komponentas. Tai leidžia jums kuo ilgiau gauti naudingos ir naudingos informacijos, o ne praleisti laiko skaityti ilgus tekstus. Šiuo atžvilgiu vis daugiau ir daugiau populiarių, be to, esminio elemento tinklalapių yra slankiklių. Jie yra blokai su įvairaus turinio - nuo vaizdų iki nuorodų. Šiuolaikinis būdas pridėti šį interneto objektą yra naudoti "JQuery" biblioteką. Slider, sukurtas naudojant šį įrankį, yra lengvas naudoti, lengvas naudoti ir labai įspūdingas. Toliau aptarsime, kaip patys kurti šiuos tinklalapio elementus. Dėl daugybės standartizuotų įrankių tampa įmanoma įdiegti įvairių tipų ir įvairų turinį "jQuery" slankiklių.

Kaip pridėti slankiklį prie tinklalapio?

Būdai, kaip pridėti slankiklių prie puslapiosvetainė keli. Dažnai jums net nereikia rašyti HTML kodo ir eiti į scenarijų. Yra nemažai nemokamų bibliotekų, siūlanti vartotojams gatavų šablonų, kurie leidžia pridėti JQuery slankmačiai jūsų svetainėje. Viskas, ko jums reikia, yra nukopijuoti jį į savo svetainės šaltinio kodą ir mėgautis rezultatu. Tačiau šiuo atveju jūsų kūrybinių fantazijų realizavimo galimybės yra riboti. Todėl nereikės pats sukurti šio dizaino elemento. Norėdami tai padaryti, jums reikia žinoti, kaip įgyvendinti jQuery paprastą slankiklį, ir tik komplikuoja tai, jūs visada galite pridėti papildomų elementų kodą.

Sukurkite slankiklį pats: HTML kodas

Pirma, kur pradėti - yra registruoti būsimą išdėstymą slankiklį.

1. Sukurkite slideshow bloką HTML rinkmenoje, kurioje bus visi mūsų skaidres (nuotraukos ir tt).
2. Jame mes pateikiame ul sąrašą, kurio kiekvienas elementas saugo atskirą skaidrę.

Darbas CSS

Tada mes pritaikome reikiamas savybesstilius, naudojant CSS dokumentą. Būtina, kad sukurtas "JQuery" turinio slankiklis veiktų teisingai ir turi reikiamą formą. Šiame etape mes turime šias užduotis:

• Norėdami įsitikinti, kad skaidrių demonstravimo blokas (šiuo metu reikalingas paveikslėlis ar turinys) rodomas tik vienas skaidres, o likusi dalis buvo paslėpta;
• sutvarkyti skaidres po vieną (iš kairės į dešinę);
• padėkite "ul-konteinerį, kuriame laikomi skaidres, judančią (kairėn ir dešinėn).

Norėdami tai padaryti, CSS byloje nustatome šiuos parametrus:

• slideshow: perpildymas-x-scroll, overflow-y - hidden:
• for ul: float - left.

Taip pat galite nustatyti pločio, aukščio, fono ir pan.

Mes rašome kodą jQuery

HTML ir CSS buvo atlikti visi būtini pakeitimai. Dar lieka dirbti už JQuery kodo, slankikliais, kuriuose turėtų būti šie parametrai:

• skaidres turėtų būti pakeistos viena su kita tam tikru laiko tarpu;
• Kai užveskite pelės žymeklį, judėjimas turėtų būti sustabdytas.

Už tai mes deklaruojame du kintamuosius: slidewidth (lygus skaidrių ilgio) ir slidertime (laikotarpis apibrėžia skaidrių peržiūrą). Laikmatis bus paleistas, kai svetainės puslapis bus visiškai įkeltas. Į šį parametrą susiejamas pelės žymeklio žymėjimas ant skaidrės (kuris sustabdo skaidrę).

Būtinai nurodykite konteinerio ul ilgį. Tai bus lygus skaidrėms, padaugintoms iš kiekvieno skaidrių ilgio.

Įterpiame funkciją, atsakingą už skaidrių keitimą. Tai viskas, jūs galite patikrinti savo slankiklio darbą.

Išvada

Šiame straipsnyje mes pažvelgėme kaipSavarankiškai sukurkite "jQuery" sliderius, kuriuos norite įterpti į savo svetainės puslapį. Naudodamiesi paprasto slankiklio įdiegimo pavyzdžiu, galite sukurti savo interpretavimo variantus, atlikdami atitinkamus šaltinio kodo pakeitimus. Tai pagerins dizainą ir leis patogiau naudotis jūsų svetaine.