JQuery kirjasto: liukusäädintä sivustollesi

Kanssa ajan kulumisen ja teknologian kehitys alalla web design muuttuvat ja tarpeet / vaatimukset käyttäjiä sisältösivustoissa. Jos aiemmin se oli lähinnä tekstisisältö pienellä määrästä temaattisia kuvia, tänään se on hallitseva osa graafisen. Sen avulla voit nopeasti saada eniten tarpeen ja hyödyllistä tietoa, ja älä tuhlaa aikaa lukea pitkiä tekstejä. Tässä yhteydessä yhä suositumpia, ja itse asiassa, joka on yksi osa web-sivu ovat liukusäädintä. Ne ovat lohkoja sisältö vaihtelee niissä - kuvista linkkeihin. Nykyaikainen tapa lisätä tietyn verkkosivun tarkoitus - jQuery-kirjaston. Liukusäätimiä luotu tätä työkalua, saat mukava, helppokäyttöinen, ja näyttää erittäin vaikuttava. Seuraava katsomme miten nämä elementit verkkosivujen omasta. Kiitos riittävän suuri joukko standardoituja välineitä, on mahdollista toteuttaa jQuery liukusäädintä-tyypin ja monipuolista sisältöä.

Kuinka lisätä liukusäädintä verkkosivulla?

Tapoja lisätä dia-lohkoja sivun numeron. Usein ei tarvitse edes kirjoittaa HTML-koodia ja kaivaa käsikirjoituksen. On huomattava määrä vapaata kirjastoja, jotka tarjoavat käyttäjille valmiita malleja, joiden avulla voit lisätä jQuery liukusäädintä sivuston. Kaikki mitä tarvitsee tehdä - on kopioida se lähdekoodiin Web-sivun ja nauttia tuloksista. Kuitenkin tässä tapauksessa mahdollisuus toteutumista luovaa mielikuvitusta on rajallinen. Näin ollen, se on hyödyllistä pystyä luomaan sisustuselementin itsenäisesti. Voit tehdä tämän, sinun täytyy tietää, miten toteuttaa jQuery yksinkertainen liukusäädintä ja mutkistavat sitä, voit aina lisätä ylimääräisiä elementtejä koodissa.

Luo liukusäädintä itse: HTML-koodin

Ensinnäkin, mistä aloittaa - on rekisteröidä tulevaisuudessa ulkoasu liukusäädintä.

1. Perustettiin vuonna HTML-tiedostoon diaesitys yksikkö, joka sisältää kaikki meidän dioja (kuvia jne).
2. Se antaa ul lista, jokainen kohta joka tallentaa erillisen liukumäki.

Teemme CSS

Sitten soveltaa siihen ominaisuuksia halutun tyylin CSS-asiakirja. On tarpeen asettaa meidän sisältöä JQuerya liukusäädintä toimimaan oikein ja oli oikean ilmeen. Tässä vaiheessa joudumme seuraavat tehtävät:

• Varmista, että diaesitysnäytöltä laite näyttää vain yksi, oikea tällä hetkellä luistin (tai kuvan sisältö), ja loput olivat piilossa;
• Järjestetään levyt peräkkäin (vasemmalta oikealle);
• do ul-kontti, joka tallentaa liukuu liikkuva (vasen ja oikea).

Voit tehdä tämän määrittämällä seuraavat asetukset CSS-tiedostoa:

• diaesitykselle: ylivuoto-x - selaa, ylivuoto-y - piilossa:
• for ul: float - vasen.

Lisäksi voit asettaa parametrit leveys (leveys), korkeus (korkeus), tausta (tausta) ja niin edelleen.

Laitamme tämä koodi jQuery

HTML ja CSS kaikki tarvittavat muutokset on tehty. On kuitenkin totta, että jQuery koodia, liukusäädintä, jonka pitäisi olla seuraavat parametrit:

• Objektilasit seuraavat toisiaan tietyllä aikavälillä;
• Kun viet hiiren osoittimen liikkumista olisi lopetettava.

Tehdä tämän, me ilmoittaa kaksi muuttujaa: slidewidth (yhtä pitkä luistin) ja slidertime (määrittää ajan kuvaesitys). Ajastin käynnistyy, kun sivu on kokonaan ladattu sivusto. Tämän parametrin sidomme toimintaa hiiren osoittimen objektilasille (joka pysäyttää diaesityksen).

Muista määrätä ul astiaan pituus. Se on yhtä suuri määrä dioja, kerrottuna pituus kunkin dia.

Aseta toiminto vastaa muuttuviin dioja. Siinä kaikki, voit tarkistaa suorituskykyä liukusäädintä.

johtopäätös

Tässä artikkelissa me katsoimme miten luoda omia jQuery liukusäädintä lisätä sivun verkkosivuillaan. Käyttäen esimerkkinä yksinkertaisen liukusäädintä, voit keksiä oman tulkinnan perusteella, tehnyt tarvittavat muutokset lähdekoodiin. Tämä parantaa suunnittelun ja hyödyntää oman sivuston helpompaa vierailijoille.