"JQuery biblioteka: slankmačiai jūsų svetainėje

Laikui bėgant ir technologijų plėtra web dizaino srityje keičiasi ir poreikiai / reikalavimai vartotojams turinio svetainėse. Jei anksčiau tai buvo daugiausia teksto turinį su nedideliu skaičiumi teminių vaizdų, šiandien jis yra dominuojantis komponentas grafika. Tai leidžia jums greitai gauti labiausiai reikalingą ir naudingą informaciją, o ne gaišti laiko skaityti ilgus tekstus. Ryšium su tuo vis labiau populiarėja ir, tiesą sakant, būtinas elementas tinklalapio yra slankikliai. Jie blokai su įvairaus turinio juose - nuo vaizdų nuorodas. Modernus būdas pridėti tam tikrą interneto objektą - naudojant JQuery biblioteką. Slankmačiai, sukurtus su šiuo įrankiu, gauti patogi, lengva naudoti, ir atrodo labai įspūdingas. Kitas mes pažvelgti, kaip padaryti šiuos tinklalapių elementus dėl jų pačių. Ačiū pakankamai daug standartizuotų įrankių, tai yra įmanoma įgyvendinti JQuery slankiklį tipo ir įvairų turinį.

Kaip pridėti slankiklį tinklalapyje?

Būdai pridėti skaidrių blokų į puslapio numerį. Dažnai net nereikia rašyti HTML kodą ir pasinerti į scenarijų. Yra nemažai nemokamų bibliotekų, siūlanti vartotojams gatavų šablonų, kurie leidžia pridėti JQuery slankmačiai jūsų svetainėje. Viskas, ką jums reikia padaryti - yra nukopijuoti jį į kodą savo tinklalapį ir mėgautis rezultatus. Tačiau šiuo atveju jūsų kūrybinės vaizduotės realizavimo galimybė yra ribota. Todėl ji yra naudinga, kad būtų galima sukurti dizaino elementas atskirai. 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ą.

Sukurti slankiklį save: HTML kodas

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

1. Įkurta HTML failą Demonstracija vieneto, kuris bus pateikta visa mūsų skaidrės (vaizdų ir tt).
2. Jis gulėjo ul sąrašą, iš kurių kiekviena dalis bus saugomi atskirą skaidrę.

Mes dirbame su CSS

Tada mes kreiptis į jį norimo stiliaus savybes naudojant CSS-dokumentą. Būtina nustatyti mūsų turinio JQuery slankiklį tinkamai dirbti ir turėjo tinkamą išvaizdą. Šiuo metu mes susiduriame su šiomis užduotimis:

• įsitikinkite, kad ant skaidrių vieneto rodo tik viena, tiesa tuo metu, skaidrių (arba vaizdo turinio), o likusi dalis buvo paslėpta;
• pasirūpinti skaidres vienas po kito (iš kairės į dešinę);
• padaryti ul konteineriui, kuriame saugomi skaidres kilnojamas (kairėje ir dešinėje).

Norėdami tai padaryti, nustatykite šias pasirinktis į CSS failą:

• už Slaid-Šou: perpildymo-X - slinkti, perpildymo-Y - paslėpta:
• UL: plūdė - į kairę.

Taip pat galite nustatyti, kad dalį jų pločio parametrus (plotis), aukštis (aukštis), fonas (background) ir kt.

Mes įdėti šį kodą į JQuery

buvo padaryta HTML ir CSS visi būtini pakeitimai. Belieka už jQuery kodą, slankmačiai, kuri turėtų turėti šiuos parametrus atveju:

• Skaidrės turėtų pavykti viena su kita tam tikrą laiko intervalą;
• kai užveskite pelės žymeklį ant jų judėjimo turėtų nutraukti.

Norėdami tai padaryti, mes paskelbti du kintamuosius: slidewidth (lygų skaidrę ilgio) ir slidertime (nustato skaidrių šou laikotarpis). Laikmatis bus pradėti, kai puslapis yra pilnai pakrautas svetainė. Šiuo parametru mes susieti pelės žymeklio, rodančia veiksmų šliaužiklio (kuris sustabdo skaidrių peržiūrą).

Būtinai nustatyti ul konteinerių ilgį. Tai bus lygus skaidres skaičius, padaugintas iš kiekvienos skaidrės ilgio.

Įdėkite funkciją, keisti skaidres. Tai viskas, galite patikrinti savo slankiklį efektyvumą.

išvada

Šiame straipsnyje mes pažvelgė, kaip sukurti savo JQuery slankmačiai įterpti savo svetainės puslapyje. Naudojant paprastą slankiklį pavyzdžiui, galite sugalvoti savo aiškinimo jį, todėl atitinkamus pakeitimus į išeities kodą. Tai pagerins dizainas ir pasinaudoti savo svetainę patogiau lankytojams.