Hogyan hozzunk létre egy egyszerű és gyors képcsúszkát jQuery

Már többször kérte, hogy mondjam meg, hogyan lehet egy csúszka JS, de nem mondom. Ennek fő oka -, mert nem tudom, hogyan.

Egy bizonyos ponton rájöttem, hogy a csúszka néha könnyebb írni, mint nézni kész. Ezért szeretnék ajánlani egy leckét a létrehozását egy ilyen csúszkát. A könnyű, hogy a saját kezében van, és a kód kevesebb mint 2 Kb.

Készítsen képet csúszkát. A méretek nem számít, csak a kép legyen az azonos méretű. Mielőtt csatlakoztatja a script, amit csatlakoztatni jQuery:

Létrehozása csúszka

A szabályozás a csúszka menü használható a fehér körök, az aktív fülre zöld lesz. Menü dinamikusan létrehozott. A feladat a webmester -, hogy hozzon létre egy listát a képek és rendelje hozzá a megfelelő osztályokat. Az oldal lehet helyezni bármennyi csúszkák, egymás munkáját, hogy nem zavarják.

csúszka kód lesz:

A szabályozás a csúszkát kell ezt a kódot:

És a stílus a csúszkát van szükség:

Mint látható, a kód nagyon egyszerű. Én konkrétan nem a különböző stílusok átmenetek, és megállt az egyszerű visszatekerés csúszda. Emellett automatikus diavetítés nem fog változni. Nem tudom, hogy bárki, de ez bosszant, bármely animáció az oldalon, ami készült a tudtom nélkül.

Az alapértelmezett blokk mérete 700 x 290 pixel, hogy meg lehet változtatni önkényesen. Ne felejtsük el, hogy frissítse a CSS módosítása után a képek méretét.

Demo és letöltés

Hogyan hozzunk létre egy egyszerű és gyors képcsúszkát jQuery
Hogyan hozzunk létre egy egyszerű és gyors képcsúszkát jQuery

„Adat-POST_ID = "5914" adat-user_id = "0" data-is_need_logged = "0" data-lang = "en" adat-decom_comment_single_translate = "megjegyzést a" data-decom_comment_twice_translate = "comment" data-decom_comment_plural_translate = "komentarіv" adatok-multiple_vote = "1" adatok-text_lang_comment_deleted = 'komentarijah Vidal' adatok-text_lang_edited = "Vіdredagovano" adat-text_lang_delete = "Vidaliti" adatok-text_lang_not_zero = "mező nem NULL" adat-text_lang_required = „Tse obov'yazkove mezőben. " adatok-text_lang_checked = "Oberіt egyik punktіv" adatok-text_lang_completed = "Operatsіyu befejeződött" adatok-text_lang_items_deleted = "Ob'єkti Bulo Vidal" adatok-text_lang_close = "zárt-" adatok-text_lang_loading = "Zavantazhennya.">

Add meg a megjegyzést

Vibachte az komentuvannya neobhіdno uvіyti.

120 komentarіv

Pliz írási funkció a csúszka lapozgatva fotók

Ha már csomagolja $ (választó) egy változó, akkor nem kell ezt a változót újra zavorchivat a $ (változó), létrehozva egy új objektumot. Ez helytelen, és irracionális.

A csúszka nagyon jó, de nem a képek átméretezése mérete, hogyan lehet megoldani ezt a problémát?

Hogyan kell behelyezni a csúszkát egy statikus html honlap ??

Üdvözlünk! Ön a demo verzió, a kapcsoló gombot egy átlátszó háttérrel. Megvannak készített egy szürke háttér. Hosszú téglalap alján a csúszkát kapunk. Kérem, mondja meg, hogyan lehet megszabadulni tőle?

@NUR,
egy vezérlőegységet CSS, van egy név .nav, úgy tűnik, hogy már van .nav, ebben az esetben az alkalmazott stílust és a csúszkát. Ellenőrizze a rendelkezésre álló második .nav ha megtalálja - a legegyszerűbb módja annak, hogy változtatni a tulajdonság a csúszkát.