Изразяване на ИТ

С разнообразието на въртележката там, много и за MooTools, аз все още реших да напиша моя клас тип "въртележка", за няколко добри причини
1. Исках функцията за виртуална памет (за да бъдем в състояние да скочи даден слайд / стъпка в тип "въртележка").
2. Искаха свобода с поставянето на левия и десния бутони / връзки, където и да се моля.
3. Повече контрол през слайдове стъпки.

Успяха да се създаде нов тип "въртележка", с посочените по-горе функции ..., както по-долу ... Чувствайте се свободни да предлагаме някакви промени, ще изискват!!!

Примера ми прилича на ... [ Виж Demo ]

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1986 пъти)

1. Въртележката Пейджинг

Можете лесно да добавяте за виртуална памет на вашия тип "въртележка", просто чрез създаването на виртуалната памет, под чийто флаг плава корабът, който е миналата parater премина, докато създаването на копие на MooCarousel да е истина (искам виртуална памет) или невярно (, donot желанието за виртуална памет).

за Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно); / / NS = броя на кадрите, SSS = размер слайд стъпка

И разбира се можете да промените външния вид на N-усещане на тези пейджинг achors както ти е угодно, чрез модифициране на техните CSS.

Carousel_paging {текст-align: право; поле: 5px 10px 0 0;}
Carousel_paging ток, carousel_paging страница {контур: няма; ширина:.. 15px; височина: 15px; линия-височина: 15px; текст-align: център; дисплей: блок; поплавъка: ляво; фон: # D8D8EB; марж: 0 1px 0 0; текстови декорация: няма;}

Carousel_paging едно: hover, carousel_paging текущата {фон: # 4D4D9B; цвят: # FFFFFF;}.

Е! има малък проблем обаче, пейджинг котви ако е зададено, след това ще се генерира винаги след Carousel компонент. Исках да направя това динамично, както и, но след това само за да поддържат сценария за духа на пропорциите, реших да го пропуснете.
Но знаете ли малко Javascript, можете лесно биха могли да променят кода на поколение пейджинг в MooCarousel клас да се моля на вашите нужди.

2. Персонализиране на левия и десния икони

Можете да промените разположение, изображения или всеки displat собственост на левия и десен бутон просто играя наоколо с CSS. да бъде в състояние да променят разположенията на левия и десния buttoms е действителната причина за мен да ми право Въртележката нашия клас.
Тъй този MooCarousel клас, приема ID е от тези бутони, може действително да постави тези бутони навсякъде по страницата, ако обичате ... не трябва да бъде в йерархията елемента, тъй като в моя пример.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);

CSS
Carousel_container_l, carousel_container_r {поле: 50px 0 0 0; позиция: относителна; ширина: 23px; височина: 20px; поплавъка: ляво; курсора: показалка;}

Carousel_container_r {фон-позиция: 0-38px;}

Carousel_container_l {фон-позиция: 0-58px;}

3. Стъпки Персонализиране слайдове

Какво имам предвид МОИТЕ Персонализиране слайдове СТЪПКИ?
Повечето въртележки плъзна в пълна с видимата прозорец. Да предположим, че сте имали четири елемента (като в моя проба-горе), тя ще се плъзне всичките четири позиции. С този тип "въртележка" компонент, се преминава броя на кадрите и размера стъпка по ваш избор.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);
c_ns = броя на кадрите, c_sss = размер слайд стъпка

Също така, в моя example1 аз calcuted размера пързалка стъпка, на базата на логиката, където, знам, че броя на елементите, ширината на всеки елемент и маржовете, които са дали след всеки елемент в моя CSS.

/ * За пиршество 1 * /

VAR c1_w = 92; / / пиршество Позиция Ширина

VAR c1_n = 10; / / общ брой на Сравнение пиршество позиции

Var c1_pp = 4 / / Брой на елементите пиршество perpage Сравнение

VAR c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp / / SSS = размер на слайд стъпка

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / НЧ = брой на слайдове

c1_sss + = c1_marginFactor; / / SSS = пързалка стъпка, размер, 51 за маржовете

Изисквания: MooTools 1.2

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1986 пъти)