Простая карусель с помощью подкачки Mootools
Благодаря разнообразию Карусели там много для Mootools, а также, я все же решил написать свой собственный класс Карусель, некоторые веские причины
1. Требуются подкачки функцию (чтобы иметь возможность перейти частности слайд / шаг в карусели).
2. Требуются свободы с размещением кнопок ВЛЕВО и ВПРАВО / связи, где бы я, пожалуйста.
3. Больше контроля над Слайд шаги.
Мне удалось создать новые карусели, с учетом вышеупомянутых особенностей ... ниже ... Не стесняйтесь предлагать любые изменения потребуют!
Мой пример выглядит следующим образом ... [ Посмотреть презентацию ]
Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 1990 раз)
1. Карусель пейджинга
Вы можете легко добавить подкачки к карусели, просто установив подкачки флаг, который является последним parater прошло при создании экземпляра MooCarousel к истинной (хочу подкачки) или ЛОЖЬ (выигрыш желающих подкачки).
уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = количество слайдов, SSS = слайд шага
И конечно же вы можете изменить внешний вид-н-стиль этих подкачки achors как вам будет угодно, изменяя их CSS.
. Carousel_paging {выравнивания текста: справа; поле: 5px 10px 0 0;}
. Carousel_paging тока, carousel_paging страницы {контура: нет; ширина:... 15px высота: 15px; высота строки: 15px; выравнивания текста: центр; дисплей: блок; float: left; фон: # D8D8EB; маржа: 0 1px 0 0; текст-отделка: нет;}. Carousel_paging: наведите, carousel_paging текущий {фон: # 4D4D9B, цвет: # FFFFFF;}..
Ну! есть небольшая проблема, хотя, подкачки якоря если установлен, то он получит порожденных всегда после того, как карусель компонентов. Я хотел сделать его динамичным, как хорошо, но потом просто сохранить сценарий для выдува пропорции, я решил пропустить его.
Но вы знаете, немного Javascript, вы можете легко изменить код подкачки поколения в MooCarousel класса порадовать своих потребностей.
2. Настройка левый и правый иконки
Вы можете изменить размещение, изображения или любого displat собственности левая и правая кнопки просто играя с CSS. чтобы быть в состоянии изменить размещений левой и правой buttoms была действительная причина для меня, чтобы права наших моя карусель класса.
Так как это MooCarousel класса, принимает идентификаторы из этих кнопок, вы можете поместить эти кнопки в любом месте страницы, пожалуйста ... это не должно быть в иерархии элементов, как в моем примере.
уаг 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; float: left; курсора: указатель;}. Carousel_container_r {фон-позиции: 0-38px;}
. Carousel_container_l {фон-позиции: 0-58px;}
3. Настройка слайд шаги
Что я имею в виду мой Настройка ШАГИ SLIDE?
Большинство Карусели скользить с полным видимого окна. Так говорят у вас было четыре элемента (как в моем примере выше), то будет скользить всеми четырьмя элементами. С этой карусели компонент, Вы передаете количество слайдов и размер шага по вашему выбору.
уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = количество слайдов, c_sss = слайд шага
Кроме того, в моем example1 я calcuted размер слайда шаг, основанные на логике, где, я знаю, количество предметов, шириной по каждому пункту, и поля, которые дали после того, как каждый элемент в моем CSS.
/ * Для пирушки 1 * /
уаг c1_w = 92; / / пирушки товара Ширина
уаг c1_n = 10; / / Общее количество товаров Сравнение пирушки
уаг c1_pp = 4 / / Количество Сравнение perpage пирушки товаров
уаг c1_marginFactor = 51;
уаг c1_sss = c1_w * c1_pp / / SSS = слайд шага
уаг c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = количество слайдов
c1_sss + = c1_marginFactor / / SSS = слайд шага, 51 полей
Требования: Mootools 1.2
Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 1990 раз)











































18 декабря 2008 в 11:22
Привет!
Я развивающий мой новый сайт с помощью MooTools, и я только что нашел эту великую карусель на мою статью меню! Прежде, чем я использовал свой, но без подкачки.
В настоящее время, карусель работает просто отлично, но ... Моя часть MooTools код управляющей OnClick и onmouse не работает с ним больше ... Она работает, как только я удаляю карусель код.
Не могли бы Вы помочь мне узнать, что случилось?
Вот на странице: http://new.lordfpx.com , сразу после открытия меню, вы увидите, вы не можете нажать на статью. Я могу дать вам код, если хотите.
18 декабря 2008 в 11:49 вечера
Lordfpx,
Я видел страницу в FireFox 3, но вполне вмятина понимаю, что вы подразумеваете под "сразу после открытия меню, вы увидите, вы не можете нажать на статьи".
Кроме того, я заметил, что страница не загружается штраф в IE7 (Есть ошибки во время выполнения)
Не стесняйтесь, присылайте мне свой код на nik1409 [на] gmail.com, буду рад иметь взглянуть на него, если это поможет в любом случае
что касается
N
19 декабря 2008 в 5:06 am
Да, жаль, я не проверял страницу IE7 еще.
В Firefox, при нажатии на статью, он должен открыть в правой части, но, когда карусель присутствует, то он ничего не делает.
Я пошлю вам свою страницами позже, так как я на работе.
Спасибо большое!
13 января 2009 в 1:24 вечера
Я узнал, где была моя ошибка!
Так как я не хотел, чтобы «Левый и Правый иконы" ... я не положил их на моей странице, и я просто tryed чтобы увидеть, если это было из-за этого ... и да, это было в случае ...
Я думаю, что скрыть их на моем сайте.
Спасибо
14 января 2009 в 9:38 вечера
Эй Lordfpx,
Спасибо, что сообщили нам ... Это могло бы некоторые полезные для других пытается сделать то же самое.
что касается
Nik
13 февраля 2009 в 11:03 вечера
Эй, хорошая работа
может кто подскажет, как я могу это сделать подкачки в MooTools 1.1? я не продвинулись еще на 1,2. 
спасибо
mortal.matt Gmail
13 февраля 2009 в 11:04 вечера
жаль, что это mortal.matt (в) Gmail (точка) ком, еще раз спасибо
4 июня 2009 в 4:18 вечера
Привет,
Пожалуйста, можете ли вы сказать мне, как я делаю это автоматическое воспроизведение?
Cheers, Адам
11 июня 2009 в 8:26
Спасибо за это, ваша работа является удивительным. Кстати, то, что информации о лицензии на код? Я хотел бы использовать это в плагине я работаю, и я хочу знать, если все в порядке
21 июня 2009 в 5:44 вечера
вы можете использовать как вам это нравится ....
10 августа 2009 в 12:36 утра
Привет,
это действительно хорошая, но когда я использую JS от http://mootools.net/download (потому что некоторые другие эффекты, я использую), а не ваш mootools12_all_p.js он перестает работать ... Как я могу исправить это ? спасибо.
16 января 2010 в 6:24 am
Как я могу изменить расположение нумерации страниц? Я хочу, чтобы это было в правом верхнем углу, но я не хочу использовать абсолютное или фиксированное позиционирование в CSS.
1 августа 2010 в 8:54 вечера
Таким образом, вы используете MooTools, но все же установить ширину, количество и т.п. элементы вручную. Могу ли я предложить что-то вроде этого:
carouselItems = $ $ ('carousel1_items.');
.. c1_w = carouselItems [0] getSize () х / / пирушки товара Ширина
c1_n = carouselItems.length / / Общее количество товаров пирушки
. c1_pp = $ ('carousel1_wrapper) getSize () .x/c1_w / / Количество perpage пирушки товаров
Также ParseInt () может быть неправильным расчетом, что делает вас пропустить слайдов. Лучше использовать потолка ():
уаг c1_ns = потолка (((* c1_w c1_n) / c1_sss)) / / нс = количество слайдов
Я не использую marginFactor на данный момент, но вы могли бы посчитать, что слишком
.
1 августа 2010 в 8:57 вечера
Извините, что должно быть Math.ceil ()
6 августа 2010 в 12:10 утра
Есть простой способ сделать это автоматически игры?