Egyszerű csúszka jquery előnézettel. Egyszerű csúszka előre és hátra vezérlőgombokkal

Kezdetben ez a cikk azzal a céllal készült, hogy elmesélje, hogyan hozhat létre képgörgető csúszkát weboldalakhoz. Ez a cikk semmiképpen sem oktató jellegű, csak példaként szolgál arra, hogyan valósíthatja meg mérlegelési célunkat. Az ebben a cikkben közölt kódot egyfajta sablonként használhatja az ilyen fejlesztésekhez, remélem, az általam leírtak teljes lényegét kellő részletességgel és közérthetően át tudom adni az olvasónak.

És most a lényeg, hogy nem is olyan régen csúszkát kellett helyeznem egy webhelyre, de miután kész szkripteket kerestem az interneten, nem találtam semmi érdemlegeset. némelyik nem úgy működött, ahogy kellett volna, míg mások egyáltalán nem indultak el hiba nélkül a konzolban. Használat jQuery - bővítmények számomra túl érdektelennek tűnt a csúszkához, tk. Bár ezzel megoldom a problémát, ennek a mechanizmusnak a működéséhez nem fogok érteni, és a plugin használata egy csúszka kedvéért nem túl optimális. A görbe szkripteket sem nagyon akartam megérteni, ezért úgy döntöttem, hogy saját forgatókönyvet írok a csúszkához, amit magam is megjelölök, ha szükségem van rá.

Először is el kell döntenünk magának a csúszkának a logikáját, majd folytatni kell a megvalósítást, ebben a szakaszban nagyon fontos, hogy világosan megértsük ennek a mechanizmusnak a működését, mert e nélkül nem tudunk kódot írni, pontosan úgy működik, ahogy akarjuk.

A fő célunk az lesz nézetablak, vagyis egy blokk, amiben látni fogjuk, hogyan pörögnek a képeink, benne leszünk slidewrapper, ez lesz a blokkunk, amely az összes képet tartalmazza, egy sorban sorakozva, és amely megváltoztatja pozícióját a nézetablak.


Továbbá a belső oldalakon nézetablak, függőlegesen középen, a vissza és előre gombok kapnak helyet, amelyekre kattintva a mi pozíciónk is megváltozik. slidewrapper viszonylag nézetablak, ezáltal a képek görgetésének hatását váltja ki. És végül az utolsó objektum az alján található navigációs gombjaink lesznek. nézetablak.


Amikor rájuk kattintunk, egyszerűen megnézzük ennek a gombnak a sorozatszámát, és ismét eltolással továbblépünk a kívánt diára slidewrapper(az eltolás a változtatással történik átalakítja a css tulajdonságait, melynek értékét folyamatosan számoljuk).

Szerintem ennek az egész ügynek a logikája a fentebb leírtak után világos legyen, de ha valahol még mindig vannak félreértések, akkor az alábbi kódban minden tisztázódik, csak egy kis türelem kell hozzá.

Most pedig írjunk! Először is megnyitjuk a mi index fájlés írjuk oda a szükséges jelölést:

Mint látható, semmi bonyolult blokk a csúszkáért Ugyanaz a blokk, amelybe a csúszkánkat elhelyezzük, magában nézetablak amelyben a mi slidewrapper, más néven beágyazott lista, itt li a diák és img- képek bennük. Kérjük, ügyeljen arra, hogy minden képnek azonos méretűnek vagy legalább arányosnak kell lennie, különben a csúszka ferdén fog kinézni, tk. méretei közvetlenül függenek a kép oldalarányától.

Most ezt az egészet stilizálni kell, általában a stílusokat nem nagyon kommentálják, de úgy döntöttem felhívom erre a figyelmet, hogy a jövőben ne legyen félreértés.

Kezdjük azzal blokk a csúszkáért, ez ismét a mi blokkunk az oldalon, amit a csúszkának teszünk félre, magassága a szélességétől és a képünk arányaitól függ, hiszen nézetablak a teljes szélességet elfoglalja blokk a csúszkáért aztán magamat csúszik azonos szélességű, és ennek megfelelően a benne lévő kép magassága a szélességtől függően változik (az arányok megmaradnak). Ezt az elemet vízszintesen középen helyeztem el az oldalamon, felülről 100px-el párnázva, így például kényelmesebbé tettem a helyzetét.

Elem nézetablak, mint már említettük, teljes szélességében elfoglalja a mi blokk a csúszkáért, rendelkezik az ingatlannal túlcsordulás: rejtett, lehetővé teszi, hogy elrejtse a képfolyamunkat, amely kiugrik a nézetablakból.


Következő css tulajdonság - user-select: nincs, lehetővé teszi, hogy megszabaduljon a kék választéktól egyedi elemek csúszka több gombnyomással.

Továbblépve a slidewrapper miért pozíció: relatív, de nem abszolút? Minden nagyon egyszerű, tk. ha a második lehetőséget választjuk, akkor az ingatlannal nézetablak túlcsordulása: rejtett nekünk semmi sem fog látszani, tk. magamat nézetablak nem igazodik a magassághoz slidewrapper, mert mi lesz magasság: 0... Miért számít annyira a szélesség, és egyáltalán miért állítjuk be? A helyzet az, hogy diákjaink szélessége egyenlő lesz A nézet 100%-a, és ahhoz, hogy sorba rendezzük őket, szükségünk van egy helyre, ahol állnak, tehát a szélességre slidewrapper egyenlőnek kell lennie 100%-os nézetablak szélesség megszorozva a diák számával (az én esetemben 4). Vonatkozó átmenetés átmeneti időzítés funkció akkor itt 1s pozícióváltozást jelent slidewrapper 1 másodpercen belül megtörténik, és megfigyeljük, és könnyedség be-ki- az a fajta animáció, amelyben először lassan megy, felgyorsul a közepéig, majd ismét lelassul, itt már beállíthatja az értékeket saját belátása szerint.

A tulajdonságok következő blokkja beállítja slidewrapper a gyerekei pedig nulla padding, itt feleslegesek a kommentek.

Ezután stílusozzuk a diákjainkat, szélességük egyenlő legyen a szélességgel. nézetablak, de azóta ben vannak slidewrapper, amelynek szélessége megegyezik a nézetablak szélességével szorozva a diák számával, majd megkapjuk a szélességet nézetablak ismét a szélesség 100%-ára van szükségünk slidewrapper osztjuk a diák számával (az én esetemben ismét 4-gyel). Ezután soron belüli elemekké alakítjuk a segítségével kijelző: inlineés állítsa balra az áramlást a tulajdonság hozzáadásával balra lebeg... Ról ről lista-stílus: nincs Azt mondhatom, hogy az alapértelmezett jelölő eltávolítására használom li, a legtöbb esetben egyfajta szabvány.

Val vel slide-img minden egyszerű, a kép a teljes szélességet elfoglalja csúszik, csúszik magasságához igazodik, slidewrapper magassághoz igazodik csúszik, és a magasság nézetablak viszont felveszi a magasság értékét slidewrapper, így a csúszkánk magassága a kép méretarányától és a csúszkához biztosított blokk méretétől függ majd, amiről fentebb már írtam.

Azt hiszem, itt találtuk ki a stílusokat, készítsünk egy egyszerű diavetítést egyelőre gombok nélkül, és miután megbizonyosodtunk a megfelelő működésről, adjuk hozzá és stílusosítsuk.

Nyissuk ki a mi js fájl, amely a csúszka kódját fogja tartalmazni, ne felejtse el megadni jQuery mivel ezt a keretet használva fogunk írni. Egyébként az írás idején a verziót használom jQuery 3.1.0... A szkriptet tartalmazó fájlnak a címke legvégén kell szerepelnie test mivel azokkal a DOM elemekkel fogunk dolgozni, amelyeket először inicializálni kell.

Egyelőre deklarálnunk kell pár változót, az egyik eltárolja a diaszámot, amit egy adott időpontban látunk nézetablak, elneveztem slideNow, a második pedig ugyanazon diák számát tárolja, ez az slideCount.

Változó slideNow szükséges a kezdőérték 1 beállítása, mert amikor az oldal betöltődik, a jelölésünk alapján látjuk az első becsúszást nézetablak.

V slideCount feltesszük a gyerekek számát slidewrapper, itt minden logikus.
Ezután létre kell hoznia egy funkciót, amely felelős a diák jobbról balra váltásáért, ezt deklaráljuk:

Meghívjuk a kódunk fő blokkjában, ahová eljutunk, de egyelőre elmondjuk a függvényünknek, hogy mit kell tennie:

Először is ellenőrizzük, hogy a hírfolyamunk utolsó diáján vagyunk-e? Ehhez vesszük az összes használt diánk számát $ ("# slidewrapper"). gyerekek (). hosszés ellenőrizzük a diánk számával, ha egyenlőnek bizonyulnak, akkor ez azt jelenti, hogy újra el kell kezdenünk a szalag megjelenítését, 1 diától, ami azt jelenti, hogy változtatunk css transzformációs tulajdonság nál nél slidewrapper tovább lefordítani (0, 0), így az eredeti helyzetébe tolva, hogy az első dia megjelenjen a látómezőnkben, ne feledkezzünk meg arról sem, –Webkit és –ms megfelelő, több böngészős megjelenítéshez (lásd. css tulajdonságok hivatkozása). Ezek után ne felejtsük el frissíteni a változó értékét. slideNow, tájékoztatva arról, hogy az 1. számú dia a látómezejében van: slideNow = 1;

Ugyanez a feltétel annak ellenőrzése is, hogy a látott dia száma a mi diáink számán belül van-e, de ha ez valahogy nem teljesül, akkor visszatérünk az 1. diához.

Ha az első feltétel nem teljesül, akkor ez azt jelzi, hogy bekapcsoltuk Ebben a pillanatban nem az utolsó dián vagyunk, vagy egy nem létező dián, ami azt jelenti, hogy át kell váltanunk a következőre, ezt tolással fogjuk megtenni slidewrapper balra a szélességével megegyező értékkel nézetablak, az elmozdulás ismét az ismerős tulajdonságon keresztül fog megtörténni fordít amelynek értéke egyenlő lesz "translate (" + translateWidth + "px, 0)", ahol lefordítaniWidth- az a távolság, amellyel a mi slidewrapper... Egyébként deklaráljuk ezt a változót a kódunk elején:

Miután a következő diára ugrott, mondja el a diánknakMost, hogy látjuk a következő diát: slideNow ++;

Jelenleg néhány olvasóban felmerülhet a kérdés: miért nem cseréltük le $ ("# nézet"). szélesség () például valamilyen változóhoz slideWidth hogy mindig kéznél legyen a csúszdánk szélessége? A válasz nagyon egyszerű, ha az oldalunk reszponzív, akkor ennek megfelelően a csúszkához kiosztott blokk is adaptív, ebből érthető, hogy az ablak szélességének megváltoztatásakor az oldal újratöltése nélkül (pl. a telefon oldalra), a szélesség nézetablak változni fog, és ennek megfelelően egy dia szélessége is megváltozik. Ebben az esetben a mi slidewrapper eltolódik az eredeti szélesség értékével, ami azt jelenti, hogy a képek részben vagy egyáltalán nem jelennek meg nézetablak... Írj a funkciónkra $ ("# nézet"). szélesség () ahelyett slideWidth minden csúszkaváltáskor kiszámítjuk a szélességet nézetablak, ezáltal görgetést biztosít a kívánt diához, ha a képernyő szélessége hirtelen megváltozik.

A függvényt azonban megírtuk, most egy bizonyos időintervallum után meg kell hívni, az intervallumot változóban is tárolhatjuk, hogy ha módosítani akarjuk, csak egy értéket változtassunk a kódban:

A js-ben megadott idő ezredmásodpercben van megadva.

Most írjuk fel a következő konstrukciót:

Minden sehol sem egyszerűbb, túl vagyunk az építkezésen $ (dokumentum) .ready (függvény () ()) azt mondjuk, hogy a dokumentum teljes betöltése után a következő műveleteket kell végrehajtani. Akkor csak hívjuk a függvényt nextSlide egyenlő intervallummal slideInterval, a beépített funkció használatával setInterval.

A fent végrehajtott összes művelet után a csúszkánknak jól kell forognia, de ha valami hiba történt, akkor a probléma vagy a verzióban lehet jQuery, akár be rossz kapcsolat bármilyen fájlt. Valamint azt sem kell kizárni, hogy valahol hibázhatott a kódban, ezért csak azt tudom tanácsolni, hogy nézzen át mindent.


Addig is lépjen tovább, adjon hozzá a csúszkánkhoz egy olyan funkciót, mint a görgetés leállítása lebegtetéskor, ehhez írnunk kell a fő kódblokkba (belül $ (dokumentum) .ready (függvény () ())) ilyet:

A kód elemzésének megkezdéséhez tudnunk kell, mi az switchInterval... Először is, ez egy olyan változó, amely a nextSlide függvény periodikus hívását tárolja, leegyszerűsítve ezt a kódsort használjuk: setInterval (nextSlide, slideInterval);, így alakult: switchInterval = setInterval (nextSlide, slideInterval);... Ezeket a manipulációkat követően a fő kódblokk a következő formát öltötte:

Itt az eseményt használom lebeg, ami azt jelenti, hogy "lebegéskor", ez az esemény lehetővé teszi, hogy nyomon kövessem azt a pillanatot, amikor egy tárgy fölé viszem az egérmutatót, ebben az esetben nézetablak.

Lebegtetés után törlöm a szóközt, amit zárójelben jelezek (ez a miénk switchInterval), majd vesszővel elválasztva leírom, hogy mit fogok tenni, ha visszamozgatom a kurzort, ebben a blokkban ismét hozzárendelem a switchInterval periodikus függvényhívás nextSlide.

Most, ha megnézzük, látni fogjuk, hogyan reagál a csúszkánk az egér lebegtetésére, leállítva a csúszkaváltást.

Itt az ideje, hogy gombokat adjunk a csúszkánkhoz, kezdjük az előre-hátra gombokkal.

Először is jelöljük meg őket:

Elsőre talán érthetetlen ez a jelölés, rögtön mondom, hogy ezt a két gombot egybe csomagoltam div osztállyal prev-next-btns csak az Ön kényelme érdekében ezt nem kell megtennie, az eredmény nem változik, most stílusokat adunk hozzájuk, és minden világossá válik:

Először is elhelyezzük gombjainkat keresztül pozíció: abszolút, ezáltal szabadon ellenőrizhetjük pozíciójukat saját magunkon belül nézetablak, akkor feltüntetjük ezen gombok méretét és használatát határ-sugár kerekítse le a sarkokat, hogy ezek a gombok körökké váljanak. A színük fehér lesz, vagyis #fff, és a behúzásuk a felső széltől nézetablak ennek magasságának felével lesz egyenlő nézetablak mínusz a gomb magasságának fele (esetemben 25px), így függőlegesen középre tudjuk helyezni őket. Ezután jelezni fogjuk, hogy amikor föléjük viszjük az egérmutatót, a kurzor a következőre változik mutatóés végül mondd meg gombjainknak egyenként, hogy 20 képpontos behúzást helyezzenek el a szélüktől, hogy jónak láthassuk őket.

Ismét tetszés szerint stílusozhatja az oldalelemeket, csak egy példát adok azokra a stílusokra, amelyek mellett döntöttem.

A formázás után a csúszkánk valahogy így néz ki:


Ezután térjen vissza a mi oldalunkra js fájl ahol leírjuk gombjaink működését. Nos, adjunk hozzá még egy függvényt, amely megmutatja nekünk az előző diát:

Ez az úgynevezett prevSlide, csak akkor hívja meg, ha rákattint prev-btn... Először is megnézzük, hogy az 1. dián vagyunk-e vagy sem, itt azt is megnézzük, hogy a miénk-e slideNow diáink valós hatótávolságának határain túl, és ha valamelyik feltétel működik, eltolással az utolsó diára lépünk. slidewrapper ahhoz az értékhez, amelyre szükségünk van. Ezt az értéket a következő képlettel számítjuk ki: (egy dia szélessége) * (diák száma - 1), mindezt mínusz előjellel vesszük, mivel balra toljuk, kiderül nézetablak most megmutatja nekünk az utolsó diát. A blokk végén a változót is meg kell mondanunk slideNow hogy az utolsó dia most a látóterünkben van.

Ha nem az első dián vagyunk, akkor 1-et hátra kell lépni, ehhez ismét megváltoztatjuk a tulajdonságot átalakítani diacsomagolóhoz... A képlet a következő: (egy dia szélessége) * (az aktuális dia száma - 2), mindezt ismét mínusz előjellel vesszük. De miért a -2, és nem a -1, csak 1 diát kell visszatennünk? Az a helyzet, hogy ha mondjuk a 2. dián vagyunk, akkor a változó x tulajdonságait transzformáció: lefordítás (x, 0) a miénk slidewrapper már egyenlő egy dia szélességével, ha azt mondjuk neki, hogy le kell vonnunk 1-et az aktuális dia számából, akkor ismét megkapjuk azt az egységet, amellyel már el van tolva. slidewrapper, ezért ezeket a szélességeket 0-val kell eltolni nézetablak, ami azt jelenti, hogy a slideNow-on - 2.

Most már csak ezeket a sorokat kell hozzáadnunk a fő kódblokkhoz:

Itt csak nyomon követjük, hogy történt-e kattintás a gombjainkra, és ilyenkor hívjuk a szükséges funkciókat, minden egyszerű és logikus.

Most adjuk hozzá a dianavigációs gombokat, vissza a jelöléshez:

Amint látja, belül nézetablak beágyazott lista jelent meg, adj neki egy azonosítót nav-btns, benne li- a navigációs gombjainkat, ezekhez osztályt rendelünk slide-nav-btn, azonban be is fejezhetjük a jelölést, térjünk rá a stílusokra:

Blok nav-btns, amelyben gombjaink találhatók, adjuk az ingatlant pozíció: abszolút, hogy ne nyúljon meg nézetablak magasságban, mert nál nél slidewrapper ingatlan pozíció: relatív, a szélességet 100%-ra állítottuk, így segítségével szöveg igazítása: középre a középső gombok vízszintesen relatívak nézetablak, majd az ingatlan használatával alsó egyértelművé tesszük a blokkunk számára, hogy az alsó szélétől 20 képpont távolságra legyen.

Ugyanúgy csináljuk a gombokkal, mint a csúszdákkal, de most beállítjuk őket kijelző: inline-block mivel nál nél kijelző: inline nem reagálnak rá szélességés magasság mivel abszolút elhelyezett blokkban vannak. Fehérre készítjük és a már megszokottak segítségével határ-sugár adjunk nekik kör alakot. Ha föléjük viszi az egérmutatót, megváltoztatjuk kurzorunk megjelenését a szokásos megjelenítésre.

Most pedig térjünk rá jQuery - alkatrészek:
Először deklaráljuk a navBtnId változót, amely a rákattintott gomb indexét tárolja:

Itt vagyunk, ha rákattintunk a miénkre slide-nav-btn függvényt hívjuk, amely mindenekelőtt a változóhoz rendel navBtnId a kattintott gomb indexe, vagyis annak sorszáma, mivel a számlálás nulláról indul, akkor ha a második gombra kattintunk, akkor navBtnId az értéket 1-re írjuk. Ezután egy ellenőrzést végzünk, ahol a gomb sorszámához adunk egyet, hogy olyan számot kapjunk, mintha nem 0-tól, hanem 1-től lenne a visszaszámlálás, ezt a számot összehasonlítjuk a az aktuális dia száma, ha egybeesnek, akkor nem teszünk semmit, mert a kívánt dia már megvan nézetablak.

Ha a szükséges csúszda nincs szem elől nézetablak, akkor kiszámítjuk azt a távolságot, amennyit el kell tolnunk slidewrapper balra, majd módosítsa az értéket css transzformációs tulajdonságai a fordításnál(ugyanaz a távolság pixelben, 0). Ezt már többször megtettük, így nem lehet kérdés. A végén az aktuális dia értékét ismét elmentjük egy változóba. slideNow, ez az érték úgy számítható ki, hogy hozzáadunk egyet a kattintott gomb indexéhez.

Valójában ennyi, ha valami nem tiszta, akkor hagyok egy linket a jsfiddle-re, ahol az anyagban szereplő összes kódot megadják.

Köszönöm a figyelmet!

Címkék:

• jquery csúszkát
• css
• css3 animáció
• html

Egyszerű, könnyű (21Kb tömörített) csúszka tiszta Javascript-tel írva, mindenféle függőség nélkül, pl. jQuery nélkül is működik.

A következő böngészőkben tesztelve:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE 10
• Opera 16.0

Hiányos az IE8 / 9 támogatása (nincs effektus).

Sajátosságok

• Korlátlan számú csúszkát adhat az oldalhoz, akár el is helyezheti egyiket a másikba.
• Átméretezés a tartalom alapján, de letiltható.
• Navigáció billentyűzettel – Ha a kurzor a csúszkán van, váltogathatja a nyílcsúszkákat.
• Mobil érintőképernyős események támogatása.

Kapcsolat

A záró címke előtt csatlakozni kell slidr.js vagy slidr.min.js fájlt.

HTML jelölés

slidr.js bármilyen inline, inline-block, blokk elemmel működhet, amely rendelkezik id attribútummal. Bármilyen első szintű gyermekelem használható data-slidr attribútummal, például:

• alma
• banán
• kókuszdió

Javascript

Csatlakozás után slidr.js a globális slidr objektum elérhetővé válik. A csúszka létrehozásának legegyszerűbb módja:

Slidr.create ("slidr-id"). Indítás ();

Hívjon minden beállítással:

Slidr.create ("slidr-id", (után: function (e) (console.log ("in:" + e.in.slidr);), előtte: function (e) (console.log ("out: "+ e.out.slidr);), navigációs útvonal: igaz, vezérlők:" sarok ", irány:" függőleges ", fade: false, billentyűzet: igaz, túlcsordulás: igaz, téma:" # 222 ", időzítés: (" kocka ":" 0,5 s easy-in "), érintés: igaz, átmenet:" kocka ")). start ();

Beállítások

A slidr.js összes elérhető beállítása az alábbi táblázatban látható.

A visszahívás utáni és előtti funkciók a következő adatokat kapják:

(id: "slidr-id", in: (el: # , slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in"), out: (el: # , slidr: "data-slidr-out", transz: "transition-out", dir: "direction-out"))

Slider.js globális API

A slidr globális névtér a következő funkciókat kínálja:

/ ** * Jelenlegi verzió * @return (string) major.minor.patch. * / függvény verziója () (); / ** * Elérhető átmeneti effektusok. * @return (Array) az átmenetek. * / függvényátmenetek () (); / ** * Létrehozza és visszaadja a Slidr-t. * A függvény kétszeri meghívása ugyanazon az elemen a már létrehozott Slidr objektumot adja vissza. * @param (string) elemazonosító a Slidr-hez. * @param (Object =) opt_settings Csúszka beállításai. * / function create (id, opt_settings) ();

Slider API

Rövid bejegyzés

Var s = slidr.create ("slidr-api-demo", (morzsa: igaz, túlcsordulás: igaz)). Add ("h", ["egy", "két", "három", "egy"]) .add ("v", ["öt", "négy", "három", "öt"], "kocka") .start ();

A Slidr.js API-funkciók teljes listája alább látható.

/ ** * Indítsa el a Slidr-t! * Automatikusan megkeresi a létrehozandó diákat, ha a hívás indítása előtt semmit sem adtak hozzá (). * @param (karakterlánc) opt_start `data-slidr` id a kezdéshez. * @return (this) * / function start (opt_start) (); / ** * Ellenőrizze, hogy tudunk-e csúszni. * @param (karakterlánc) egy irány ("fel", "le", "balra", "jobbra") vagy egy "data-slidr" azonosító mellett. * @return (logikai érték) * / függvény canSlide (tovább) (); / ** * Csúsztassa! * @param (karakterlánc) egy irány ("fel", "le", "balra", "jobbra") vagy egy "data-slidr" azonosító mellett. * @return (ez) * / függvény dia (következő) (); / ** * Diakészletet ad hozzá. * @param (karakterlánc) irány `vízszintes || h" vagy "függőleges || v`. * @param (Array) ids A Slidr-hez hozzáadandó `data-slidr` id-ek listája. A diáknak a Slidr közvetlen gyermekeinek kell lennie. * @param (string =) opt_transition A diák közötti átmenet, vagy használja az alapértelmezett. * @param (boolean =) opt_overwrite A meglévő dialeképezések/átmenetek felülírása ütközés esetén. * @return (this) * / függvény add (irány, azonosítók, opt_transition, opt_overwrite) (); / ** * Automatikusan előrelépés a következő diára egy bizonyos időkorlát után. A hívások elkezdődnek () ha még nem hívták. * @param (int =) opt_msec Az egyes diaátmenetek közötti millisek száma. Alapértelmezés szerint 5000 (5 másodperc). * @param (string = ) opt_direction "fel", "le", "balra" vagy "jobbra". Alapértelmezés szerint "jobbra". * @param (string =) opt_start A `data-slidr` azonosító, amelynél kezdődik (csak akkor működik, ha az auto hívódik a Slidr elindításához). * @return (this) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Az automatikus áttérés leállítása, ha be van kapcsolva. * @return (this) * / függvény stop () (); / ** * Egyéni animációs időzítés beállítása. * @param (karakterlánc | Objektum) átmenet Vagy egy átmeneti név (azaz "kocka"), vagy egy ("transition": "timeing") objektum. * @param (string =) opt_timing Az új animációs időzítés (azaz "0,5 mp-es könnyítés"). Nem szükséges, ha az átmenet objektum. * @return (this) * / függvény időzítése (átmenet, opt_timing) (); / ** * Zsemlemorzsa váltása. * @return (this) * / function kenyérmorzsa () (); / ** * Vezérlők váltása. * @param (string =) opt_scheme Kapcsolja be/ki, ha nincs jelen, különben módosítsa az elrendezést. "határ", "sarok" vagy "nincs". * @return (this) * / függvényvezérlők (opt_scheme) ();

Az oldal görgetése diaváltás közben

Ez a csúnya hiba néhány böngészőben megjelenik. A javításhoz stílust kell adni a testhez:

Test (túlcsordulás: rejtett;)

Dinamikus átméretezés

A Slidr "érti", hogy át kell-e méretezni a csúszkát, hogy illeszkedjen a képhez. Ha a csúszkablokk méretei vannak megadva, akkor a Slidr nem fogja automatikusan megváltoztatni azokat. Ha meg van adva a min-szélesség és a min-magasság tulajdonság, akkor a csúszka átméretezi a tartalomhoz illeszkedőt, figyelembe véve ezeket az értékeket. Ellenkező esetben a méretezés automatikusan megtörténik.

Automatikus átméretezés

Statikus méretek

Slidr vezérlők

A vezérlőelemek jelölése a következő:

A CSS-választókkal bármilyen csúszkavezérlést testreszabhat:

Félre .slidr-control.right (szélesség: 50px! Fontos; magasság: 50px! Fontos; felső: 50%! Fontos; margó-fels: -25px! Fontos; jobb: -25px! Fontos; szegélysugár: 25px; háttér : url ("/ static / images / arrow_right.png") 14 képpont 13 képpont ismétlés nélküli fekete; átlátszatlanság: 0,4;) félre .slidr-control.right: hover (átlátszatlanság: 1;)

A nyíl vezérlés a: pszeudo szelektor után valósul meg, így elrejtéséhez használja a következő kódot:

// Egyetlen nyíl elrejtése egyetlen vezérlőn belül. félre .slidr-control.right: after (border-color: átlátszó! fontos;) // Az összes nyíl elrejtése egyetlen vezérlőn belül. félre .slidr-control: after (border-color: átlátszó! fontos;) // Minden Slidr nyíl elrejtése. félre .slidr-control: after (szegélyszín: átlátszó! fontos;)

Slidr kenyérmorzsa

A navigációs elemek egyszerű HTML-jelöléssel rendelkeznek. Minden ul egy teljes sort, és minden li egy különálló kenyérmorzsát jelent:

Panírmorzsa formázása CSS-sel:

// A pozíció, a méret, a keretszín és a háttérszín testreszabása. félre (jobbra: 50%! fontos; margó-jobbra: -41px! fontos;) félre .slidr-breadcrumbs li (szélesség: 15px! fontos; magasság: 15px! fontos; margó: 3px! fontos;) félre .slidr-breadcrumbs li.normal (szegélyszín: fehér! fontos;) félre .slidr-breadcrumbs li.active (háttérszín: fekete! fontos;)

Engedély

Ez a szoftver ingyenesen használható az MIT licence alapján.

Az idő nem áll meg, és vele együtt halad. Ez az internet terjedelmére is hatással volt. Már most látszik, hogyan változik az oldalak megjelenése, különösen népszerű a reszponzív dizájn. És ezzel kapcsolatban jó néhány új jelent meg. reszponzív jquery csúszkák, galériák, körhinta vagy hasonló bővítmények.
1. Reszponzív vízszintes bejegyzések csúszkája

Adaptív vízszintes körhinta részletes telepítési útmutatóval. Egyszerű stílusban készült, de tetszés szerint formázhatod.

2. A Glide.js csúszkája

Ez a csúszka bármilyen webhelyen használható. Nyílt forráskódú Glide.js-t használ. A csúszkák színei könnyen változtathatók.

3. Döntött tartalom diavetítés

Reszponzív tartalom csúszka. Ennek a csúszkának a csúcspontja a képek 3D-s hatása, valamint a megjelenés különböző animációi véletlenszerű sorrendben.

4. Csúszka HTML5 vászon használatával

Nagyon szép és lenyűgöző csúszka interaktív részecskékkel. HTML5 vászon használatával hajtják végre,

5. „Képek átalakítása” csúszka

Csúszka morfológiai hatással (Sima átalakítás egyik objektumról a másikra). Ebben a példában a csúszka jól működik egy webfejlesztő portfóliójához vagy egy webstúdióhoz portfólióként.

6. Kör alakú csúszka

Egy kör alakú csúszka flip-effektussal.

7. Elmosódott háttér csúszka

Adaptív csúszka kapcsolóval és elhomályosítja a hátteret.

8. Adaptív divatcsúszka

Egyszerű, könnyű és reszponzív webhelycsúszka.

9. Slicebox – jQuery 3D képcsúszka(FRISSÍTVE)

A Slicebox csúszka frissített verziója javításokkal és új funkciókkal.

10. Ingyenes animált reszponzív képrács

A jQuery beépülő modul rugalmas képrács létrehozásához, amely különböző animációkkal és időzítésekkel váltja a felvételeket. Ez jól működhet háttérként vagy dekorációs elemként az oldalon, hiszen testre szabhatjuk az új képek megjelenését és átmeneteiket. A bővítmény több változatban készül.

11. Flexslider

Univerzális ingyenes bővítmény webhelyéhez. Ez a bővítmény számos csúszka és körhinta opcióval rendelkezik.

12. Fényképkeret

Fotorama egy sokoldalú bővítmény. Rengeteg beállítás van benne, minden gyorsan és egyszerűen működik, lehetőség van a diák teljes képernyős megtekintésére. A csúszka fix méretben és reszponzívan is használható, miniatűrökkel vagy anélkül, körkörös görgetéssel vagy anélkül, és még sok más.

P.S.Többször betettem a csúszkát, és szerintem az egyik legjobb

13. Ingyenes és reszponzív 3D-s galéria csúszka miniatűrökkel.

Kísérleti galéria csúszka 3DPanelLayout hálóval és érdekes animációs effektusokkal.

14. Csúszka a css3-on

A reszponzív csúszka css3-ban készült, egyenletes tartalomáramlással és könnyű animációval.

15. WOW Slider

Wow csúszka egy képcsúszka lenyűgöző látványvilággal.

17. Rugalmas

Teljesen érzékeny, rugalmas csúszka dia miniatűrökkel.

18. Hasított

Ez egy css3 animációt használó, teljes képernyős reszponzív csúszka. A csúszka két változatban készül. az animáció meglehetősen szokatlan és gyönyörű.

19.Adaptive Photo Gallery plus

Egy egyszerű ingyenes csúszkagaléria feltöltött képekkel.

20. Reszponzív csúszka a WordPresshez

Reszponzív ingyenes csúszka a WP-hez.

21. Parallax Content Slider

Csúszka parallaxis hatással és az egyes elemek vezérlése CSS3-mal.

22. Csúszka összekötő zenével

Csúszka a nyílt forráskódú JPlayer használatával. Ez a csúszka zenét tartalmazó prezentációra hasonlít.

23. Csúszka jmpress.js-szel

A reszponzív csúszka a jmpress.js-n alapul, ezért lehetővé teszi néhány klassz 3D effektus használatát a diákon.

24. Fast Hover Slideshow

Diavetítés gyors diaváltással. A csúszkák kapcsolója lebeg.

25. Képharmonika CSS3-mal

Képek harmonika css3 használatával.

26. Érintésre optimalizált galériabővítmény

Ez egy reszponzív galéria, amely érintőképernyős eszközökhöz van optimalizálva.

27.3D Galéria

3D fali galéria- a Safari böngészőhöz készült, ahol a 3D hatás látható lesz. Más böngészőben megnézve a funkcionalitás rendben lesz, de a 3D hatás nem lesz látható.

28. Lapozási csúszka

Reszponzív lapozási csúszka a jQuery UI csúszkával. az ötlet egy egyszerű navigációs koncepció használata. Lehetőség van az összes kép visszatekerésére vagy dia-by-dia váltásra.

29. Képmontázs jQuery segítségével

A képek automatikus pozicionálása a képernyő szélessége alapján. Nagyon hasznos dolog portfólió-webhely kialakításánál.

30.3D Galéria

Egyszerű 3D kör alakú csúszka css3-ban és jQuery-ben.

31. Teljes képernyős mód 3D effektussal css3-on és jQuery-n

Teljes képernyős csúszka gyönyörű átmenettel.

Szükségünk van egy egyszerű csúszkára, automatikus görgetéssel. Lássunk neki ...

A csúszka munkájának leírása.

A diák egy bizonyos idő elteltével sorba rendeződik és görgethető.

A piros keret a csúszka látható részét mutatja.

A csúszka végén meg kell másolnia az első diát. Erre azért van szükség, hogy biztosítsuk a görgetést a harmadik diáról az elsőre. Az utolsó diát is hozzá kell adni az elejéhez, hogy visszafelé tudjon görgetni az első diától a harmadik felé. Az alábbiakban látható, hogyan működik a csúszka előrefelé.

Amikor a csúszka eléri a végét, a csúszka elejéről készült másolat azonnal az utolsó dia helyére kerül. Ezután a ciklus újra megismétlődik. Ez egy végtelen csúszka illúzióját kelti.

HTML jelölés

Először is készítsünk egy egyszerű, automatikusan görgető csúszkát. Két konténer kell a működéséhez. Az első a csúszka látható területének méretét állítja be, a második pedig a csúszkák elhelyezéséhez szükséges. A csúszka jelölése így fog kinézni:

> >

Csúszda stílusok

.slider-box (szélesség: 320px; magasság: 210px; túlcsordulás: rejtett;) .slider (pozíció: relatív; szélesség: 10000px; magasság: 210px;) .slider img (lebegő: balra; z-index: 0;)

A.slider-box tároló beállítja a csúszka méreteit. A túlcsordulás: rejtett tulajdonság elrejti az összes olyan elemet, amely nem esik az elemen belüli területre.

A csúszka tárolója nagy szélességűre van állítva. Erre azért van szükség, hogy az összes csúszda beleférjen.

A diák a float: left tulajdonság segítségével igazodik.

Az alábbiakban a csúszkablokkok sematikus elrendezése látható.

Forgatókönyv

A diák mozgatása a tároló csúszka margó balra tulajdonságának zökkenőmentes megváltoztatásával történik.

$ (függvény () (var szélesség = $ (". slider-box") .width (); // Csúszka szélessége. intervallum = 4000; // Diaváltási intervallum.$ (. slider img: last") .clone () .prependTo (.slider"); // Az utolsó dia másolata az elejére kerül.$ () .eq (1) .klón () .appendTo (.csúszka"); // Az első dia másolata a végére kerül. // A container.slider balra van tolva egy diaszélességgel. setInterval ("animáció ()", intervallum); // Az animációs () funkció a diák váltásához fut.)); függvény animáció () (var margin = parseInt ($ (. csúszka") .css ("marginLeft")); // A blokk aktuális eltolása. Csúszka szélesség = $ (". slider-box") .width (), // Csúszka szélessége. slidersAmount = $ (. slider") .children () .length; // A csúszkában lévő diák száma. if (margó! = (- szélesség * (slidersAmount- 1))) // Ha az aktuális dia nem az utolsó,(margó = margó-szélesség; // akkor a margó értéke csökken a dia szélességével.) más ( // Ha az utolsó dia látható,$ (. csúszka") .css ("margin-left", - szélesség); // ekkor a csúszkablokk visszatér a kiinduló helyzetébe, margó = - szélesség * 2; ) $ (. csúszka") .animate ((margóBal: margó), 1000); // A csúszkablokk 1 diával balra van tolva. } ;

Az eredmény egy egyszerű csúszka végtelen automatikus görgetéssel.

Kezdetben ez a cikk azzal a céllal készült, hogy elmesélje, hogyan hozhat létre képgörgető csúszkát weboldalakhoz. Ez a cikk semmiképpen sem oktató jellegű, csak példaként szolgál arra, hogyan valósíthatja meg mérlegelési célunkat. Az ebben a cikkben közölt kódot egyfajta sablonként használhatja az ilyen fejlesztésekhez, remélem, az általam leírtak teljes lényegét kellő részletességgel és közérthetően át tudom adni az olvasónak.

És most a lényeg, hogy nem is olyan régen csúszkát kellett helyeznem egy webhelyre, de miután kész szkripteket kerestem az interneten, nem találtam semmi érdemlegeset. némelyik nem úgy működött, ahogy kellett volna, míg mások egyáltalán nem indultak el hiba nélkül a konzolban. Használat jQuery - bővítmények számomra túl érdektelennek tűnt a csúszkához, tk. Bár ezzel megoldom a problémát, ennek a mechanizmusnak a működéséhez nem fogok érteni, és a plugin használata egy csúszka kedvéért nem túl optimális. A görbe szkripteket sem nagyon akartam megérteni, ezért úgy döntöttem, hogy saját forgatókönyvet írok a csúszkához, amit magam is megjelölök, ha szükségem van rá.

Először is el kell döntenünk magának a csúszkának a logikáját, majd folytatni kell a megvalósítást, ebben a szakaszban nagyon fontos, hogy világosan megértsük ennek a mechanizmusnak a működését, mert e nélkül nem tudunk kódot írni, pontosan úgy működik, ahogy akarjuk.

A fő célunk az lesz nézetablak, vagyis egy blokk, amiben látni fogjuk, hogyan pörögnek a képeink, benne leszünk slidewrapper, ez lesz a blokkunk, amely az összes képet tartalmazza, egy sorban sorakozva, és amely megváltoztatja pozícióját a nézetablak.


Továbbá a belső oldalakon nézetablak, függőlegesen középen, a vissza és előre gombok kapnak helyet, amelyekre kattintva a mi pozíciónk is megváltozik. slidewrapper viszonylag nézetablak, ezáltal a képek görgetésének hatását váltja ki. És végül az utolsó objektum az alján található navigációs gombjaink lesznek. nézetablak.


Amikor rájuk kattintunk, egyszerűen megnézzük ennek a gombnak a sorozatszámát, és ismét eltolással továbblépünk a kívánt diára slidewrapper(az eltolás a változtatással történik átalakítja a css tulajdonságait, melynek értékét folyamatosan számoljuk).

Szerintem ennek az egész ügynek a logikája a fentebb leírtak után világos legyen, de ha valahol még mindig vannak félreértések, akkor az alábbi kódban minden tisztázódik, csak egy kis türelem kell hozzá.

Most pedig írjunk! Először is megnyitjuk a mi index fájlés írjuk oda a szükséges jelölést:

• 
• 
• 
• 

Mint látható, semmi bonyolult blokk a csúszkáért Ugyanaz a blokk, amelybe a csúszkánkat elhelyezzük, magában nézetablak amelyben a mi slidewrapper, más néven beágyazott lista, itt li a diák és img- képek bennük. Kérjük, ügyeljen arra, hogy minden képnek azonos méretűnek vagy legalább arányosnak kell lennie, különben a csúszka ferdén fog kinézni, tk. méretei közvetlenül függenek a kép oldalarányától.

Most ezt az egészet stilizálni kell, általában a stílusokat nem nagyon kommentálják, de úgy döntöttem felhívom erre a figyelmet, hogy a jövőben ne legyen félreértés.

törzs (margó: 0; kitöltés: 0;) # csúszkablokk (szélesség: 800 képpont; margó: 0 automatikus; margó felső: 100 képpont;) #nézetablak (szélesség: 100%; kijelző: táblázat; pozíció: relatív; túlcsordulás: rejtett; -webkit-user-select: nincs; -moz-user-select: nincs; -ms-user-select: nincs; -o-user-select: nincs; user-select: nincs;) #slidewrapper ( pozíció: relatív; szélesség: kalkulált (100% * 4); felül: 0; bal: 0; margó: 0; kitöltés: 0; -webkit-transition: 1s; -o-transition: 1s; átmenet: 1s; -webkit -átmenet-időzítés-funkció: könnyű be-ki; -o-átmenet-időzítés-funkció: könnyű-be-kimenet; átmenet-időzítés-funkció: könnyű be-ki;) #slidewrapper ul, #slidewrapper li (margó : 0; kitöltés: 0;) #slidewrapper li (szélesség: kalkulált (100% / 4); lista-stílus: nincs; megjelenítés: soron belüli; lebegés: balra;) .slide-img (szélesség: 100%;)

Kezdjük azzal blokk a csúszkáért, ez ismét a mi blokkunk az oldalon, amit a csúszkának teszünk félre, magassága a szélességétől és a képünk arányaitól függ, hiszen nézetablak a teljes szélességet elfoglalja blokk a csúszkáért aztán magamat csúszik azonos szélességű, és ennek megfelelően a benne lévő kép magassága a szélességtől függően változik (az arányok megmaradnak). Ezt az elemet vízszintesen középen helyeztem el az oldalamon, felülről 100px-el párnázva, így például kényelmesebbé tettem a helyzetét.

Elem nézetablak, mint már említettük, teljes szélességében elfoglalja a mi blokk a csúszkáért, rendelkezik az ingatlannal túlcsordulás: rejtett, lehetővé teszi, hogy elrejtse a képfolyamunkat, amely kiugrik a nézetablakból.


Következő css tulajdonság - user-select: nincs, lehetővé teszi, hogy a gombokra többszöri kattintással megszabaduljon az egyes csúszkaelemek kék kijelölésétől.

Továbblépve a slidewrapper miért pozíció: relatív, de nem abszolút? Minden nagyon egyszerű, tk. ha a második lehetőséget választjuk, akkor az ingatlannal nézetablak túlcsordulása: rejtett nekünk semmi sem fog látszani, tk. magamat nézetablak nem igazodik a magassághoz slidewrapper, mert mi lesz magasság: 0... Miért számít annyira a szélesség, és egyáltalán miért állítjuk be? A helyzet az, hogy diákjaink szélessége egyenlő lesz A nézet 100%-a, és ahhoz, hogy sorba rendezzük őket, szükségünk van egy helyre, ahol állnak, tehát a szélességre slidewrapper egyenlőnek kell lennie 100%-os nézetablak szélesség megszorozva a diák számával (az én esetemben 4). Vonatkozó átmenetés átmeneti időzítés funkció akkor itt 1s pozícióváltozást jelent slidewrapper 1 másodpercen belül megtörténik, és megfigyeljük, és könnyedség be-ki- az a fajta animáció, amelyben először lassan megy, felgyorsul a közepéig, majd ismét lelassul, itt már beállíthatja az értékeket saját belátása szerint.

A tulajdonságok következő blokkja beállítja slidewrapper a gyerekei pedig nulla padding, itt feleslegesek a kommentek.

Ezután stílusozzuk a diákjainkat, szélességük egyenlő legyen a szélességgel. nézetablak, de azóta ben vannak slidewrapper, amelynek szélessége megegyezik a nézetablak szélességével szorozva a diák számával, majd megkapjuk a szélességet nézetablak ismét a szélesség 100%-ára van szükségünk slidewrapper osztjuk a diák számával (az én esetemben ismét 4-gyel). Ezután soron belüli elemekké alakítjuk a segítségével kijelző: inlineés állítsa balra az áramlást a tulajdonság hozzáadásával balra lebeg... Ról ről lista-stílus: nincs Azt mondhatom, hogy az alapértelmezett jelölő eltávolítására használom li, a legtöbb esetben egyfajta szabvány.

Val vel slide-img minden egyszerű, a kép a teljes szélességet elfoglalja csúszik, csúszik magasságához igazodik, slidewrapper magassághoz igazodik csúszik, és a magasság nézetablak viszont felveszi a magasság értékét slidewrapper, így a csúszkánk magassága a kép méretarányától és a csúszkához biztosított blokk méretétől függ majd, amiről fentebb már írtam.

Azt hiszem, itt találtuk ki a stílusokat, készítsünk egy egyszerű diavetítést egyelőre gombok nélkül, és miután megbizonyosodtunk a megfelelő működésről, adjuk hozzá és stílusosítsuk.

Nyissuk ki a mi js fájl, amely a csúszka kódját fogja tartalmazni, ne felejtse el megadni jQuery mivel ezt a keretet használva fogunk írni. Egyébként az írás idején a verziót használom jQuery 3.1.0... A szkriptet tartalmazó fájlnak a címke legvégén kell szerepelnie test mivel azokkal a DOM elemekkel fogunk dolgozni, amelyeket először inicializálni kell.

Egyelőre deklarálnunk kell pár változót, az egyik eltárolja a diaszámot, amit egy adott időpontban látunk nézetablak, elneveztem slideNow, a második pedig ugyanazon diák számát tárolja, ez az slideCount.

var slideNow = 1; var slideCount = $ ("# slidewrapper"). children (). hossz);

Változó slideNow szükséges a kezdőérték 1 beállítása, mert amikor az oldal betöltődik, a jelölésünk alapján látjuk az első becsúszást nézetablak.

V slideCount feltesszük a gyerekek számát slidewrapper, itt minden logikus.
Ezután létre kell hoznia egy funkciót, amely felelős a diák jobbról balra váltásáért, ezt deklaráljuk:

függvény nextSlide () ()

Meghívjuk a kódunk fő blokkjában, ahová eljutunk, de egyelőre elmondjuk a függvényünknek, hogy mit kell tennie:

function nextSlide () (if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ($ ("# slidewrapper"). css ("átalakítás", "fordítás (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# nézetablak"). szélesség () * ( slideNow); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0 ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Először is ellenőrizzük, hogy a hírfolyamunk utolsó diáján vagyunk-e? Ehhez vesszük az összes használt diánk számát $ ("# slidewrapper"). gyerekek (). hosszés ellenőrizzük a diánk számával, ha egyenlőnek bizonyulnak, akkor ez azt jelenti, hogy újra el kell kezdenünk a szalag megjelenítését, 1 diától, ami azt jelenti, hogy változtatunk css transzformációs tulajdonság nál nél slidewrapper tovább lefordítani (0, 0), így az eredeti helyzetébe tolva, hogy az első dia megjelenjen a látómezőnkben, ne feledkezzünk meg arról sem, –Webkit és –ms megfelelő, több böngészős megjelenítéshez (lásd. css tulajdonságok hivatkozása). Ezek után ne felejtsük el frissíteni a változó értékét. slideNow, tájékoztatva arról, hogy az 1. számú dia a látómezejében van: slideNow = 1;

Ugyanez a feltétel annak ellenőrzése is, hogy a látott dia száma a mi diáink számán belül van-e, de ha ez valahogy nem teljesül, akkor visszatérünk az 1. diához.

Ha az első feltétel nem teljesül, akkor ez azt jelenti, hogy pillanatnyilag nem az utolsó dián vagyunk, vagy valamelyik nem létező dián, vagyis át kell váltanunk a következőre, ezt tolással fogjuk megtenni. slidewrapper balra a szélességével megegyező értékkel nézetablak, az elmozdulás ismét az ismerős tulajdonságon keresztül fog megtörténni fordít amelynek értéke egyenlő lesz "translate (" + translateWidth + "px, 0)", ahol lefordítaniWidth- az a távolság, amellyel a mi slidewrapper... Egyébként deklaráljuk ezt a változót a kódunk elején:

var translateWidth = 0;

Miután a következő diára ugrott, mondja el a diánknakMost, hogy látjuk a következő diát: slideNow ++;

Jelenleg néhány olvasóban felmerülhet a kérdés: miért nem cseréltük le $ ("# nézet"). szélesség () például valamilyen változóhoz slideWidth hogy mindig kéznél legyen a csúszdánk szélessége? A válasz nagyon egyszerű, ha az oldalunk reszponzív, akkor ennek megfelelően a csúszkához kiosztott blokk is adaptív, ebből érthető, hogy az ablak szélességének megváltoztatásakor az oldal újratöltése nélkül (pl. a telefon oldalra), a szélesség nézetablak változni fog, és ennek megfelelően egy dia szélessége is megváltozik. Ebben az esetben a mi slidewrapper eltolódik az eredeti szélesség értékével, ami azt jelenti, hogy a képek részben vagy egyáltalán nem jelennek meg nézetablak... Írj a funkciónkra $ ("# nézet"). szélesség () ahelyett slideWidth minden csúszkaváltáskor kiszámítjuk a szélességet nézetablak, ezáltal görgetést biztosít a kívánt diához, ha a képernyő szélessége hirtelen megváltozik.

A függvényt azonban megírtuk, most egy bizonyos időintervallum után meg kell hívni, az intervallumot változóban is tárolhatjuk, hogy ha módosítani akarjuk, csak egy értéket változtassunk a kódban:

var slideInterval = 2000;

A js-ben megadott idő ezredmásodpercben van megadva.

Most írjuk fel a következő konstrukciót:

$ (dokumentum) .ready (függvény () (setInterval (nextSlide, slideInterval);));

Minden sehol sem egyszerűbb, túl vagyunk az építkezésen $ (dokumentum) .ready (függvény () ()) azt mondjuk, hogy a dokumentum teljes betöltése után a következő műveleteket kell végrehajtani. Akkor csak hívjuk a függvényt nextSlide egyenlő intervallummal slideInterval, a beépített funkció használatával setInterval.

A fent végrehajtott összes művelet után a csúszkánknak jól kell forognia, de ha valami hiba történt, akkor a probléma vagy a verzióban lehet jQuery, vagy bármely fájl rossz kapcsolatában. Valamint azt sem kell kizárni, hogy valahol hibázhatott a kódban, ezért csak azt tudom tanácsolni, hogy nézzen át mindent.


Addig is lépjen tovább, adjon hozzá a csúszkánkhoz egy olyan funkciót, mint a görgetés leállítása lebegtetéskor, ehhez írnunk kell a fő kódblokkba (belül $ (dokumentum) .ready (függvény () ())) ilyet:

$ ("# viewport"). hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nextSlide, slideInterval);));

A kód elemzésének megkezdéséhez tudnunk kell, mi az switchInterval... Először is, ez egy olyan változó, amely a nextSlide függvény periodikus hívását tárolja, leegyszerűsítve ezt a kódsort használjuk: setInterval (nextSlide, slideInterval);, így alakult: switchInterval = setInterval (nextSlide, slideInterval);... Ezeket a manipulációkat követően a fő kódblokk a következő formát öltötte:

$ (dokumentum) .ready (function () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport"). hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval () nextSlide, slideInterval ;))))

Itt az eseményt használom lebeg, ami azt jelenti, hogy "lebegéskor", ez az esemény lehetővé teszi, hogy nyomon kövessem azt a pillanatot, amikor egy tárgy fölé viszem az egérmutatót, ebben az esetben nézetablak.

Lebegtetés után törlöm a szóközt, amit zárójelben jelezek (ez a miénk switchInterval), majd vesszővel elválasztva leírom, hogy mit fogok tenni, ha visszamozgatom a kurzort, ebben a blokkban ismét hozzárendelem a switchInterval periodikus függvényhívás nextSlide.

Most, ha megnézzük, látni fogjuk, hogyan reagál a csúszkánk az egér lebegtetésére, leállítva a csúszkaváltást.

Itt az ideje, hogy gombokat adjunk a csúszkánkhoz, kezdjük az előre-hátra gombokkal.

Először is jelöljük meg őket:

• 
• 
• 
• 

Elsőre talán érthetetlen ez a jelölés, rögtön mondom, hogy ezt a két gombot egybe csomagoltam div osztállyal prev-next-btns csak az Ön kényelme érdekében ezt nem kell megtennie, az eredmény nem változik, most stílusokat adunk hozzájuk, és minden világossá válik:

# prev-btn, # next-btn (pozíció: abszolút; szélesség: 50 képpont; magasság: 50 képpont; háttérszín: #fff; szegélysugár: 50%; felső: kalkuláció (50% - 25 képpont);) # prev- btn: hover, # next-btn: hover (kurzor: pointer;) # prev-btn (balra: 20px;) # next-btn (jobbra: 20px;)

Először is elhelyezzük gombjainkat keresztül pozíció: abszolút, ezáltal szabadon ellenőrizhetjük pozíciójukat saját magunkon belül nézetablak, akkor feltüntetjük ezen gombok méretét és használatát határ-sugár kerekítse le a sarkokat, hogy ezek a gombok körökké váljanak. A színük fehér lesz, vagyis #fff, és a behúzásuk a felső széltől nézetablak ennek magasságának felével lesz egyenlő nézetablak mínusz a gomb magasságának fele (esetemben 25px), így függőlegesen középre tudjuk helyezni őket. Ezután jelezni fogjuk, hogy amikor föléjük viszjük az egérmutatót, a kurzor a következőre változik mutatóés végül mondd meg gombjainknak egyenként, hogy 20 képpontos behúzást helyezzenek el a szélüktől, hogy jónak láthassuk őket.

Ismét tetszés szerint stílusozhatja az oldalelemeket, csak egy példát adok azokra a stílusokra, amelyek mellett döntöttem.

A formázás után a csúszkánk valahogy így néz ki:


Ezután térjen vissza a mi oldalunkra js fájl ahol leírjuk gombjaink működését. Nos, adjunk hozzá még egy függvényt, amely megmutatja nekünk az előző diát:

függvény prevSlide () (if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0) ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px) , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow--;))

Ez az úgynevezett prevSlide, csak akkor hívja meg, ha rákattint prev-btn... Először is megnézzük, hogy az 1. dián vagyunk-e vagy sem, itt azt is megnézzük, hogy a miénk-e slideNow diáink valós hatótávolságának határain túl, és ha valamelyik feltétel működik, eltolással az utolsó diára lépünk. slidewrapper ahhoz az értékhez, amelyre szükségünk van. Ezt az értéket a következő képlettel számítjuk ki: (egy dia szélessége) * (diák száma - 1), mindezt mínusz előjellel vesszük, mivel balra toljuk, kiderül nézetablak most megmutatja nekünk az utolsó diát. A blokk végén a változót is meg kell mondanunk slideNow hogy az utolsó dia most a látóterünkben van.

Ha nem az első dián vagyunk, akkor 1-et hátra kell lépni, ehhez ismét megváltoztatjuk a tulajdonságot átalakítani diacsomagolóhoz... A képlet a következő: (egy dia szélessége) * (az aktuális dia száma - 2), mindezt ismét mínusz előjellel vesszük. De miért a -2, és nem a -1, csak 1 diát kell visszatennünk? Az a helyzet, hogy ha mondjuk a 2. dián vagyunk, akkor a változó x tulajdonságait transzformáció: lefordítás (x, 0) a miénk slidewrapper már egyenlő egy dia szélességével, ha azt mondjuk neki, hogy le kell vonnunk 1-et az aktuális dia számából, akkor ismét megkapjuk azt az egységet, amellyel már el van tolva. slidewrapper, ezért ezeket a szélességeket 0-val kell eltolni nézetablak, ami azt jelenti, hogy a slideNow-on - 2.

Most már csak ezeket a sorokat kell hozzáadnunk a fő kódblokkhoz:

$ ("# next-btn"). kattintás (függvény () (nextSlide ();)); $ ("# prev-btn"). kattintás (függvény () (prevSlide ();));

Itt csak nyomon követjük, hogy történt-e kattintás a gombjainkra, és ilyenkor hívjuk a szükséges funkciókat, minden egyszerű és logikus.

Most adjuk hozzá a dianavigációs gombokat, vissza a jelöléshez:

• 
• 
• 
• 

Amint látja, belül nézetablak beágyazott lista jelent meg, adj neki egy azonosítót nav-btns, benne li- a navigációs gombjainkat, ezekhez osztályt rendelünk slide-nav-btn, azonban be is fejezhetjük a jelölést, térjünk rá a stílusokra:

# nav-btns (pozíció: abszolút; szélesség: 100%; alsó: 20 képpont; kitöltés: 0; margó: 0; szöveg igazítása: középre;) .slide-nav-btn (pozíció: relatív; megjelenítés: inline-block; listastílus: nincs; szélesség: 20 képpont; magasság: 20 képpont; háttérszín: #fff; szegélysugár: 50%; margó: 3 képpont;) .slide-nav-btn: hover (kurzor: mutató;)

Blok nav-btns, amelyben gombjaink találhatók, adjuk az ingatlant pozíció: abszolút, hogy ne nyúljon meg nézetablak magasságban, mert nál nél slidewrapper ingatlan pozíció: relatív, a szélességet 100%-ra állítottuk, így segítségével szöveg igazítása: középre a középső gombok vízszintesen relatívak nézetablak, majd az ingatlan használatával alsó egyértelművé tesszük a blokkunk számára, hogy az alsó szélétől 20 képpont távolságra legyen.

Ugyanúgy csináljuk a gombokkal, mint a csúszdákkal, de most beállítjuk őket kijelző: inline-block mivel nál nél kijelző: inline nem reagálnak rá szélességés magasság mivel abszolút elhelyezett blokkban vannak. Fehérre készítjük és a már megszokottak segítségével határ-sugár adjunk nekik kör alakot. Ha föléjük viszi az egérmutatót, megváltoztatjuk kurzorunk megjelenését a szokásos megjelenítésre.

Most pedig térjünk rá jQuery - alkatrészek:
Először deklaráljuk a navBtnId változót, amely a rákattintott gomb indexét tárolja:

var navBtnId = 0;
$ (. slide-nav-btn"). kattintson (függvény () (navBtnId = $ (this) .index ();); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# nézetablak"). szélesség () * (navBtnId); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Itt vagyunk, ha rákattintunk a miénkre slide-nav-btn függvényt hívjuk, amely mindenekelőtt a változóhoz rendel navBtnId a kattintott gomb indexe, vagyis annak sorszáma, mivel a számlálás nulláról indul, akkor ha a második gombra kattintunk, akkor navBtnId az értéket 1-re írjuk. Ezután egy ellenőrzést végzünk, ahol a gomb sorszámához adunk egyet, hogy olyan számot kapjunk, mintha nem 0-tól, hanem 1-től lenne a visszaszámlálás, ezt a számot összehasonlítjuk a az aktuális dia száma, ha egybeesnek, akkor nem teszünk semmit, mert a kívánt dia már megvan nézetablak.

Ha a szükséges csúszda nincs szem elől nézetablak, akkor kiszámítjuk azt a távolságot, amennyit el kell tolnunk slidewrapper balra, majd módosítsa az értéket css transzformációs tulajdonságai a fordításnál(ugyanaz a távolság pixelben, 0). Ezt már többször megtettük, így nem lehet kérdés. A végén az aktuális dia értékét ismét elmentjük egy változóba. slideNow, ez az érték úgy számítható ki, hogy hozzáadunk egyet a kattintott gomb indexéhez.

Valójában ennyi, ha valami nem tiszta, akkor hagyok egy linket a jsfiddle-re, ahol az anyagban szereplő összes kódot megadják.

Köszönöm a figyelmet!

Címkék: Címkék hozzáadása