ФорумПрограммированиеПыхнуть хотите?Готовые решения → jSlider - простенькая цикличная каруселька...

jSlider - простенькая цикличная каруселька...

  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 30 марта 2011 г. 1:30, спустя 6 дней 11 часов 47 минут

    дабы расширять свои практические знания и найти (если где-нить похерю) свои плюшки)) а-ля бложег в пыхе о жесе XD
    для начала демка
    теперь внутренности:

    подключение:
    <div class="slider"> <– на него вешаем плагинчег –>
    <div><img src="img1.jpg" alt="" /></div> <– в диве может быть все, что угодно –>
    <div><img src="img2.jpg" alt="" /></div>
    <div><img src="img3.jpg" alt="" /></div>
    <div><img src="img4.jpg" alt="" /></div>
    <div><img src="img5.jpg" alt="" /></div>
    </div>

    <script type="text/javascript">
    $('.slider').jSlider(); // на блок вешаем плагин
    </script>


    стили:
    .jSlider * { margin:0; padding:0; } /* это и строкой ниже скорее уже у всех есть, но на всякий)) */
    .jSlider ul { list-style:none; }

    .jSlider { position:relative; border:10px solid #000; } /* обертка, с рамочкой */
    .jSlider .jSlider_block { position:absolute; }
    .jSlider .jSlider_block div { float:left; } /* наши блоки, лучше не вешать лишние отступы (маргин, паддинг, бордер) */
    .jSlider .jSlider_navigate { width:100%; height:100%; position:absolute; top:0; left:0; } /* вся навигация */
    .jSlider .jSlider_navigate .jSlider_buttons { width:100%; height:100%; position:relative; } /* блок с кнопочками */
    .jSlider .jSlider_navigate .jSlider_prev, .jSlider .jSlider_navigate .jSlider_next, .jSlider .jSlider_navigate .jSlider_play { width:44px; height:44px; background:url('buttons.png') 0 0 no-repeat; cursor:pointer; position:absolute; } /*все кнопочки */
    .jSlider .jSlider_navigate .jSlider_prev { background-position:0 0; top:45%; left:0; } /* левая */
    .jSlider .jSlider_navigate .jSlider_next { background-position:0 -44px; top:45%; right:0; } /* правая */
    .jSlider .jSlider_navigate .jSlider_play { background-position:0 -88px; bottom:0; right:0; } /* плей */
    .jSlider .jSlider_navigate .jSlider_play.jSlider_onplay { background-position:0 -132px; } /* пауза */
    .jSlider .jSlider_navigate .jSlider_pages { overflow:hidden; padding-right:20px; background:url('buttons.png') 100% -176px no-repeat; position:absolute; bottom:0; left:0; } /* блок пагинатора */
    .jSlider .jSlider_navigate ul { height:20px; background:url('buttons.png') 0 -196px repeat-x; overflow:hidden; -moz-user-select:none; user-select:none; } /* непосредственно сам пагинатор */
    .jSlider .jSlider_navigate ul li { float:left; font:normal 12px Arial; color:#fff; padding:3px 6px 2px; margin:0; cursor:pointer; }
    .jSlider .jSlider_navigate ul li.jSlider_active { background:#fff; color:#000; }


    дефолтные настройки:
    $('.slider').jSlider({
    duration: 300, // скорость анимации
    playDelay: 3000, // пауза между анимацией (при плее)
    easing : 'easeInQuart', // стиль анимации
    navigate: 'both', // навигация: 'buttons'|'pager'|'both'|'none'
    prevBtnText: '', // текст кнопки "назад": 'your_text'|''
    nextBtnText: '', // "вперед"
    playBtnText: '', // "плей"
    stopBtnText: '', // "пауза"
    pagerPosition: 'left', // расположение пагинатора по горизонтали: 'left'|'center'|'right'
    pagerNums: true, // имеет ли пагинатор циферки: true|falser
    autoPlay: false, // автоПлей
    autoStop: true, // автоСтоп
    hideNav: false // скрывать навигацию (открывается при наведении)
    });

    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7956 Репутация: N Группа: в ухо

    Spritz 21 марта 2011 г. 12:29, спустя 10 часов 59 минут 28 секунд

    картинки прикольные, но лучше б ты календарь сделал))))
    хотя, насчет него не парься, я уже начал писать
    по сабжу хочу пример, когда картинки не по одной, а в линию и чтобы равномерно могла меняться эта хрень)))
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 21 марта 2011 г. 12:33, спустя 3 минуты 17 секунд

    по сабжу хочу пример, когда картинки не по одной, а в линию и чтобы равномерно могла меняться эта хрень)))

    а по-русски? в линию, то есть видно несколько штук? равномерно, то есть три видно, на три листнуло?
    Высокоуровневое абстрактное говно
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 21 марта 2011 г. 12:38, спустя 5 минут 21 секунду

    ниче так дизайн, молоток если канешн сам это всё сделал
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 21 марта 2011 г. 12:41, спустя 3 минуты 1 секунду

    если канешн сам это всё сделал

    если пиздить, то честно)) это все мое))

    кстать, диз на отъябись делал, чисто чтоб не было просто белого блока с черной рамкой XD
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7956 Репутация: N Группа: в ухо

    Spritz 21 марта 2011 г. 13:43, спустя 1 час 2 минуты 16 секунд


    по сабжу хочу пример, когда картинки не по одной, а в линию и чтобы равномерно могла меняться эта хрень)))

    а по-русски? в линию, то есть видно несколько штук? равномерно, то есть три видно, на три листнуло?

    в линию, то есть видно несколько штук
    равномерно - типа автоплей но не со сменой слайдов, а просто чтобы бежала полоской
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 21 марта 2011 г. 13:48, спустя 5 минут 10 секунд

    в линию, то есть видно несколько штук

    ссылку на такую хрень недавно писали… кто-то просил карусель…

    равномерно - типа автоплей но не со сменой слайдов, а просто чтобы бежала полоской

    как на тимпрофи "наши клиенты"? тогда это не слайдер, а бегущая строка))
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7956 Репутация: N Группа: в ухо

    Spritz 21 марта 2011 г. 15:06, спустя 1 час 17 минут 45 секунд

    как на тимпрофи "наши клиенты"? тогда это не слайдер, а бегущая строка))

    хачу))))
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 21 марта 2011 г. 21:25, спустя 6 часов 18 минут 55 секунд

    хачу))))

    ну вот и спизди оттуда)) эта херь под /* Clients carousel */
    Высокоуровневое абстрактное говно
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 22 марта 2011 г. 2:01, спустя 4 часа 36 минут 21 секунду

    ну изинги уже сами привяжите)) мне лень было))
    Высокоуровневое абстрактное говно
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 22 марта 2011 г. 2:21, спустя 19 минут 51 секунду

    сам такой)) мб для тебя изинг пихать - фишка, я для кого-то уг… если тебе в кайф, ты и сделай)) ты же не просишь в фансибокса, чтоб они лоадер другой нарисовали))
    Высокоуровневое абстрактное говно
  • md5

    Сообщения: 11956 Репутация: N Группа: в ухо

    Spritz 22 марта 2011 г. 2:25, спустя 3 минуты 43 секунды

    ну все, зазвездился… с фансибоксом себя сразу сравнил
    а я только хотел заюзать у себя…
    все умрут, а я изумруд
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 22 марта 2011 г. 2:30, спустя 4 минуты 59 секунд

    блин… ладно, сделаю)) все равно до фансибокса, как до москвы раком))
    Высокоуровневое абстрактное говно
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 22 марта 2011 г. 2:49, спустя 19 минут 18 секунд

    готово)) добавил свойство easing.. список стилей мона посмотреть на офф сайте
    прикрепить jquery.easing.1.3.js
    обновить jSlider.js
    все изменения уже в демке
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7956 Репутация: N Группа: в ухо

    Spritz 22 марта 2011 г. 3:52, спустя 1 час 2 минуты 39 секунд

    ты же хочешь там "повысить свой уровень", так что давай, делай)))

Пожалуйста, авторизуйтесь, чтобы написать комментарий!