Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Модератор форума: z-17, Anarki  
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » jQuery ulSlider plugin v 1.39 (Простой слайдер с прокручиванием колесиком мыши)
jQuery ulSlider plugin v 1.39
UnShameДата: Четверг, 10.11.2011, 01:53 | Сообщение # 1
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Оффлайн

Описание и демо


Для начала: ДЕМО

Как видно, слайдер поддерживает различные способы управления: колесико мыши, кнопки след.-пред и циферный переключатель (можно совмещать), есть авто-прокручивание и авто-подгонка размеров, а изображения могут прокручиваться в разных направлениях и с разными эффектами. Также можно настроить скорость прокрутки.


Установка


  • Скачиваем АРХИВ.
  • Заливаем содержимое в папку js в корне сайта.
  • На нужных страницах между <head></head> вставляем
    Code
    <script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="/js/jquery.ulslide.js"></script>

  • Создаем слайдер
    Quote
    <ul id="slide1">
    <li>Содержимое слайда</li>
    <li>Содержимое слайда</li>
    <li>Содержимое слайда</li>
    <li>Содержимое слайда</li>
    </ul>

  • Добавляем кнопки "следующий\предыдущий слайд" (по желанию)
    Quote
    <a href="#" id="slide1_prev"><< предыдущий</a> | <a href="#" id="slide1_next">следующий>></a>

  • Добавляем циферный переключатель (по желанию). Количество кнопок в зависимости от количества слайдов
    Quote

    <style type="text/css"> #slide1-pager{
    clear:both;
    list-style-type:none;
    overflow:hidden;
    margin:0;
    padding:0;
    }
    #slide1-pager li {
    float: left;
    }
    #slide1-pager li a{
    margin:0 2px;
    padding:0 7px;
    border:1px solid #ccc;
    display:inline-block;
    }
    #slide1-pager li a.usl-current{
    text-decoration: underline;
    background-color: #777;
    }</style>
    <ul id="slide1-pager">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    </ul>

  • Активируем слайдер (вставлять после самого слайдера)
    Quote

    <script type="text/javascript">
    $(function() {
    $('#slide1').ulslide({
    statusbar: true, //текст загрузки (true - показывать, false - не показывать)
    mousewheel: true,//управление колесиком мышки (true - вкл, false - выкл)

    axis: 'y', //y - прокрутка по вертикали, x - по горионтали
    width: 443, //ширина слайдера
    height: 300, //высота слайдера ('auto' - для авто-подгонки высоты под каждый слайд)
    padding: 20, //промежуток между слайдами (виден при прокрутке)

    duration: 600, //Скорость анимации (в млс)
    affect: 'slide', // slide - эффект сдвига, fade - эффект пропадания
    onAnimate: function(settings, thisEl){}, //дополнительная функция, выполняемая во время анимации

    autoslide: 3000, //интервал авто-прокрутки (false для отключения)
    direction: 'f', // направление автопрокрутки ('f' - вперед , 'b' - назад)

    current: 0, //номер стартового слайда (0 - первый, 1 - второй и т.д.)

    navigator: '#slide1-pager a',//айди дива с циферными переключателями (false если нет переключателя)

    bnext: '#slide1_next',//айди элемента, отвечающего за переключения на следующий слайдер (false если нет элемента)
    bprev: '#slide1_prev',//айди элемента, отвечающего за переключения на предыдущий слайдер (false если нет элемента)

    });
    });
    </script>

  • Можно также сделать переключатель на определенный слайд
    Quote
    <a id="setframe" href="#">Переключить на третий слайд</a>

    $('#setframe').click(function(){
    var slider = $('#slide1')[0];
    slider.uslCurrent(2); // 0 - первый, 1 - второй...
    slider.uslRefresh();
    });



Примечания



  • Красным выделен айди, уникальный для каждого слайдера на странице.
  • Синим - айди, уникальный для каждого циферного переключателя на странице.
  • Фиолетовым и оранжевым - айди, уникальный для каждого переключателя на след. и пред. слайд соответственно.
  • Зеленым - айди переключателя на определенный слайд.
  • Количество слайдеров на странице неограничено - для создания нового просто замените айди объектов.
  • Вместо указания значения false у параметров слайдера можно вовсе пропускать параметры.
  • Последовательность параметров не принципиальна.


Пример кода


Code
<ul id="slide1">
       <li> <img src="images/image-1.jpg" alt="" /></li>
       <li> <img src="images/image-2.jpg" alt="" /></li>
       <li> <img src="images/image-3.jpg" alt="" /></li>
</ul>
<a id="e1_prev" href="#"> Previous </a> | <a id="e1_next" href="#"> Next </a>
<script type="text/javascript">
$(function() {
       $('#slide1').ulslide({
          width: 443,
          height: 'auto',
          bnext: '#e1_next',
          bprev: '#e1_prev',
          axis: 'x',
          autoslide: 2000
         });
});
</script>



Ссылки


Оф. страница скрипта (ulslide.js)
Оф. страница плагина для управления колесиком мышки (mousewheel.js)

Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов

Тот, кто удалит этот пост будет гореть в аду.

Сообщение отредактировал UnShame - Четверг, 10.11.2011, 01:58
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » jQuery ulSlider plugin v 1.39 (Простой слайдер с прокручиванием колесиком мыши)
  • Страница 1 из 1
  • 1
Поиск: