JQuery biblioteek: sliders vir jou webwerf

Met die verloop van tyd en die ontwikkeling van tegnologie op die gebied van web ontwerp verander en die behoeftes / vereistes van die gebruikers oor na inhoud webwerwe. Indien vroeër was dit meestal teks inhoud met 'n klein aantal tematiese beelde, vandag is dit die dominante komponent van die grafiese. Dit laat jou toe om die mees noodsaaklike en nuttige inligting vinnig te kry, en moenie tyd mors lees lang tekste. In verband met hierdie toenemend gewild en, in werklikheid, 'n noodsaaklike element van 'n webblad is sliders. Hulle is blokke met wisselende inhoud in hulle - van beelde om links. met behulp van jQuery biblioteek - 'n moderne manier om 'n gegewe web voorwerp te voeg. Sliders geskep met hierdie hulpmiddel, kry 'n gemaklike, maklik om te gebruik, en lyk baie indrukwekkend. Volgende kyk ons na hoe om hierdie elemente van webblaaie maak op hul eie. Te danke aan 'n voldoende groot aantal gestandaardiseerde instrumente, is dit moontlik om die implementering van die jQuery skuiwer-tipe en diverse inhoud.

Hoe om 'n schuifbalk op 'n webblad te voeg?

Maniere om 'n skyfie-blokke te voeg aan die bladsy nommer. Dikwels nie eens aan HTML-kode te skryf en duik in die script. Daar is 'n groot aantal van die vrye biblioteke, wat die gebruikers 'n gereed gemaak templates wat toelaat dat jy JQuery-sliders te voeg op jou site. Al wat jy hoef te doen - is om dit te kopieer na die bronkode van jou webblad en geniet die resultate. Maar in hierdie geval die moontlikheid van die verwesenliking van jou kreatiewe verbeelding beperk. Daarom is dit nuttig om in staat wees om die ontwerp element onafhanklik te skep. Om dit te doen, moet jy weet hoe om die jQuery eenvoudige schuifbalk te implementeer, en bemoeilik dit net, jy kan altyd die toevoeging van ekstra elemente in die kode.

Skep 'n skuiwer deur jouself: in die HTML-kode

In die eerste plek waar om te begin - is om die toekomstige uitleg van die schuifbalk te registreer.

1. Gestig in HTML-lêer Slideshow eenheid, wat sal al ons skyfies bevat (beelde, ens).
2. Dit lê ul lys, elke paragraaf van wat sal 'n aparte skyfie te stoor.

Ons is besig om met CSS

Dan pas ons om dit die eienskappe van die verlangde styl met behulp van CSS-dokument. Dit is nodig om ons inhoud JQuery schuifbalk te lê om behoorlik te werk en het die reg kyk. Op hierdie stadium het ons te make met die volgende take:

• seker te maak dat op die skyfievertoning eenheid vertoon slegs een, reg op die oomblik die skyfie (of 'n foto inhoud), en die res is weggesteek;
• rangskik die skyfies een na die ander (links na regs);
• doen ul-houer, wat skyfies roerende (links en regs) slaan.

Om dit te doen, stel die volgende opsies in die CSS-lêer:

• vir die Slideshow: oorloop-x - blaai, oorloop-y - verborge:
• vir ul: float - links.

Verder kan jy die parameters van die wydte (breedte), hoogte (hoogte), agtergrond (agtergrond) en so uiteengesit.

Ons het hierdie kode in JQuery

Die HTML en CSS al die nodige veranderinge gemaak. Dit bly die geval vir die jQuery kode, sliders, wat die volgende parameters moet hê:

• Skyfies moet mekaar daarin slaag om met 'n sekere tyd interval;
• wanneer jy hover die muis wyser bo-oor hul beweging moet ophou.

Om dit te doen, verklaar ons twee veranderlikes: slidewidth (gelyk aan die lengte van die skyfie) en slidertime (bepaal die tydperk van die slide show). Die timer sal begin wanneer die bladsy is ten volle gelaai site. Deur hierdie parameter bind ons die optrede van die muis wyser dui op 'n skyfie (wat die slide show stop).

Maak seker dat jy ul houer lengte voorskryf. Dit sal gelyk wees aan die aantal skyfies, vermenigvuldig met die lengte van elke skyfie wees.

Voeg die funksie verantwoordelik is vir die verandering van skyfies. Dit is al wat jy kan die prestasie van jou schuifbalk na te gaan.

gevolgtrekking

In hierdie artikel het ons gekyk na hoe om hul eie JQuery-sliders te skep om 'n bladsy van sy webwerf te plaas. Die gebruik van die voorbeeld van 'n eenvoudige skuiwer, kan jy kom met hul eie interpretasie daarvan, maak die nodige veranderings aan die bron-kode. Dit sal die ontwerp te verbeter en maak gebruik van jou site meer gerieflik vir besoekers.