Z različnimi vrtiljaki tam, veliko za Mootools tudi, jaz še vedno se odločil napisati svoj razred vrtiljak, nekaj dobrih razlogov
1. Želeli ostranjevalne funkcijo (da bi lahko skočil določen diapozitiv / korak v vrtiljaku).
2. Želel svobodo s postavitvijo na levi in desni gumb / povezavami, kjer sem kdaj prosim.
3. Večji nadzor nad Slide korakih.
Nisem uspel ustvariti nov vrtiljak, z zgoraj navedenimi značilnostmi, kot spodaj ... ... Prosto za nasvet za spremembe, ki bi jih potrebujejo!
Moja Primer izgleda takole ... [ View Demo ]
Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1998 krat)
1. Vrtiljak Paging
Z lahkoto lahko dodate ostranjevanje na vaš vrtiljaku, enostavno z nastavitvijo ostranjevalne zastavo, ki je zadnja parater opravil pri ustvarjanju primerek MooCarousel v res želimo (paging) ali napačne (donot želijo paging).
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = število diapozitivov, sss = slide korak Velikost
Seveda pa lahko spreminjate videz-n-občutek teh osebnega klica achors, kot ste si ga spremenila njihovo CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging tok, carousel_paging stran {oris: none; širina:... 15px; višina: 15px; line-višina: 15px; text-align: center; zaslon: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging: hover, carousel_paging trenutno {background: # 4D4D9B; color: # FFFFFF;}..
No! je majhen problem, čeprav, ostranjevalne sidra Če nastavljeno, bo potem dobil vedno ustvari po Carousel komponente. Hotela sem, da bi bilo dinamično, kot tudi, potem pa samo, da scenarij za pihanje iz deležev, sem se odločil, da ga preskočite.
Ampak veste, malo Javascript, bi lahko zlahka spremeniti kodo ostranjevalne generacije v MooCarousel razredu prosim vaše potrebe.
2. Prilagajanje na levo in desno ikona
Spremenite lahko postavitev, slike ali katero koli displat lastnino o levi in desni gumb preprosto igranje okrog s CSS. da bi lahko spremenili umestitve na levi in desno buttoms je dejanski razlog za mene, da mi pravi naš Carousel razreda.
Ker je to MooCarousel razred, sprejme id je od teh gumbov, lahko dejansko dati te gumbe, kjerkoli na strani, prosim ... da ni treba biti v elementu hierarhije, kot v mojem primeru.
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; lega: relativna, širina: 23px; višina: 20px; float: left; kazalec: kazalec;}
. Carousel_container_r {ozadje-position: 0-38px;}
. Carousel_container_l {ozadje-position: 0-58px;}
3. Prilagajanje Slide koraki
Kaj imam v mislih MOJE Prilagajanje KORAKE SLIDE?
Večina vrtiljakov potisnite poln vidnega okna. Torej, da ste imeli štiri predmete (kot v mojem vzorcu zgoraj), bo potisnite vse štiri elemente. S tem Carousel komponente, boste mimo številnih diapozitivov in korak velikost po vaši izbiri.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true);
c_ns = število diapozitivov, c_sss = slide korak Velikost
Tudi v mojem example1 sem calcuted velikost zaporedja korakov, ki temelji na logiki, kjer je, vem, da število elementov, širino za vsako postavko in robove, ki so podane po posameznih postavkah v mojem CSS.
/ * Za Bančenje 1 * /
var c1_w = 92; / / Bančenje točka Širina
var c1_n = 10 / / Skupno število postavk komparaciji Bančenje
var c1_pp = 4 / / Število primerjavo so perpage Bančenje Items
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp; / / sss = slide korak Velikost
c1_ns var = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = število diapozitivov
c1_sss + = c1_marginFactor; / / sss = slide korak velikost, 51 za marže
Zahteve: Mootools 1.2
Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1998 krat)
