Izsakot IT

Ar dažādiem karuseļiem tur, daudzi par Mootools kā arī, es tomēr nolēma rakstīt savu Carousel Class, dažu labu iemeslu dēļ
1. Vēlējās peidžeru funkcija (lai varētu pārlēkt uz konkrētu slaidu / soli karuselis).
2. Vēlējās brīvība ar izvietošanu kreiso un labo pogu / saites, kur kādreiz es lūdzu.
3. Vairāk kontroles pār slaidu soļi.

Es tomēr izdodas izveidot jaunu Karuseļveida, ar augstāk minētajām iezīmēm ... kā tālāk ... Jūties brīvs izvēloties jebkuru modifikācijas jūs būtu nepieciešama!

Mans piemērs izskatās šādi ... [ View Demo ]

Skatīt Demo Pārsūtīt | Download Mootools Carousel Ar Peidžeru Version 1.0 panta Downloaded 1991 reizes)

1. Karuselis Peidžeru

Jūs varat viegli pievienot peidžeru jūsu karuselī, vienkārši nosakot peidžeru karogu, kas ir pēdējais parater pieņēma vienlaikus radot instanci MooCarousel uz taisnība (gribu peidžeru) vai false (donot vēlas peidžeru).

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess); / / ns = slaidu skaitu, sss = slaids posma lielumu

Un Protams jūs varat mainīt izskatu-n-jūtas no šiem peidžeru achors kā gribi, modificējot savu CSS.

. Carousel_paging {text-align: right; margin: 5PX 10px 0 0;}
. Carousel_paging strāva, carousel_paging lapa {kontūra: none; platums:... 15px; augstums: 15px; līnijas augstums: 15px; teksts-align: center; display: block; float: left; fons: # D8D8EB; margin: 0 1px 0 0; teksta noformējums: none;}

. Carousel_paging: hover, carousel_paging pašreizējais {background: # 4D4D9B, krāsa: # FFFFFF;}..

Labi! tur ir maza problēma, lai gan, peidžeru enkuri, ja komplekts, tad tā kļūs radīts vienmēr pēc karuseļveida sastāvdaļu. Es gribēju, lai būtu dinamiska kā arī, bet tad tikai, lai saglabātu skriptu nopūš proporciju, es nolēmu izlaist to.
Bet jūs zināt mazliet Javascript, jūs varētu viegli mainīt peidžeru paaudzes kodeksu, MooCarousel klasē lūdzu jūsu vajadzībām.

2. Pielāgošana kreiso un labo ikonas

Jūs varat mainīt izvietojumu, attēlu vai jebkuru displat īpašumu par kreiso un labo pogas vienkārši spēlējot aptuveni ar CSS. lai varētu mainīt izvietojumus no kreisās un labo buttoms bija faktiskais iemesls man labo manu mūsu karuseļveida klasē.
Jo tas MooCarousel klase, pieņem id ir no šīm pogām, jūs faktiski var novietot šīs pogas jebkurā lappuses vietā, ja jūs lūdzu ... tā nav jābūt elementam hierarhijā, kā manā piemērā.

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; amats: radinieku; platums: 23px; augstums: 20px; float: left; kursora: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Pielāgošana slaidu soļi

Ko man nozīmē MY pielāgošana SLIDE soļus?
Vairums Karuseļi slaidu pilns ar no redzamā loga. Tā teikt, jums bija četras vienības (piemēram, manā izlasē iepriekš), tā būs slide visus četrus priekšmetus. Ar šo karuseļveida komponenta, Jums iet uz slaidu skaitu un soļu izmēru jūsu izvēles.

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess);
c_ns = slaidu skaitu, c_sss = slaids posma lielumu

Arī manā example1 esmu calcuted slaidu soļu lielumu, pamatojoties uz loģiku ja, es zinu vairākus priekšmetus, kas par katru posteni platumu un piemales, kas radījuši pēc katra vienuma manā CSS.

/ * Lai 1 karuselis * /

var c1_w = 92; / / karuselis postenis platums

var c1_n = 10; / / Kopējais skaits salīdzināšanas karuselis preces

var c1_pp = 4 / / skaits salīdzināšanai karuselis Items perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slaids posma lielumu

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = slaidu skaitu

c1_sss + = c1_marginFactor; / / sss = slaids solis izmērs, 51 par starpību

Prasības: Mootools 1.2

Skatīt Demo Pārsūtīt | Download Mootools Carousel Ar Peidžeru Version 1.0 panta Downloaded 1991 reizes)