JQuery könyvtár közelében csúszka honlapon

Az idő múlásával és a technológia fejlesztése terén a web design változnak, és az igényei / szükségletei felhasználók a tartalmi oldalakat. Ha korábban volt többnyire szöveges tartalom egy kis számú tematikus képek, ma ez a domináns eleme a grafikus. Ez lehetővé teszi, hogy gyorsan a legszükségesebb és hasznos információkat, és nem vesztegeti az idejét olvasás hosszú szövegeket. Ezzel kapcsolatban egyre népszerűbb, sőt, egy szükséges eleme a weboldal csúszkák. Ezek blokkok eltérő tartalommal bennük - a képekből a linkeket. A modern módon, hogy adjunk egy adott weboldal objektum - a jQuery könyvtár. Sliders létre ezt az eszközt, hogy egy kényelmes, könnyen kezelhető, és úgy néz ki, nagyon hatásos. Következő nézzük, hogyan lehet ezeket az elemeket a weboldalakat a saját. Köszönhetően egy kellően nagy számú szabványos eszközök, lehetséges, hogy hajtsák végre a JQuery csúszka típusú és változatos tartalmat.

Hogyan adjunk egy csúszka a weblapon?

Ways, hogy adjunk egy slide-blokkok az oldalra számát. Gyakran nem is kell, hogy írjon HTML-kódot, és ásni a forgatókönyvet. Van egy jelentős számú szabad könyvtárak, a felhasználók számára egy kész sablonokat, amelyek segítségével hozzá JQuery-csúszkák a webhelyen. Mindössze annyit kell tennie -, hogy másolja be a forráskódját a weboldal, és élvezze az eredményt. Azonban ebben az esetben a lehetőségét, hogy a megvalósítása a kreatív fantázia korlátozott. Ezért hasznos, hogy képes legyen megteremteni a design elem önállóan. Ehhez meg kell tudni, hogyan hajtsák végre a JQuery egyszerű csúszka, és csak bonyolítaná azt, akkor mindig hozzá extra elemek a kódot.

Hozzon létre egy csúszka magát: a HTML kódot

Először is, hol kezdjem -, hogy regisztrálja a jövőben elrendezés a csúszkát.

1. Alapítva HTML-fájl Slideshow egység, amely tartalmazza az összes a diák (képek, stb.)
2. Ott feküdt ul lista, minden bekezdés, amely tárolja külön csúszda.

Dolgozunk a CSS

Aztán rá vonatkozó jellemzőinek kívánt CSS használatával dokumentumnak. Meg kell előírni a tartalmat jQuery csúszka megfelelően működik, és joga volt a megjelenés. Ebben a szakaszban van dolgunk a következő feladatokat látja el:

• győződjön meg arról, hogy a diavetítés készülék kijelzi egyetlen, közvetlenül a pillanatban, amikor a szán (vagy a kép tartalma), a többiek pedig rejtve;
• gondoskodjon a diák egymás után (balról jobbra);
• do ul-tartály, mely tárolja diák mozgatható (bal és jobb).

Ehhez a következő beállításokat a CSS-fájlban:

• A Slideshow: overflow-x - scroll, túlfolyó-y - rejtett:
• UL: float - maradt.

Szintén beállítható a paramétereket a szélesség (szélesség), magassága (magasság), háttér (háttér), és így tovább.

Tesszük ezt a kódot JQuery

A HTML és CSS minden szükséges változtatásokat hajtottak végre. Továbbra is a helyzet a JQuery kódot, csúszkák, amely a következő paraméterekkel:

• Diák kell követik egymást egy bizonyos időintervallumon
• ha lebeg az egérmutatót azok mozgását meg kell szüntetni.

Ehhez kijelentjük két változó: slidewidth (egyenlő a szán hossza) és slidertime (meghatározza az időszakban a diavetítés). Az időzítő akkor indul, amikor az oldal teljesen betöltődött oldalon. Ez a paraméter azt köti az intézkedés az egér mutatót a dia (amely leállítja a diavetítés).

Ügyeljen arra, hogy előírják ul tartály hosszát. Ez lesz, ahány diák, szorozva a hossza az egyes dia.

Helyezze be a funkció felelős a változó diák. Ez minden, akkor ellenőrizze a teljesítményét a csúszkát.

következtetés

Ebben a cikkben megnéztük, hogyan lehet létrehozni saját jQuery-csúszkák be egy oldalt a honlapján. A példa egy egyszerű csúszka, akkor jön ki a saját értelmezése is, hogy a megfelelő módosításokat a forráskódot. Ez javítja a tervezés, és használja a webhely több kényelmes a látogatók.