Adaptív, vagy ha szeretné, az érzékeny webdesign most nem csak egy másik tervező trend, akkor ez már egy bizonyos szabvány a fejlesztő webhelyek számára, amelyek a weboldalak egyetemességét, harmonikus vizuális érzékelést biztosítanak a különböző felhasználói eszközök képernyőkéről. A közelmúltban, amikor fejlődik adaptív sablonKülönböző nehézségekkel kellett foglalkoznom bizonyos csúszkák és képgalériák integrációjában, anélkül, hogy megszakítanám az általános tervezési stílust. Most minden sokkal könnyebb, hatalmas számú készenléti megoldás van a hálózatban, és mi különösen örülve, legtöbbjük szabadon hozzáférhető, nyílt forráskódú.
A javasolt eszközök sokszínűségének köszönhetően összeállítottam az adaptív jquery csúszkák legjelentősebb fejlesztéseinek, amelyek legutóbbi időben megjelentek, és korlátozások nélkül elosztottak, vagyis korlátozások nélkül. teljesen szabad.
Wow csúszka.
Adaptív JQuery A képek csúszka csodálatos vizuális effektek (fordulatok, indulások, elmosódás, spirálok, vakok stb.) És sok kész mintázat. A beillesztett varázsló segítségével a Wowerbe épített, könnyen és könnyen létrehozhat lenyűgöző diavetítést percek alatt. A fejlesztő honlapja a szükséges dokumentációval rendelkezik a dugaszolás beállítása és felhasználása az orosz, kiváló élő példákban a plug-in műveletben. Szintén letölthető külön plugin wordpress És a Joomla modul. Biztos vagyok benne, hogy sokan szeretik ezt a csodálatos csúszkát, mind a kezdők, mind a vezető webmátot.
Hislider.
HTML5, JQUERY Slider és képgaléria, abszolút ingyenes plugin személyes használatra a népszerű rendszerek - WordPress, Joomla, Drupal. Ezzel az egyszerű, de inkább működő eszközzel könnyedén létrehozhat weboldalaink oldalainkat, csodálatos és fényes diavetítéseket, látványos bemutatókat és új üzenetek hirdetését. Számos kész mintát és bőrt egy csúszka, lenyűgöző átmeneti hatások (változás) tartalom, különböző multimédiás tartalom kimenete: videó a YouTube és a Vimeo, rugalmas egyéni beállítások stb.
Nivo csúszka.
A Nivo csúszka egy öregfajta, jól ismert mindenkinek, aki a témában van, az egyik legszebb és könnyen használható kép csúszka. A JQUERY NIVO Slider plugin szabadon letölthető és további felhasználás, amelyet az MIT engedély keretében oszthat meg. Van egy külön bővítmény a WordPress számára, de sajnos már kifizetett és leesik, hogy 29 dollár lesz engedélyenként. Jobb, ha egy kicsit felkészülünk a WP téma fájljaival, és rögzítik a NIVO Slider plugin ingyenes jquery verzióját a blogodhoz, az információ hasznát Hogyan kell csinálni a hálózatban.
Ami a funkcionális, minden tökéletes rendben van. A jQuery v1.7 + könyvtárat a munka, gyönyörű átmeneti hatások, egyszerű és nagyon rugalmas beállításokat, alkalmazkodó elrendezést, automata a vágás és még sok más.
Az ötlet, hogy a csúszka ihlette fejlesztők, jól ismert az egész stílus az Apple termékek, ahol több kis tárgyak (kép) változnak, hogy kattintson a kiválasztott kategória egy egyszerű hatása animáció. A Codrops az Ön rendelkezésére bocsátja a részletes leckét a csúszka létrehozásához, a HTML-jelölés teljes összehangolásához, a CSS-szabályok sorozata és végrehajtható jquery plugin, valamint egy csodálatos nappali példa a csúszka használatára.
Slit csúszka.
Teljes képernyős kép csúszka a jQuery és a CSS3 + részletes tankönyv a plug-in integrálására a webhely oldalon. Az ötlet az, hogy a következő vagy korábbi tartalomra váltson egy adott tartalommal egy adott tartalommal. TÓL TŐL jquery használata. És a CSS animációit egyedi átmeneteket hozhat létre a diákok között. A csúszka adaptív elrendezése biztosítja, hogy a képernyőn megjelenjen a képernyőkön a képernyőkön. különböző típusok Egyéni eszközök.
Elasztikus tartalom csúszka.
A legmagasabb tartalom csúszka a szélességben és magasságban van beállítva a szülő tartály méretétől függően, amelyben található. Elég egyszerű, egyszerű design és rugalmas csúszka a jquery beállításaiban, az alján navigációval, a képernyő méretének megváltoztatásakor a navigáció ikonként jelenik meg. Nagyon részletes dokumentáció (lecke létrehozása) és az élő példák használata.
3D Stack Slider.
A csúszka kísérleti változata, amely bemutatja a 3D-s síkból származó átmeneteket. A képeket két vízszintes halmozásra törik, a navigációs nyíl segítségével megjelenik, és az egyes későbbi képeket a megtekintési állapotba mutatja. Általában semmi különös, de a végrehajtás nagyon ötlete és technikája meglehetősen érdekes.
Nagyon egyszerű, 100% adaptív és teljes képernyős jquery csúszka. A csúszka munkája CSS-átmeneteken (tulajdon-átmenet) alapul, jquery mágiával ellátott kötegben. A maximális szélességi érték 100% -kal van telepítve alapértelmezés szerint, így a képek mérete a képernyőméretek függvényében megváltozik. Semmi különleges animációs hatások és élvezetek a tervezésben, minden egyszerű, és megszakítás nélküli munka.
Minimális csúszdák
A név magáért beszél, talán az egyik legkönnyebb és minimalista jQuery csúszka a kép, hogy találkoztam (plugint 1 kB). Felelősségek. -Kornet JQuery plugin, amely diavetítést hoz létre a tartály belsejében lévő elemekkel. Működik a böngészők széles skálájával, beleértve az IE - a híres haladási fék minden verzióját, az IE6-tól a fentiektől. A papír CSS3 átmeneteket használ egy kötegben a JavaScript-szel, a megbízhatóság érdekében. Egyszerű jelölés egy rendezetlen listával, átmeneti és időintervallumok beállítása, automatikus és manuális irányítás A csúszdák átkapcsolása, valamint számos diavetítés támogatása. Ez egy ilyen frisky "baba".
Kamera.
Fényképezőgép - ingyenes jquery. Plugin rendezésére diavetítés a oldalakra, egy könnyű csúszka a sok átmeneti hatások, a 100% adaptív elrendezés, és nagyon egyszerű beállítások. Csodálatosan illeszkedjen a felhasználói eszközök (PC monitorok, tabletták, okostelefonok és mobiltelefonok). A beépített videó bemutatása. Automatikus diaváltás és kézi vezérlés gombokkal és blokk segítségével. Gyakorlatilag egy teljes kép galériája kompakt kialakításban.
bXSLIDER JQUERY.
Még egy, elég egyszerű adaptív csúszka a jquery. A diákban bármilyen tartalmat, videót, képet, szöveget és egyéb elemeket elhelyezhet. A szenzoros képernyők hosszabb támogatása. Használja a CSS-animációs átmeneteket. Számos különböző változat a diavetítések és a kompakt képgalériák bemutatásában. Automatikus és kézi vezérlés. A csúszdák kapcsolása a gombokkal a miniatűrök kiválasztásával. A forrásfájl kis mérete nagyon egyszerű a beállításokban és a megvalósításban.
FLEXSLIDER 2.
FLEXSLIDER 2 - Frissített verzió A csúszka az azonos nevű, a jobb a válaszadási arány, egy script minisztérium, és minimalizálja újrakomponálásától / újrarajzolás. A plugin tartalmaz egy alapvető csúszkát, amely vezérli a csúszdák vezérlését a bélyegképekkel, a bal jobb oldali beépített nyilakkal és az alsó navigációs ablaktáblával gombok formájában. A video sálban (Vimeo), a paraméterek rugalmas beállításai (átmenet, tervezés, időintervallum), teljesen adaptív elrendezés.
Galleria.
Jól ismert és elég népszerű adaptív plugin JQUERY, hogy kiváló minőségű galériákat és csúszkákat hozzon létre. A csúszka felület, a kezelőpanelnek köszönhetően vizuálisan hasonlít a szokásos videolejátszóra, a plugin összetétele számos különböző díszítést tartalmaz. Beágyazott videók és képek népszerű szolgáltatások: Flickr, Vimeo, YouTube és mások. Részletes dokumentáció Beállítással és használatával.
Áfonya.
Egyszerű frills nélkül FREE FREE JQUIZE A képek, amelyeket kifejezetten adaptív webdesignért írtak. Az áfonya egy kísérleti jquery nyílt forráskódú plugin. Minimalista kialakítás, nincs hatása, csak zökkenőmentes felugró képek, amelyek egy bizonyos idő elteltével helyettesítik egymást. Minden nagyon egyszerű, tegye, összekötöttem és előre ...
jquery popeye 2.1.
Nagyon kompakt JQuery kép csúszka, lightbox elemekkel. Köszönhetően rugalmas méretű, akkor nagyon egyszerűen ágyazva bármilyen tartályban egyetlen bejegyzést formájában egy miniatűr, ha lebeg a kurzort, vagy kattintson mely album aktiváljuk nagyított képet és vezérlő elemek. Kényelmes egy ilyen csúszkát az oldalsó panelekbe helyezni, a termékek vagy hírek bemutatásához. Kiváló megoldás a nagy mennyiségű információkhoz.
Sorrend
Ingyenes adaptív csúszka kiterjesztett CSS3 átmenetekkel. Minimalista stílus, 3 díszítés, mindegyik keret csúszik a vízszintes irányban megjelenő vízszintes irányban, amely a kép közepén kezdődik, jobbra aláírása, a miniatúrák duplikálódnak a jobb alsó sarokban. A termék bemutató oldalainak törése minden keretben. A vezérlés magában foglalja az oda-vissza gombokat is. Támogat modern böngészők.
ELCSÓR.
Van egy teljesen promóciós csúszka kép és a funkcionalitás és a beállítások a beállítások változás áll be a sebességet a dia változás, amely összeköti a kézi üzemmód (a gombok aktiválódnak), folyamatos diavetítést. Ez a csúszka joga van arra, hogy legyen, és csak azt a tényt vonzza, hogy ez az, hogy nem találtam semmit, ami különösen érdekes ebben a fejlődésben, talán rosszul kerestem)))
Érzékeny kép csúszka.
Gyönyörű ilyen adaptív csúszka Vladimir Kudinovov. Jó, kiváló minőségű feldolgozott eszköz, vizuális példákkal és részletes utasítások a létrehozás, a telepítés és a használat. Adaptív tervezés, Aranyos gombok és a zöld lövöldözők, minden nagyon aranyos és nyugodtan, nyomás nélkül.
Fraktionslider.
Szabad jQuery csúszka plugin parallaxis hatást a képek és a szöveg diák. A dia animáció több megjelenítési értékkel rendelkezik, amelyek teljes körű ellenőrzést tartalmaznak minden egyes alkalommal és animációs paraméterben. Az animáció képessége egyszerre több elemet a dia. Beállíthatja különböző módszerek Animációk, a diákok eltűnése vagy átmenet egy bizonyos irányból. Automatikus kijelző és kézi vezérlés A navigációs nyilak segítségével pop-up, amikor lebeg. 10 típusú animációs hatások a csúszdák megjelenésének és még sok más ...
A felülvizsgálat meglehetősen kiterjedt volt, de nem volt elegendő informatív a vizsgált termékek nagy száma miatt. Minden részletet és részletes leírást. funkcionalitás Egy plug-in, közvetlenül a fejlesztők oldalain tanulhat. Reméljük, hogy valaki megkönnyítette a legkevésbé szükséges eszköz keresését, színes képcsúcsokat hoz létre webhelyeik oldalán.
Azt gondolta, hogy jó lenne, ha az orosz sablonokkal dolgozhatna? Gondolj egy percig. Nincs időzítés az angol nyelvű sablonokkal való munkavégzésre. Sietünk, hogy kérjük, hogy a templatemonster most megtalálható a templatemonster marketingen. Az egyesek szövegét manuálisan írták. Természetesen minden kész megoldás hihetetlenül könnyen használható.
Minden tekintetben Andrew
Néhány évvel ezelőtt elkezdtem elsajátítani a jquery-t. Azt hiszem, mindenki tudja, hogy az úgynevezett legnépszerűbb könyvtár a parancsfájlok (szkriptek) fejlesztése és létrehozása a JavaScript-en. Ezzel nagyon könnyű létrehozni a webhely látványos és interaktív elemeit.
Ebben a cikkben szeretném megmondani, hogyan kell létrehozni egy egyszerű univerzális csúszkát a jquery használatával. Tény, hogy a hálózat nagyon nagyszámú Különféle kész csúszkák, amelyek néha nagyon csábítónak tűnnek, és nagyon funkcionálisak, de a semmiből fogjuk.
Tehát, milyen jellemzőink vannak a jquery-en (amit Hwslidernek neveztem) meg lehet jegyezni?
- Könnyű használat és design - Olyan egyszerű forgatókönyvet akartam létrehozni, így nem használtam az animációkat a CSS3-on, és a kód nagyon sokoldalú és érthető.
- A képek és a HTML kódok csúszdájába való beillesztés képessége.
- A diákok görgetésének képessége, mint a sorrendben (előre - vissza), és válassza ki az egyes dia (1,2,3,4 ...)
- Automatikusan feltörekvő linkek (az előző - a következő, és a dia számokkal). Csak a megfelelő mennyiségű DIRS-ot kell beillesztenie, és minden más kiszámítja magát. Nos, meg lehet jegyezni, hogy a diákok száma korlátlan.
A szkript kompatibilis az összes modern böngészővel: azaz opera, Firefox, Safari, Chrome, (mert a csúszka nem használja a CSS3-t).
Kezdjük a HTML jelöléssel. A megfelelő hely HTML oldal vagy sablon, amelyet be kell illeszteni.
Itt minden egyszerű, amennyit csak láthat, annyi diákot tud beilleszteni, ha új div. Beillesztheti őket hTML kód, például egy kép vagy blokk szöveggel. Ne felejtsük el, hogy csatlakozzon a könyvtárba a JQUERY-nál az összes JS-szkriptel. Ha nem tudja, hogyan, nézd meg a példát.
# Slider-wrap (/ * hüvely csúszka és gombok * / szélesség: 660px;) #slider (/ * hüvely csúszka * / szélesség: 640px; magasság: 360px; túlcsordulás: rejtett: határok: #ee szilárd 10px; ) .Slide (/ * csúszda * / szélesség: 100%; magasság: 100%;) .sli-linkek (/ * Slide Change Buttons * / Margin-Top: 10px; Text-Align: Center;) .sli-linkek. Vezérlőcsúszda (margó: 2px, kijelző: inline-blokk, szélesség: 16px, magasság: 16px, túlcsordulás: rejtett: rejtett; szöveges francia bekezdés: -9999px; Háttér: URL (Radiobg.png) -Links .control-dia: Hover (kurzor: mutató, háttér-pozíció: középközpont;) .sli-links .control-slide.active (háttér-pozíció: középső felső;) #prebutton, #nextButton (/ * Link " Következő "és" PEDID "* / kijelző: blokk; szélesség: 15px; magasság: 100%; pozíció: abszolút; Top: 0, túlcsordulás: rejtett; szöveges francia bekezdés: URL (arrowbg.png) balközpont No-Repeat; Opacity: 0.8; Z-index: 3; Vázlat: Nincs! Fontos;) #propbutton (balra: 10px;) #nextButton (jobbra: 10px; háttér) : URL (arrowbg.png) Jobb központ No-Repeat;) #Prewbutton: Hover, #nextButton: Hover (Opacity: 1;)
Kívánjuk, hogy részletesebben. Először a főegységet a "Slider-Wrap" azonosítóval, a kívánt szélességgel adjuk meg. Mivel az összes többi blokk beillesztésre kerül, akkor a magasságot nem lehet megkérdezni, attól függ, hogy mi lesz benne. Ezután be kell állítanunk a tartály méretét, amelyben a diák lesz. Ez az - #slider. Kérdezzük meg tőle a szélességet és a magasságot, valamint például a határ 10 pixelben. Itt van a szélessége - 640px kisebb, mint a szülő szélessége, mivel a jobb oldali és bal oldali és bal oldalon lévő 10px szélességgel rendelkezünk. A csúszdák szélessége maguk (.slide) is attól függ, hogy ez a div - is.
Végül: Be kell állítanunk a pozíciót: relatív a csúszkás tartályba, mint a csúszkák belsejében - abszolút pozícionálással. A csúszkákhoz CSS-ben csak szélesség és magasság van beállítva. A fennmaradó tulajdonságok már a jquery forgatókönyvben vannak beállítva.
A selector.sli-links egy blokk, amelyben az átmenet gomb a kívánt csúszkához lesz. Ezek a gombok a faj egyszerű elemei amelyek automatikusan beillesztésre kerülnek a kívánt mennyiségbe, együtt és a szülő.sli-linkekkel. A gombokhoz egy gyönyörű kilátást kérünk, nevezetesen minden gomb négyzetet, illeszkedünk őket a központban, valamint a túlcsordulásnak köszönhetően: rejtett és szöveges francia bekezdés: -9999px, eltávolítjuk a szöveget, így csak a háttér ikonok hagyjuk a kurzor ezen elemére is változik. A kényelem érdekében a Sprite-t használtam, ami csökkentette a képek számát.
Ezután elkészíti az aktív gombot. Csak változtassa meg a háttér pozícióját. Ezután továbbítja a hivatkozásokat a bizonyítékokhoz és az előző diákhoz. Adhat nekik bármilyen kialakítást, valamint gombokat. Ezek a linkek automatikusan beillesztésre kerülnek a #sliderbe. De hogy láthatók, megkérdeztem őket abszolút helymeghatározást és felső réteget (Z-index: 3), hogy azok a diákok fölött jelenjenek meg. Azt hiszem, a CSS-nek minden tiszta itt, és egyszerűen: szinte minden tulajdonságot megváltoztathat, hogy csúszkát készítsen, amennyire szüksége van.
Most tekintsük a forgatókönyvet:
Var hwslidespeed \u003d 700; var hw timeout \u003d 3000; Var hwneedlinks \u003d igaz; $ (Dokumentum). READY (FUNCTER (E) ($ ("SLIDE"). CSS (("pozíció": "abszolút", "Top": "0", "bal": "0") () .eq (0) .show (); var slidenum \u003d 0; var slidetime, slidecount \u003d $ ("# csúszka .slide"). Méret (); VAR Animslide \u003d funkció (nyíl) (ClearTimeOut (Slidetime); $ (".slide"). EQ (slidenum) .fadeout (hwslidespeed); ha (nyíl \u003d\u003d "következő") (ha (slidenum \u003d\u003d (slideCount-1)) (SlidEcount-1) (Slidenum \u003d 0;) ) Más, ha (nyíl \u003d\u003d "priver") (ha (Slidenum \u003d\u003d 0) (Slidenum \u003d SlideCount-1,) más (slididerum- \u003d 1)) más (slidenum \u003d nyíl,) $ (". Slide"). EQ (Slidenum) .fadein (hwslidespeed, rotator); $ (". Control-slide.active"). Removeclass ("aktív"); $ (". Control-dia"). EQ (slidenum) .addclass ("aktív) "), ha (HWNeedLinks) (VAR $ LINKARRROW \u003d $ (" ") .Prependto (" # Slider "); $ (" # NextButton "). Kattintson (funkció () (Animslide (" Tovább ");) $ ("#Prewbutton"). Kattintson (Funkció () (Animslide ("Animslide");)))) VAR $ adderspan \u003d "", $ (". Slide"). Mindegyik (funkció (index) ($ adderspan + \u003d " "; }); $("
Először is, a beállítások mentésre kerülnek a változók: HwSlideSpeed \u200b\u200b- Slide teljesítmény Speed, Hwtimeout - Time After Automatikus Slide Change, HWneedLinks - Szabályozza a „Next” és „Vissza” linkek - ha az értéke változó Igaz, ezek a kapcsolatok Megjelenik, és ha hamis, akkor nem fognak (mint például főoldal A blogom).
Ezután beállítottuk a szükségeseket CSS tulajdonságok A Diákhoz egy módszerrel. CSS (). A csúszdákkal ellátott blokkok abszolút pozícionálással rendelkezünk egymásra, majd elrejtjük mindet.hide (), majd csak az első mutasd meg. A slidenum változó az aktív dia, azaz a számláló száma.
A jquery csúszka fő logikája az animslide funkció. Elfogad egy paramétert. Ha megadjuk a "NEXT" vagy "PREW" vonalat hozzá, akkor a feltételes operátorok működnek, és megjelenik a következő vagy előző dia. Ha az ábra értékének, akkor ez a szám aktív csúszkává válik, és megjelenik.
Tehát ez a funkció elrejti az aktuális div-t, kiszámítja az újat, és megmutatja azt.
Kérjük, vegye figyelembe, hogy a .fadein () módszer, amely a látszólagos aktív csúszkát teszi, a második érv állítja be. Ez az úgynevezett visszahívási funkció. Ez akkor történik, ha a dia teljesen megjelenik. BAN BEN ez az eset Ez az, hogy automatikus görgetési diákat biztosítson. Az alábbiakban megfogalmazott rotátor funkció ismét az Animslide funkciót ismét a következő diavetítéshez tartja a szükséges időintervallumon keresztül: egy állandó görgetést biztosítunk.
Minden rendben működik, de meg kell állítanunk az automatizálás végrehajtását, ha a felhasználó hozza a kurzort a csúszkához, vagy megnyomja a gombokat. Ehhez egy változó szünet jött létre. Ha értéke pozitív - igaz, akkor automatikus kapcsolás nem lesz. A method.hover (), akkor adja meg: Tiszta időzítőt, ha az fut - Cleartimeout (Slidetime), és telepítse Pause \u003d True. És a kurzor eltávolítása után kapcsolja ki a szünetet, és futtassa a rotátor lezárását ().
Ezenkívül új elemeket kell létrehoznunk az oldalon, és helyezzük őket a megfelelő helyre. Az egyes dia mindegyik () ciklus használatával (Div-A osztály.Slide) hozzon létre egy span elemet, amelyen a szám egy dia szám. Ezt a számot az animációs funkcióban használják, hogy menjen a dia ezzel a számmal. Csomagoljon mindent Div-ban a megfelelő osztályokkal, és végül egy ilyen jelölést kapunk:
Úgy tűnik, miért hozunk létre egy jelölést a szkripten belül, és nem a HTML-kódban? Az a tény, hogy például, ha a szkriptek ki vannak kapcsolva - nem fog olyan elemeket látni, amelyek nem fognak működni, és ez nem fogja bevezetni azt zavart. Ezenkívül a kódot egyszerűsítették, ami nem rossz a SEO számára.
Ennek eredményeképpen a csúszka jelölése valami ilyesmit fog kinézni (mint a dia, a képet használtam, és 5 darabot állítunk be):
Az alábbiakban láthatja, hogy a jquery csúszka hogyan működik a demó oldalon, és letölti az összes szükséges forrást.
Végül egy pár pillanat a csúszka integrációjáról a drupal-val. Ezt a kódot hozzáadhatja a sablonfájlhoz, például az oldal.tpl.php-hez, és csatolja a szkriptet az egyes JS fájlhoz a témához. A Drupalban lévő jquery alapértelmezés szerint engedélyezve van, de kompatibilitási módban működik (). Két módosítás van. Vagy csomagolja az egész JS-kódot:
(Funkció ($) ($) (// az összes kód ...)) (jQuery);
vagy cserélje ki a $ szimbólumokat a jquery forgatókönyvben. Mint ez:
JQUIERY (DOKUMENTUM). READY (SLIDE). CSS (("pozíció": "abszolút", "felső": "0": "0", "bal": "0")). Hide () .eq (0). ); var sliderum \u003d 0; var slidetime; slidecount \u003d jquery ("# \u200b\u200bcsúszka .slide"). Méret (); VAR Animslide \u003d funkció (nyíl) (// et.
A példában az első módszer már megvalósul.
Köszönöm, hogy elolvasta! Hagyja megjegyzést, gyere vissza. És feliratkozhat az RSS-re, hogy először megkapja a blog frissítéseit!
Hozzáadott:Ez nem minden. Olvas. Itt új lehetőségeket adunk hozzá erre a szkriptre.
1. Kiváló jquery diavetítés
Egy nagy látványos diavetítés a jquery technológiák használatával.
2. JQuery "skála karusszel" plugin
Skálázható diavetítés jquery használatával. Beállíthatja a méreteket a legmegfelelőbb diavetítésekhez.
3. A "Slidejs" jquery dugó
A szöveges leírással ellátott képek csúszka.
4. Plugin "jslidernews"
5. CSS3 jquery csúszka
Ha a kurzort a navigációs nyilakra helyezi, megjelenik egy kerek bélyegkép a következő dia.
6. Aranyos jquery csúszka "prezentációs ciklus"
jQuery csúszka kép betöltőjelzővel. Van egy automatikus diaváltás.
7. JQUERY plugin "Parallax Slider"
Volumetrikus háttérhatással. A csúszka csúcspontja a háttérben, amely több rétegből áll, amelyek mindegyike görgetve van különböző sebesség. Ennek eredményeképpen kiderül a térhatású hatás után. Nagyon szépnek tűnik, biztos lehet benne. Az ilyen böngészőkben simább hatású, mint: Opera, Google Chrome., Azaz.
8. Friss, könnyű JQuery Slider "BXSLIDER 3.0"
A demo oldalon a "Példák" szakaszban megtalálhatja az összes linket lehetséges lehetőségek Használja ezt a bővítményt.
9. JQUERY SLIDER A képek, plugin "Slidejs"
A stílusos jquery csúszka biztosan képes lesz díszíteni a projektet.
10. JQUERY PLUDIN Slideshow "Easy Diák" V1.1
Könnyen használható jquery plugin létrehozásához diavetítés.
11. Plugin "jquery Slidy"
Könnyű jquery plugin különböző designban. Van egy automatikus diaváltás.
12. JQUERY CSS Galéria automatikus diaváltással
Ha a látogató egy bizonyos időn belül nem nyomja meg az "előre" vagy a "BACK" nyilakat, akkor a galéria automatikusan elindul.
13. JQUERY Slider "Nivo Slider"
Nagyon professzionális kiváló minőségű lámpa plugin érvényes kód. A diákok sok különböző hatása van.
14. JQUERY SLIDER "MOBILYSLIDER"
Friss csúszka. JQUERY Slider a képváltozás különböző hatásaival.
15. JQuery plugin "Slider²"
Könnyű csúszka automatikus diaváltással.
16. Friss JavaScript csúszka
Csúszka automatikus képváltással.
Plugin egy diavetítés végrehajtásához automatikus diaváltás. Lehetőség van arra, hogy a kijelzőt a képek bélyegképeivel kezeljék.
jQUERY CSS. Kép csúszka a Nivoslider plugin használatával.
19. Jquery Slider "Jshowoff"
Plugin a tartalom elforgatásához. Három használati lehetőség: navigáció nélkül (a diavetítés formátumú automatikus váltás), a navigációban gombok formájában, a képek formájában.
20. Záráshatás portfólió plugin
Friss jquery plugin a fényképész portfólióhoz. A galéria érdekes hatással volt a képek megváltoztatására. A fényképek helyettesítik egymást a lencse zárjához hasonló hatással.
21. Könnyű JavaScript CSS csúszka "Tinyslider 2"
A képek csúszka végrehajtása javaScript használatával és CSS.
22. A Tinycirclockslider csúszka széle
Stílusos kerek csúszka. A képek közötti átmenetet úgy végezzük, hogy vörös körként húzza a kör csúszkát. Nagyszerűen illeszkedjen a webhelyére, ha tervezési elemeket használ.
23. A képek csúszka a jquery-ről
Könnyű csúszka "csúszka készlet". A csúszka különböző formatervezésben jelenik meg: függőleges és vízszintes. A képek között különféle típusú navigációt is végrehajtott: az "Előre" és "VISSZA" gombok segítségével az egérkerék segítségével az egér segítségével kattintson a dia.
24. Galéria miniatűrvel "csúszka készlet"
Galéria "csúszka készlet". A görgetési miniatúrát függőleges és vízszintes irányban végezzük. A képek közötti átmenetet az egér kerekek, egérkattintások vagy miniatűr kurzor segítségével végzik.
25. JQUERY Slider Kit tartalom csúszka
Függőleges és vízszintes tartalom csúszka a jQuery-en.
26. JQUERY SLIDE SHOW "Slider Kit"
Diavetítés automatikus diaváltással.
27. Könnyű professzionális JavaScript CSS3 csúszka
A 2011-ben létrehozott jquery és a CSS3.
jquery diavetítés miniatúrákkal.
29. Egyszerű jquery diavetítés
Diavetítés navigációs gombokkal.
30. Megdöbbent slideshow jquery "slitter"
jquery plugin "slitter", hogy lenyűgöző diavetítést hozzon létre. A plugin 22 (!) A képek cseréje 22 (!) Támogatja a különböző animációs hatásokat. A diákok két navigációs opciójával dolgozhat: A diákok száma és a miniatűr. Ügyeljen arra, hogy nézze meg a demonstrációt, nagyon jó minőségű keresést. Használt technológiák: CSS, HTML, JQUERY, PHP.
31. Slideshow "Awkward"
Funkcionális diavetítés. A diák formájában elvégezheti: egyszerű képek, Képek aláírása, képek pop-up tippek, videoklipek. Használhat nyilakat, linkeket csúsztatani számok és kulcsok jobbra / balra a billentyűzeten, hogy navigáljon. A diavetítés több verzióban történik: miniatűrökkel és nélkülük. Hogy az összes lehetőséget, séta a linkek Demo # 1 - # 6 Demo tetején található a demo oldalon.
Nagyon eredeti design csúszka képek, amelyek a rajongóhoz hasonlítanak. Animált diaváltás. A képek közötti navigáció a nyilak segítségével történik. Ezenkívül automatikus váltást is biztosít, amely be- és kikapcsolható a tetején található lejátszás / szünet gomb segítségével.
Animált jquery csúszka. A háttérképek automatikusan skáláznak, ha a böngészőablak megváltozik. Minden képen lebegnek egy blokkot leírással.
34. "Flux Slider" csúszka a jQuery és a CSS3-on
Új jquery csúszka. Számos hűvös animációs hatás a diák cseréje során.
35. jquery "jswitch" plugin
Animált jquery galéria.
Könnyű diavetítés a jquery-on, automatikus diaváltással.
37. A Plugin "Sliddeck 1.2.2" új verziója
Professzionális tartalom csúszka. Lehetőségek lehetségesek egy automatikus diavetítéssel, valamint egy opcióval egy egérkerékkel a diákok közötti átmenethez.
38. JQUERY Slider "sudo csúszka"
Könnyű kép rágalmazás a jquery. Nagyon sok megvalósítási lehetőség: vízszintes és függőleges képek változása, a csúszkaszámhoz és nélkülük, a képek aláírása és a képváltozás különböző hatásai nélkül. Az automatikus diaváltás funkciója van. Az összes példamutató linkek megtalálhatók a demo oldalon.
39. JQUERY CSS3 Diavetítés
A diavetítés miniatúrákkal támogatja az automatikus diavetítés módját.
40. JQUIERY "FLUX SLIDER"
Csúszka a képváltozás több hatásaival.
41. Egyszerű jquery csúszka
Stílusos kép csúszka a jquery-en.
Szüksége van egy egyszerű csúszkára, automatikus görgetéssel. Hozd ...
A csúszka munkájának leírása.
A diákok sorba kerülnek, és egy bizonyos idő után gördülnek.
A piros keret mutatja a csúszka látható részét.
A csúszka végén meg kell ismételnie az első diát. Szükséges annak érdekében, hogy a harmadik csúszkából az elsőre gördüljön. Azt is hozzá kell adnia az utolsó csúszkát az elejére, hogy görgessen át ellentétes irány Az első csúszkából a harmadikig. Az alábbiakban a csúszka munkája az előre irányul.
Amikor a csúszka véget ér, a másolat a csúszka elejétől azonnal az utolsó dia helyére kerül. A ciklust ismét megismételjük. Ez egy végtelen csúszka illúzióját hozza létre.
Html jelölés
Kezdjük, egyszerű csúszkát készítünk egy automatikus görgetéssel. Munkájára két konténerre van szüksége. Az első meghatározza a csúszka látható területének méretét, és a második szükséges a csúszkák befogadásához. A csúszka jelölése a következő űrlap lesz:
Stílusok csúszka
.slider-box (szélesség: 320px, magasság: 210px, túlcsordulás: rejtett: rejtett;) .slider (pozíció: relatív; szélesség: 10000px; magasság: 210px;) .slider: bal, z-index: 0;A konténer.slider-box beállítja a csúszka méretét. A túlcsordulás használatával: Rejtett tulajdonság, minden elem rejtve van, amelyek nem szerepelnek az elem belsejében található területen.
A tartályhoz. A csúszka nagy szélességű. Szükséges annak érdekében, hogy az összes diák illeszkedjen bele.
A diákok az úszóval vannak igazítva: balra.
Az alábbiakban a csúszka blokkok vázlatos elhelyezkedése.
Forgatókönyv
A csúszkavartást használják sima változás Margó-bal tulajdonságai konténer .slider.
$ (Függvény () (VAR WIDTH \u003d $ (". Slider-box"). Width (); // szélesség csúszka. intervallum \u003d 4000; // Csúsztassa az intervallumot. $ (". Slider img: utolsó") .Clone () .prependto (".slider"); // Az utolsó dia másolata az elején van elhelyezve. $ () .eq (1) .clone () .Appendto (".slider"); // Az első dia másolatát a végén helyezzük el. // konténer. Slider eltolódások egy csúszás szélességéig. setinterval ("animáció ()", intervallum); // Az animáció () funkció elindul a diavetítés végrehajtásával. )); Funkció animáció () (var margó \u003d parseint ($ (". Slider") .css ("marginleft"); // aktuális blokk offset.slider Szélesség \u003d $ (". Slider-Box") .Width () // szélesség csúszka. Slidersamount \u003d $ (". Csúszka"). Gyermekek (). // a csúszdák száma a csúszka. Ha (Margin! \u003d (- szélesség * (slidersamount- 1))))) // Ha az aktuális dia nem az utolsó, (Margin \u003d Margin-szélesség; // A margó értéke csökken a csúszda szélességére. ) MÁS ( // Ha az utolsó dia látható, $ (". Slider") .css ("margó balra", - szélesség); // Ezután a Block.Slider visszatér a kezdeti pozícióba, margó \u003d - szélesség * 2; ) $ (". Slider") .Az ((marginleft: margó), 1000); // Block.Slider balra 1 csúszkára. } ;Ennek eredményeképpen egy egyszerű csúszka végtelen automatikus görgetéssel kiderült.
Egyszerű, könnyű (21KB egy tömörített formában), amelyet a tiszta Javascripten írt csúszka, amely nem rendelkezik függőséggel, vagyis. JQUY nélkül működik.
A következő böngészőkben tesztelték:
- Chrome 26.0.
- Firefox 20.0.
- Safari 5.1.7
- Azaz 10.
- Opera 16.0.
Az IE8 / 9 hiányos támogatása (nincs hatás).
Jellemzők
- Hozzáadhat korlátlan számú csúszkát az oldalra, még helyezzen egyet a másikba.
- Megváltoztatja a méreteket a tartalomtól való függőségtől, de lehetséges megtiltani.
- A billentyűzet navigálása - Ha a kurzor a csúszkán van, átkapcsolhatja a csúszkákat nyilakkal.
- Mobil érintőkapasztalat.
Kapcsolat
A záró címke előtt
