Sıra Mootools için birçok orada, atlı karıncalar, çeşitli ile, hala bazı iyi sebepleri, kendi Carousel Sınıf yazmaya karar verdim
1. Sayfalama özelliği (atlıkarınca belirli bir slayt / adım atlamak edebilmek için) istedim.
2. SOL ve SAĞ düğmelerini / bağlantılar yerleştirilmesi ile özgürlük, nereye giderse ben lütfen istedim.
3. Slayt adımlar üzerinde daha fazla kontrol.
Yukarıdaki özelliklere sahip, yeni bir Carousel oluşturmak için başardınız ... aşağıdaki gibi ... Eğer gerektirecektir! Herhangi bir değişikliği önermek için çekinmeyin!
Benim Örnek bu ... [benziyor Profil Demo ]
Demo bilgileri | Çağrı Sürüm 1.0 ile download Mootools Carousel (1994 kez indirildi)
1. Carousel Çağrı
Kolayca sadece true MooCarousel örneğini oluştururken geçti son parater olan sayfalama bayrağı, (istediğiniz disk belleği) veya yanlış (donot sayfalama isteyen) ayarlayarak, kendi atlıkarınca için sayfalama ekleyebilirsiniz.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns slayt sayısını, sss = slayt adım boyu
Ve tabii onların CSS değiştirerek lütfen bu sayfalama achors görünümünü-n-hissediyorum değiştirebilirsiniz.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging akımı, carousel_paging sayfa {anahat: yok; genişliği:... 15px; height: 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 güncel {background: # 4D4D9B; color: # ffffff;}..
Eh! küçük bir sorun bile yoktur, sayfalama çapa seti, o zaman Carousel bileşeninin sonra her zaman oluşturulur alacak. Ben dinamik de yapmak istedim, ama sonra sadece oranlarda üfleme için Script tutmak için, onu atlamak için karar verdi.
Ama küçük bir Javascript biliyorum, kolayca ihtiyaçlarınıza lütfen MooCarousel sınıf sayfalama oluşturma kod değiştirebilir.
2. Sol ve Sağ Simgeler özelleştirme
Sadece CSS ile uğraşırken YERLEŞTİRME, IMAGES veya Sol ve Sağ Düğmeler herhangi displat özelliğini değiştirebilirsiniz. Sol ve Sağ buttoms yerleşimlerin değiştirmek edebilmek için doğru benim bizim Carousel Sınıf benim için gerçek nedeniydi.
Bu MooCarousel Sınıf, id bu düğmelerin var kabul yana, aslında eğer lütfen, sayfada herhangi bir yerde bu düğmeleri koyabilirsiniz ... o eleman hiyerarşi içinde olmak zorunda değil, benim örnekte olduğu gibi.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, gerçek);
CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Slayt Adımlar özelleştirme
Ben MY ÖZELLESTIRME SLAYT ADIMLAR NEDIR?
En Karosel görünür pencere ile tam kaydırın. Bu dört öğe (yukarıda benim örnek gibi) vardı Peki diyorum, tüm dört öğe doğru kayacaktır. Bu Carousel Bileşeni ile, Sen slayt sayısını ve seçtiğiniz adım boyu geçmektedir.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, gerçek);
c_ns slayt sayısını, c_sss = slayt adım boyu
Ayrıca, benim example1 ben nerede mantığa dayalı, slayt adım boyu calcuted, ben öğelerin sayısı, her öğe üzerinde genişlik ve benim CSS her öğeden sonra verdikleri marjları biliyorum.
Carousal için 1 / * /
var c1_w = 92; / / Carousal Ürün Genişliği
var c1_n = 10; Karşılaştırılması Carousal Haber / / Total
var c1_pp Karşılaştırılması Carousal Ürünleri perpage = 4 / / Numara
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / sss = slayt adım boyu
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5) / / ns = sayısı slaytlar
c1_sss + = c1_marginFactor; kenar boşlukları için / / sss = slayt adım boyu, 51
Gereksinimleri: Mootools 1.2
Demo bilgileri | Çağrı Sürüm 1.0 ile download Mootools Carousel (1994 kez indirildi)
