JQuery bibliotek: glidebrytere for ditt nettsted

Med passering av tid og utvikling av teknologi innen webdesign er i endring og behovene / kravene til brukerne til innholdssider. Hvis tidligere var det stort sett tekstinnhold med et lite antall tematiske bilder, i dag er det den dominerende del av grafikken. Det gjør at du raskt får mest nødvendig og nyttig informasjon, og ikke kaste bort tid på å lese lange tekster. I forbindelse med denne stadig mer populære og, faktisk, et nødvendig element i en web-side er skyveknapper. De er blokker med varierende innhold i dem - fra bilder til linker. En moderne måte å legge til en gitt nettside objekt - ved hjelp av jQuery biblioteket. Sliders opprettet med dette verktøyet, får en behagelig, lett å bruke, og ser veldig imponerende. Neste vi se på hvordan å gjøre disse elementene av web-sider på egenhånd. Takket være et tilstrekkelig stort antall standardiserte verktøy, er det mulig å implementere jQuery glidebryteren-type og variert innhold.

Hvordan legge til en glidebryter på en nettside?

Måter å legge til en slide-blokker til siden nummeret. Ofte trenger ikke engang å skrive HTML-kode og gå dypere inn i manuset. Det er et betydelig antall gratis biblioteker, og tilbyr brukerne en ferdige maler som lar deg legge til jQuery-glidere på nettstedet ditt. Alt du trenger å gjøre - er å kopiere den inn i kildekoden til websiden din og nyte resultatet. Men i dette tilfellet muligheten for realisering av dine kreative fantasi er begrenset. Derfor er det nyttig å være i stand til å skape den designelement uavhengig av hverandre. For å gjøre dette, må du vite hvordan du skal gjennomføre JQuery enkel glideren, og bare komplisere det, kan du alltids legge til ekstra elementer i koden.

Lag en glider selv: i HTML-koden

Først, hvor du skal begynne - er å registrere fremtiden utformingen av glidebryteren.

1. Etablert i HTML-fil Lysbilde enhet, som vil inneholde alle våre lysbilder (bilder, etc.).
2. Det lå ul-listen hvert avsnitt som vil lagre et eget lysbilde.

Vi jobber med CSS

Deretter bruker vi til det som kjennetegner ønsket stil ved hjelp av CSS-dokument. Det er nødvendig å pålegge vårt innhold jQuery glidebryteren for å fungere ordentlig og hadde det rette utseendet. På dette stadiet, står vi overfor følgende oppgaver:

• sørge for at på lysbilde enheten viser bare en, ikke sant i det øyeblikket lysbildet (eller bildeinnhold), og resten ble skjult;
• ordne lysbildene etter hverandre (venstre til høyre);
• do ul-beholder, som lagrer glir bevegelig (venstre og høyre).

For å gjøre dette, angi følgende alternativer i CSS-filen:

• for Fremvisning: flow-x - bla, flow-y - skjult:
• for ul: float - venstre.

Også du kan sette parametrene av bredden (bredde), høyde (høyde), bakgrunn (bakgrunn) og så videre.

Vi legger denne koden i JQuery

Det er gjort HTML og CSS alle de nødvendige endringene. Det gjenstår saken for jQuery kode, glidere, som skal ha følgende parametre:

• Slides bør lykkes hverandre med et visst tidsintervall;
• når du holder musepekeren over deres bevegelse bør opphøre.

For å gjøre dette, erklærer vi to variabler: slidewidth (lik lengden av glide) og slidertime (bestemmer perioden av fremvisningen). Timeren vil starte når siden er ferdig lastet nettstedet. Ved denne parameteren vi knytte virkningen av pekeren peker til en sleide (som stopper fremvisningen).

Sørg for å foreskrive ul beholder lengden. Det vil være lik det antall lysbilder, multiplisert med lengden av hvert lysbilde.

Sett funksjonen ansvarlig for å skifte lysbilder. Det er alt, du kan sjekke ytelsen til glidebryteren.

konklusjon

I denne artikkelen har vi sett på hvordan å lage sine egne jQuery-glidere for å sette inn en side av nettstedet. Bruke eksempel på en enkel skyveknapp, kan du komme opp med sin egen tolkning av det, gjør de nødvendige endringene i kildekoden. Dette vil forbedre design og gjøre bruk av nettstedet mer praktisk for besøkende.