JQuery knižnice: posuvníky pre vaše webové stránky

S postupom času a vývoja technológií v oblasti webdesignu sa mení a potrebami / požiadavky užívateľov na obsahových stránkach. Ak predtým to bolo väčšinou textový obsah s malým počtom tematických obrazov, dnes je dominantnou zložkou grafiky. To vám umožní rýchlo získať čo najviac potrebné a užitočné informácie, a nestrácajte čas čítaním dlhé texty. V súvislosti s tým sa stále viac populárne a v skutočnosti nevyhnutnou súčasťou webovej stránky sú posuvníky. Sú to bloky s rôznym obsahom v nich - od obrazov k odkazom. Moderný spôsob, ako pridať daný internetový objekt - pomocou JQuery knižnice. Posuvníky vytvorené pomocou tohto nástroja získate pohodlné, ľahko ovládateľný, a vyzerá veľmi pôsobivé. Ďalej sme sa pozrieť na to, ako sa tieto prvky webových stránok na vlastnú päsť. Vďaka dostatočne veľkým počtom štandardizovaných nástrojov je možné realizovať jQuery jazdca typu a rôznorodý obsah.

Ako pridať posuvník na webovej stránke?

Spôsoby, ako pridať snímku bloky na stránku číslom. Často nemajú ani písať HTML kód a ponoriť sa do skriptu. Tam je značný počet voľných knižníc, ktoré ponúkajú užívateľom ready-made šablóny, ktoré vám umožní pridať jQuery-posuvníky na svojich stránkach. Jediné, čo musíte urobiť - je skopírovať ho do zdrojového kódu webovej stránky a užívať výsledkov. Avšak, v tomto prípade možnosť realizácie vašej tvorivej fantázie sú obmedzené. Z tohto dôvodu je vhodné, aby bolo možné vytvoriť konštrukčný prvok samostatne. Ak chcete to, čo potrebujete vedieť, ako implementovať JQuery jednoduchý jazdec, a komplikujú ju iba, môžete vždy pridať ďalšie prvky v kóde.

Vytvorenie jazdec sami: v kóde HTML

Po prvé, kde začať - je zaregistrovať budúce usporiadanie jazdca.

1. So sídlom v prezentácii jednotke HTML súboru, ktorý bude obsahovať všetky naše klzákov (obrázky, atď).
2. Ležala ul zoznamu, každý odsek, ktorý bude ukladať samostatný záber.

Pracujeme s CSS

Potom sme sa naň vzťahujú charakteristiky požadovaného štýlu pomocou CSS-dokument. Je potrebné stanoviť obsahové JQuery jazdca, aby fungoval správne a mal ten správny vzhľad. V tejto fáze sme sa stretávajú s nasledujúcimi úlohami:

• Uistite sa, že na prezentácii prístroji zobrazí iba raz, hneď v okamihu, keď sane (alebo obsah obrazu), a zvyšok boli skryté;
• Umiestnite sklíčka jednu po druhej (zľava doprava);
• robiť ul kontajner, ktorý ukladá snímky pohyblivý (vľavo a vpravo).

Ak chcete urobiť, nastavte nasledujúce voľby v CSS-súboru:

• pre prezentáciu: pretečeniu-x - rolovať, overflow-y - skryté:
• UL: float - vľavo.

Tiež si môžete nastaviť parametre šírky (šírka), výška (výška), pozadia (background) a tak ďalej.

Dali sme tento kód v jQuery

boli vykonané HTML a CSS všetky potrebné zmeny. Naďalej platí pre jQuery kód, posuvníky, ktorá by mala mať tieto parametre:

• Sklíčka by mala uspieť navzájom určitý časový interval;
• keď podržíte kurzor myši nad ich pohybu by mala byť zastavená.

K tomu sme deklarovať dve premenné: slidewidth (rovnajúcej sa dĺžke saní) a slidertime (určuje dobu prezentácie). Časovač sa spustí, keď je stránka plne naložené webu. Týmto parametrom je zviazať činnosť ukazovateľ myši ukazujúce na snímke (ktorý zastavuje prezentáciu).

Uistite sa, že predpísať ul dĺžka kontajnera. To sa bude rovnať počtu snímok, vynásobený dĺžky každej snímky.

Vložiť funkciu zodpovednú pri výmene jednotlivých záberov. To je všetko, môžete skontrolovať výkon vášho jazdca.

záver

V tomto článku sme sa zamerali na to, ako vytvoriť svoje vlastné jQuery-posuvníky vložiť stránku svojich internetových stránkach. Na príklade jednoduchého jazdca, môžete prísť s vlastnou interpretáciou toho, takže príslušné zmeny v zdrojovom kóde. To povedie k zlepšeniu dizajnu a využívajú svojich stránkach výhodnejšie pre návštevníkov.