Простая карусель с помощью подкачки Mootools

Благодаря разнообразию Карусели там много для Mootools, а также, я все же решил написать свой собственный класс Карусель, некоторые веские причины
1. Требуются подкачки функцию (чтобы иметь возможность перейти частности слайд / шаг в карусели).
2. Требуются свободы с размещением кнопок ВЛЕВО и ВПРАВО / связи, где бы я, пожалуйста.
3. Больше контроля над Слайд шаги.

Мне удалось создать новые карусели, с учетом вышеупомянутых особенностей ... ниже ... Не стесняйтесь предлагать любые изменения потребуют!

Мой пример выглядит следующим образом ... [ Посмотреть презентацию ]
Mootools карусель с подкачкой

Посмотреть демо | Скачать 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 раз)


15 Ответов на "Простая карусель с помощью Mootools подкачки"

  • lordfpx Говорит:

    Привет!

    Я развивающий мой новый сайт с помощью MooTools, и я только что нашел эту великую карусель на мою статью меню! Прежде, чем я использовал свой, но без подкачки.

    В настоящее время, карусель работает просто отлично, но ... Моя часть MooTools код управляющей OnClick и onmouse не работает с ним больше ... Она работает, как только я удаляю карусель код.

    Не могли бы Вы помочь мне узнать, что случилось?

    Вот на странице: http://new.lordfpx.com , сразу после открытия меню, вы увидите, вы не можете нажать на статью. Я могу дать вам код, если хотите.

  • Nikhil Говорит:

    Lordfpx,
    Я видел страницу в FireFox 3, но вполне вмятина понимаю, что вы подразумеваете под "сразу после открытия меню, вы увидите, вы не можете нажать на статьи".

    Кроме того, я заметил, что страница не загружается штраф в IE7 (Есть ошибки во время выполнения)

    Не стесняйтесь, присылайте мне свой код на nik1409 [на] gmail.com, буду рад иметь взглянуть на него, если это поможет в любом случае

    что касается
    N

  • lordfpx Говорит:

    Да, жаль, я не проверял страницу IE7 еще.

    В Firefox, при нажатии на статью, он должен открыть в правой части, но, когда карусель присутствует, то он ничего не делает.

    Я пошлю вам свою страницами позже, так как я на работе.

    Спасибо большое!

  • lordfpx Говорит:

    Я узнал, где была моя ошибка!

    Так как я не хотел, чтобы «Левый и Правый иконы" ... я не положил их на моей странице, и я просто tryed чтобы увидеть, если это было из-за этого ... и да, это было в случае ...

    Я думаю, что скрыть их на моем сайте.

    Спасибо

  • Nikhil Говорит:

    Эй Lordfpx,

    Спасибо, что сообщили нам ... Это могло бы некоторые полезные для других пытается сделать то же самое.

    что касается
    Nik

  • Матфей говорит:

    Эй, хорошая работа :) может кто подскажет, как я могу это сделать подкачки в MooTools 1.1? я не продвинулись еще на 1,2.
    спасибо :)
    mortal.matt Gmail

  • Матфей говорит:

    жаль, что это mortal.matt (в) Gmail (точка) ком, еще раз спасибо :)

  • Адам Blakey Говорит:

    Привет,

    Пожалуйста, можете ли вы сказать мне, как я делаю это автоматическое воспроизведение?

    Cheers, Адам

  • Хорхе говорит:

    Спасибо за это, ваша работа является удивительным. Кстати, то, что информации о лицензии на код? Я хотел бы использовать это в плагине я работаю, и я хочу знать, если все в порядке

  • Nikhil Говорит:

    вы можете использовать как вам это нравится ....

  • Кови пишет:

    Привет,

    это действительно хорошая, но когда я использую JS от http://mootools.net/download (потому что некоторые другие эффекты, я использую), а не ваш mootools12_all_p.js он перестает работать ... Как я могу исправить это ? спасибо.

  • Тодд говорит:

    Как я могу изменить расположение нумерации страниц? Я хочу, чтобы это было в правом верхнем углу, но я не хочу использовать абсолютное или фиксированное позиционирование в CSS.

  • Балу говорит:

    Таким образом, вы используете 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 на данный момент, но вы могли бы посчитать, что слишком ;) .

  • Балу говорит:

    Извините, что должно быть Math.ceil () :-)

  • Картер говорит:

    Есть простой способ сделать это автоматически игры?

Оставить комментарий

NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя