Плагин - CoverScroll - осуществляющий прокрутку изображений.

Разметка HTML

<div id="container">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />
</div>

CSS

Пример для верхнего варианта показанного на Демо странице

            .itemTitle{
                padding-top:30px;
            }            #container2{
                /*border:1px solid magenta;*/
                width:850px;
                height:188px;
                margin-left:25px;
            }
            #container2 img, #container2 .item{
                width:100%;
                height:100%;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -o-border-radius: 10px;
                border-radius: 10px;
                -moz-box-shadow: 0px 5px 5px #777;
                -webkit-box-shadow: 0px 5px 5px #777;
                box-shadow: 0px 5px 5px #777;
            }             /*#container2 .selectedItem{           
                border:2px solid #0071BC;
            }*/

javascript

Подключаем jQuery и плагин:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="scripts/jquery.coverscroll.min.js"></script>

И скрипт инициализации:

$('#container').coverscroll();

или же

$('#container').coverscroll({items:'img'});

Где значение "items" - это опция, селектор для потомков контейнера (аналогичо варианту: $('#container').find('img'); ). Это необходимо, только в случае, если используется не img, а другой тег, например DIV.

для верхнего примера в Демо:

$('#container').coverscroll({
     items:'.item',
     minfactor:10,
     scalethreshold:5,
     staticbelowthreshold:true,
     distribution:1
     });

Опции

Это опции по умолчанию:

  var opt = {
    'minfactor':20, // насколько следующий элемент меньше предыдущего в пикселях
    'distribution':1.5, // если это значение меньше 1, то элементы будут отделяться друг от друга
    'scalethreshold':0, // как мноо элементов нужно иметь в начале, чтобы начать масштабирование
    'staticbelowthreshold':false, // если true - когда кол-во элементов меньше, чем в "scalethreshold" - не анимировать.
    'titleclass':'itemTitle', // Название класса элемента, содержащего элемент названия
    'selectedclass':'selectedItem', // Название класса выбранного элемента
    'scrollactive':true, // прокрутка включена
    'step':{ // compressed items on the side are steps
        'limit':4, // how many steps should be shown on each side
        'width':8, // how wide is the visible section of the step in pixels
        'scale':true // scale down steps
    },
    'bendamount':2, // Параметр "bending" (изгиб) для CoverScroll (значения от 0.1 до 1 изгиб вниз, от -0.1 до -1 изгиб вверх, 2 прямо (без изгиба), 1.5 небольшой наклон)
      'movecallback':function(item){} // функция обратного вызова, вызывается после клика на элемент
  };

Методы

Это перечень поддерживаемых методов:

  1. следующий - движение к следующему пункту (вперед)
    $('#container').coverscroll('next');
  2. предыдущий - движение к предыдущему пункту (назад)
    $('#container').coverscroll('prev');

СКАЧАТЬСкачек: 1303
151,96 Kb
Кто скачал?

ДЕМОПосмотреть
пример