A különböző Körhinta odakinn, sokan Mootools is, még mindig úgy döntött, hogy írjak saját Körhinta osztály, néhány jó ok
1. Keresünk egy lapozó funkció (ahhoz, hogy ugrani egy adott dia / lépés a körhinta).
2. Keresett szabadságot elhelyezése a bal és jobb gombok / linkek, ha valaha kedvem.
3. Jobban kézben tarthatják a Slide lépések.
Én nem sikerült létrehozni egy új Körhinta, a fenti jellemzők az alábbiak szerint ... ... Nyugodtan javasol módosításokat akkor lenne szükség!
Saját példa így néz ki ... [ Bemutató megtekintése ]
Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1999 alkalommal)
1. Körhinta Lapozás
Könnyedén hozzá a lapozás a körhinta, egyszerűen csak beállítja a személyhívó zászló, ami elmúlt parater telt megteremtése mellett például a MooCarousel az igaz (akar lapozó) vagy hamisak (donot akar lapozó).
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true); / / ns = számú diák, sss = dia lépés nagyság
És persze meg lehet változtatni a kinézetét-n érzem, ezeknek a személyhívó achors kedve szerint módosítja a CSS-t.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Áram. Carousel_paging. Oldal {vázlata: none; szélesség: 15px; magasság: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging a: hover. Carousel_paging. Aktuális {background: # 4D4D9B; color: # ffffff;}
Nos! van egy kis probléma azonban a horgonyok személyhívó ha be van állítva, akkor mindig lesz keletkezett után Carousel komponens. Azt akartam, hogy ez a dinamikus is, de aztán csak tartani a szkript elfújta az arányok, úgy döntöttem, hogy kihagyom.
De tudod, egy kis JavaScript, akkor könnyedén módosíthatja a lapozás generáció kódot a MooCarousel osztály kérjük az Ön igényeinek.
2. Testreszabása a Bal és Jobb Ikonok
Meg lehet változtatni az elhelyezést, képek vagy bárminemű displat tulajdonában bal és jobb gombok egyszerűen csak a játék körül a CSS-t. , hogy képes legyen megváltoztatni a kihelyezések a bal és jobb buttoms volt a tényleges oka, hogy számomra mi az én jobb Carousel osztály.
Mivel ez MooCarousel osztály, elfogadja az id van ilyen gomb, akkor valójában ezek a gombok helyet bárhol az oldalon, ha úgy tetszik ... nem kell lennie az elem hierarchiában, mint a példámat.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true);
CSS
. Carousel_container_l. Carousel_container_r {margin: 50px 0 0 0; helyzet: relatív, szélesség: 23px; magasság: 20px; float: left; kurzor: pointer;}
. Carousel_container_r {background-position: 38px 0;}
. Carousel_container_l {background-position: 58px 0;}
3. Testreszabása Slide lépések
Mit értek MY testreszabása SLIDE lépések?
A legtöbb Körhinta tolja tele az a látható ablak. Tehát meg kellett mondani a négy elem (mint a fenti példában), akkor csúszik mind a négy elem. Ezzel a Carousel komponens, miután elhaladt a diák számát és méretét a lépés, amelyet választott.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true);
c_ns = számú diák, c_sss = dia lépés nagyság
Továbbá, az én vagyok example1 calcuted lépést a dia méretét, a logikán alapul, ahol tudom, hogy a tárgyak számát, szélesség minden egyes darabjáról és a margók számára, amelyek után az egyes elemeket az én CSS.
/ * A tivornya 1 * /
var c1_w = 92; / / szélesség tivornya pont
var c1_n = 10; / / száma Összehasonlító tivornya tételek
var c1_pp = 4 / / Összehasonlító száma tivornya tételek perpage
var c1_marginFactor = 51;
var = c1_sss c1_w c1_pp * / / sss = dia lépés nagyság
var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / ns = hány dia
c1_sss + = c1_marginFactor / / sss = dia lépcső méretét, 51 margók
Követelmények: 1,2 Mootools
Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1999 alkalommal)
