/ / JQuery Library: posúvače pre vaše stránky

Knižnica JQuery: posúvače pre vaše stránky

S plynutím času a vývojom technológie voblasti webového dizajnu sa menia a potreby / požiadavky používateľov na obsahové stránky. Ak skôr to bol textový obsah s malým počtom tematických obrázkov, dnes je prevažujúca grafická zložka. Umožňuje vám získať čo najviac užitočných a užitočných informácií v krátkom čase a nie strácať čas čítaním dlhých textov. V tomto ohľade sú stále viac populárne a navyše dôležitým prvkom webových stránok sú posuvníky. Sú to bloky s rôznym obsahom v nich - od obrázkov po odkazy. Moderný spôsob pridania tohto webového objektu je použitie knižnice JQuery. Posuvníky vytvorené pomocou tohto nástroja sú ľahko použiteľné, ľahko použiteľné a vyzerajú veľmi pôsobivo. Ďalej sa pozrieme na to, ako urobiť tieto prvky webovej stránky sami. Vďaka veľkému počtu štandardizovaných nástrojov je možné implementovať bežce jQuery rôznych typov a rôznorodého obsahu.

posúvač obrázkov

Ako pridať posúvač na webovú stránku?

Spôsoby pridávania posuvníkov na stránkumiesto niekoľko. Často nemusíte ani písať HTML kód a ísť 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 sú možnosti realizácie vašich kreatívnych fantázie obmedzené. Preto bude zbytočné vytvoriť tento prvok dizajnu sami. 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.

Vytvorte sami posuvník: kód v HTML

Prvá vec, ktorú treba začať, je napísať rozloženie budúceho posúvača.

  1. Vytvorte blok obrázkov v súbore HTML, ktorý bude obsahovať všetky naše snímky (obrázky atď.).
  2. V ňom uvádzame zoznam ul, z ktorých každá položka uloží samostatnú snímku.

jquery posuvníky

Práca v CSS

Potom na ne kladieme potrebné charakteristikyštýlu, pomocou dokumentu CSS. Je potrebné, aby bol JQuery obsah vytvorený správne a má požadovaný formulár. V tejto fáze máme nasledujúce úlohy:

  • Aby ste sa uistili, že sa v bloku Slideshow zobrazuje iba jeden snímok (v súčasnosti potrebný obrázok alebo obsah) a zvyšok boli skryté;
  • zaistiť diapozitívy jeden po druhom (zľava doprava);
  • vytvorte ul-kontajner, v ktorom sú sklíčka uložené, pohyblivé (vľavo a vpravo).

Na tento účel nastavte v súbore CSS nasledujúce parametre:

  • pre prezentáciu: pretečenie-x - posúvanie, pretečenie-y - skryté:
  • pre ul: float - vľavo.

posuvný blok

Môžete tiež nastaviť parametre šírky (šírky), výšky (výšky), pozadia (pozadia) atď.

posúvač obsahu jquery

Písanie kódu v jQuery

Všetky potrebné zmeny boli vykonané v jazykoch HTML a CSS. Zostáva pre jQuery kód, posuvníky, v ktorých by mali mať nasledujúce parametre:

  • diapozitívy by sa mali nahradiť určitým časovým intervalom;
  • keď pohybujete kurzorom myši, pohyb by sa mal zastaviť.

Ak to urobíme, deklarujeme dve premenné: šírka posunu (rovnaká ako dĺžka snímky) a posuvník (určuje obdobie zmeny posúvania). Časovač sa spustí po naplnení stránky. K tomuto parametru pripojíme akciu umiestnenia kurzorovej myši nad snímok (ktorý zastaví prechod snímok).

Uistite sa, že predpisujete dĺžku kontajnera ul. Bude sa rovnať počtu snímok vynásobených dĺžkou každej snímky.

Vložte funkciu zodpovednú za zmenu snímok. To je všetko, môžete skontrolovať výkonnosť posúvača.

jednoduchý jquery posuvník

záver

V tomto článku sme sa pozreli na to, akovytvorte svoje vlastné jQuery posuvníky a vložte ich na svoju stránku. Pomocou príkladu implementácie jednoduchého jazdca môžete nájsť svoju vlastnú interpretáciu a urobiť príslušné zmeny zdrojového kódu. Tým sa zlepší dizajn a vaše stránky budú pohodlnejšie pre návštevníkov.

Čítajte viac: