Paprastas Su Puslapiuoti Naudojant MooTools Karuselė

Su įvairių karuselių ten, daugelis taip pat už MooTools, aš vis tiek nusprendė parašyti savo Karuselė klasės, gerų priežasčių
1. Norėjo ieškos funkciją galėtų šokti tam tikrą skaidrę / Step "karuselės").
2. Noriu laisvė su kairiojo ir dešiniojo mygtukų / Nuorodos apgyvendinimas, jei kada nors aš prašom.
3. Daugiau kontrolė per skaidrių žingsniai.

Man pavyko sukurti naują karuselė, su pirmiau nurodytų funkcijų, kaip nurodyta toliau ... Jauskitės laisvai siūlyti bet kokias pakeitimus galėtumėte reikia!!!

Mano pavyzdys atrodo ... [ Peržiūrėti Demo ]
MooTools Karuselė Su gaviklį

Žiūrėti Demo | Parsisiųsti MooTools Karuselė Su ieškos versija 1.0 straipsnio Siuntėsi 1984 kartus)


1. Karuselė Puslapiuoti

Jūs galite lengvai pridėti ieškai savo karuselės, tiesiog ieškos vėliava, kuri yra naujausia išlaikė parater, kuriant true MooCarousel egzempliorių (noriu ieškos) arba false (donot nori ieškai).

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa); / / ns = skaidrės skaičius, SSS = skaidrių keitimo žingsnio dydis

Žinoma jūs galite pakeisti išvaizdą-n jausti šių ieškos achors, kaip galite pakeisti savo CSS.

Carousel_paging {text-align: teisė; margin: 5px 10px 0 0;}
Carousel_paging srovė, carousel_paging puslapis {outline: nėra; plotis:. 15px; aukštis: 15px; line-height: 15px; text-align: center; kalbomis: bloko; float: left; fonas: # D8D8EB; pelnas: 0 . 1px 0 0; text-decoration: none;}

Carousel_paging: hover, carousel_paging dabartinis {background: # 4D4D9B; spalva: # FFFFFF;}.

Gerai! yra maža problema, nors ieškos inkarai, jei nustatytas, tada jis bus generuojami visada po karuselės komponento. Aš norėjau, kad ji kintamą, taip pat, bet tada tiesiog laikyti Script užpučia proporcijų, aš nusprendžiau praleisti jį.
Bet jūs žinote, šiek tiek "Javascript", galite lengvai keisti ieškos kartos kodą į MooCarousel klasę prašome jūsų poreikius.

2. , Tinkinimas į kairę & Dešiniuoju piktogramos

Talpinimu, vaizdo ar, bet displat nuosavybę KAIRĖN ir DEŠINĖN mygtukus galite pakeisti tiesiog žaisti aplink su CSS. galėtų pakeisti kairiojo ir dešiniojo buttoms vietas buvo tikroji priežastis, kodėl mane dešinėje mano mūsų Karuselė klasės.
Nuo, tai MooCarousel klasė, pritaria id iš šių mygtukų, jūs iš tikrųjų galite įdėti šiuos mygtukus bet kurioje puslapio vietoje, jei galite ... ji neturi būti elementų hierarchijoje, kaip mano pavyzdyje.

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa);

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; pozicija: giminaitį; plotis: 23px; aukštis: 20px; float: left; žymeklis: rodyklė;}

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

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

3. Pritaikyti skaidrių padėtys

Ką reiškia MANO Pritaikyti skaidrių žingsniai?
Dauguma karuselės įstumkite visą matomo lango. Taigi pasakyti jums turėjo keturis elementus (pvz., mano mėginio aukščiau), ji bus skaidrę visus keturis elementus. Su šio Karuselė komponento, Jūs perduoti savo pasirinkimą skaidrių ir žingsnio dydis.

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa);
c_ns = skaidrių skaičius, c_sss = skaidrių keitimo žingsnio dydis

Be to, mano example1 aš calcuted skaidrių keitimo žingsnio dydis, remiantis logika jeigu aš žinau, elementų skaičių, kiekvieno elemento plotis ir paraštes, kurie po kiekvieno punkto mano CSS.

/ * 1 Bachanalia, * /

var c1_w = 92; / / Bachanalia punktas plotis

var c1_n = 10; / / Viso palyginimui Bachanalia Items

var c1_pp = 4 / / Numeris palyginimui Bachanalia elementai perpage

var c1_marginFactor = 51;

c1_sss var = c1_w * c1_pp; / / sss = skaidrių keitimo žingsnio dydis

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = skaičius skaidres

c1_sss + = c1_marginFactor; / / sss = skaidrių keitimo žingsnio dydis, 51 maržos


Reikalavimai: MooTools 1.2

Žiūrėti Demo | Parsisiųsti MooTools Karuselė Su ieškos versija 1.0 straipsnio Siuntėsi 1984 kartus)


15 Responses to "paprastas karuselės Su gaviklį Naudojant MooTools"

  • lordfpx Says:

    Sveiki!

    Aš plėtoja savo naują interneto svetainę, naudojant MooTools, ir aš ką tik aptiko šį puikų karuselė mano Straipsniai meniu! Prieš aš naudoju savo, bet be ieškai.

    Iki šiol, karuselė dirba tik baudą, bet ... ne Mano dalis MooTools kodas valdančiajam onclick ir onmouse yra su ja dirbti nebėra ... Jis dirba kaip tik aš ištrinti "karuselinio" kodą.

    Gal galėtumėte padėti man išsiaiškinti, kas yra negerai?

    Štai puslapis: http://new.lordfpx.com , iškart po atidarymo meniu, pamatysite jūs negalite spustelėkite straipsnį. Aš galiu duoti jums kodas, jei norite.

  • Nikhil Says:

    Lordfpx,
    Aš mačiau puslapį Firefox 3, bet gana įdauža suprasti, ką reiškia "iš karto po atidarymo meniu, pamatysite Jūs negalite spustelėkite straipsnį."

    Be to, aš pranešimą, kad puslapis nėra įkelti baudą IE7 (Yra Runtime klaidų)

    Nesivaržykite siųsti man savo kodą nik1409 [at] gmail.com, bus malonu pažvelgti į jį, jei jis padeda vistiek

    dėl
    N

  • lordfpx Says:

    Taip, atsiprašau, aš ne testuoti puslapį IE7 dar.

    "Firefox", kai paspausite ant gaminio, ji turėtų atverti dešinėje, bet karuselė, ji nedaro nieko.

    Aš atsiųsime jums mano puslapius vėliau, nes aš darbe.

    Thanks a lot!

  • lordfpx Says:

    Aš sužinojau, kur buvo mano klaida!

    Kadangi aš ne norėjo "Kairė ir Dešinė piktogramos" ... Aš ne įdėti juos į mano puslapį ir aš tiesiog tryed, pamatyti, jei ji buvo, nes ... ir taip buvo ...

    Manau, kad bus paslėpti mano svetainėje.

    Ačiū

  • Nikhil Says:

    Ei Lordfpx,

    Ačiū, kad pranešėte mums žinoti ... Tai gali šiek tiek kita naudinga bando padaryti tą patį.

    dėl
    Nikas

  • matthew Says:

    hey, gražus darbas :) gali kas nors man papasakoti, kaip aš galiu padaryti šį ieškai MooTools 1.1? i 1.2 dar nėra perkelta.
    ačiū :)
    mortal.matt Gmail

  • matthew Says:

    gaila, kad tai mortal.matt (at) gmail (dot) com, ačiū dar kartą :)

  • Adomas Blakey Says:

    Sveiki,

    Prašome galite man papasakoti, kaip aš kad šis auto žaisti?

    Į sveikatą, Adomas

  • Jorge Says:

    ačiū už tai, jūsų darbas yra nuostabus. BTW, kas licencija informacijos apie savo kodą? Norėčiau naudoti šią įskiepiai, aš dirbu ir aš noriu žinoti, jei tai ok

  • Nikhil Says:

    jaustis laisvai naudotis, kaip jums patinka ....

  • kovi Says:

    Sveiki,

    tai tikrai geras, bet kai aš naudoju JS iš http://mootools.net/download~~pobj (Dėl kai kurių kitų poveikio, aš naudoju) vietoj jūsų mootools12_all_p.js, ji nustoja veikti ... kaip aš galiu tai pataisyti ? Thanks a lot.

  • Todas Says:

    Kaip galiu pakeisti į numeracija padėties? Aš noriu, kad ji būtų viršutiniame dešiniajame kampe, bet aš nenoriu naudoti CSS absoliutų ar fiksuotos padėties.

  • Balu Says:

    Taigi, jūs naudojate MooTools, bet vis dar rankiniu būdu nustatyti plotis, numeris ir kt objektų. Ar galiu pasiūlyti kažką panašaus į tai:

    carouselItems = $ $ ("carousel1_items. ');
    . c1_w = carouselItems [0] getSize () x / / Bachanalia punktas Plotis
    c1_n = carouselItems.length; / / Viso Bachanalia daiktai
    . c1_pp = $. (carousel1_wrapper) getSize. () .x/c1_w,, / / ​​Balsų Bachanalia elementai perpage,

    Taip pat parseInt () gali būti neteisingas apskaičiavimo, kuris leidžia jums praleisti skaidrę. Geresnis lubų ():

    var c1_ns = lubų (((c1_w * c1_n) / c1_sss)); / / ns = skaidres

    Aš naudoju ne marginFactor metu, tačiau jums gali būti suteikta galimybė apskaičiuoti, kad per ;) .

  • Balu Says:

    Atsiprašome, kad turi būti Math.ceil () :-)

  • Važonis Says:

    Ar yra paprastas būdas padaryti šį automatinį žaisti?

Palikite komentarą

NDK namo | Išreikšdami IT | Išreikšti paletė | Išreikšti Penmenship | Išreikšti Awe | Išreikšti Pats