/********************************************************/
/*                                                      */
/*  jquery.CarouselLifeExample.js                       */
/* Плагин "Карусель от LifeExample.ru" для jQuery        */
/*  Автор: Авдеев Марк                                   */
/*              2012г.                                 */
/*                                                      */
/* Для ипользования плагина необходимо определить     */
/* контейнер и вложить в него маркированный список:        */
/*                                                      */
/*  <div class="container">                             */
/*                <ul class="carousel">                 */
/*                        <li>1</li>                    */
/*                        <li>2</li>                    */
/*                        <li>3</li>                    */
/*                        <li>4</li>                    */
/*                        <li>5</li>                    */
/*                        <li>6</li>                    */
/*                </ul>                                 */
/*    </div>                                            */
/* После чего можно указать параметры для использования */
/* плагина                                               */
/* $('.container').Carousel({                           */
/*  visible: 3,  //количество отображаемых позиций 3   */
/*  rotateBy: 1, //прокручивать по 1                  */
/*  speed: 1000, //скорость 1 секунда                    */
/*  btnNext: null, // кнопка вперед не назначена     */
/*  btnPrev: null, // кнопка назад не назначена           */
/*  auto: true, // авто прокрутка включена             */
/*  margin: 10, // отступ между позициями               */
/*  position: "h",// расположение по горизонтали       */
/*  dirAutoSlide: false //направление движения           */
/*  });                                                 */
/*  Или использовать параметры по умолчанию              */
/*  $('.container').Carousel();                         */
/*                                                      */
/********************************************************/
(function($) {
    $.fn.Carousel = function(options) {
        // Настройки по умолчанию
        settings = {
            visible: 1,         // количество отображаемых позиций 1
            rotateBy: 1,     // прокручивать по 1
            speed: 1000,    //скорость 1 секунда
            btnNext: null,   // кнопка вперед не назначена
            btnPrev: null, // кнопка назад не назначена
            auto: false, // автопрокрутка отключена
            margin: 10,    // отступ между позициями
            position: "h",// расположение по горизонтали
            dirAutoSlide: false, //направление движения в перед для автопрокрутки
            slideCounter: -1 // счётчки сдвигов
        };
        return this.each(function() {
            if (options) {
                $.extend(settings, options); //устанавливаем пользовательские настройки 
            }

            // определяем переменные
            var $this = $(this); //родительский элемент (Блок в котором находится карусель)  
            var $carousel = $this.children(':first'); // получаем дочерний элемент (UL) т.е. саму карусель
            var itemWidth = $carousel.children().outerWidth() + settings.margin; // вычисляем ширину элемента
            var itemHeight = $carousel.children().outerHeight() + settings.margin; // вычисляем высоту элемента                   
            var itemsTotal = $carousel.children().length; // получаем общее количество элементов в карусели
            var slideCnt = settings.slideCounter;
            var running = false; //останавливаем процесс
            var intId = null; //очищаем интервал
            //size - размер для вычисления длины, зависит от ориентации карусели
            var size = itemWidth;
            if (settings.position == "v") size = itemHeight;
            //Если карусель вертикальная то
            if (settings.position == "v")
                $this.css({
                    'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
                    'overflow': 'hidden', // прячем все, что не влезает в контейнер
                    'height': settings.visible * size + 'px',// ДЛИНУ контейнера ставим равной ширине всех видимых элементов
                    'width': itemWidth - settings.margin //Ширина контейнера равна ширине элемента
                });
            else
                $this.css({
                    'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
                    'overflow': 'hidden', // прячем все, что не влезает в контейнер
                    'width': settings.visible * size + 'px',// ширину контейнера ставим равной ширине всех видимых элементов
                    'height': itemHeight - settings.margin
                });
            //вычисляем расстояние отступа от каждого элемента
            if (settings.position == "v")
                $carousel.children('li').css({
                    'margin-top': settings.margin / 2 + 'px',
                    'margin-bottom': settings.margin / 2 + 'px',
                    'float': 'left',
                    'width': '60px',
                    'height': '40px',
                    'padding': '0',
                    'font': '12pt Arial',
                    'color': 'white',
                    'border': 'none'
                });
            else
                $carousel.children('li').css({
                    'margin-left': settings.margin / 2 + 'px',
                    'margin-right': settings.margin / 2 + 'px',
                });
            // в зависимости от ориентации, увеличиваем длину или ширину карусели
            if (settings.position == "v")
                $carousel.css({
                    'position': 'relative', // разрешаем сдвиг по оси
                    'height': 300 + 'px', // увеличиваем ленту карусели
                    'left': 0,
                    'top': 0
                });
            else
                $carousel.css({
                    'position': 'relative', // разрешаем сдвиг по оси
                    'width': 999 + 'px', // увеличиваем ленту карусели
                    'top': 0,
                    'left': 0
                });
            function doSlide(dir) {
                var direction = !dir ? -1 : 1; // устанавливаем заданное направление
                var indent = 0; // смещение (для ul)
                if (!running) {
                    // если анимация завершена (или еще не запущена)
                    running = true; // ставим флажок, что анимация в процессе
                    if (intId) { // если запущен интервал
                        window.clearInterval(intId); // очищаем интервал                                         
                    }
                    if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
                        /*
            * вставляем после последнего элемента карусели
           * клоны стольких элементов, сколько задано
           * в параметре rotateBy (по умолчанию задан один элемент)
          */
                        $carousel.children(':last').after($carousel.children().slice(0, settings.rotateBy).clone(true));
                    } else { // если мотаем к предыдущему элементу
                        /*
           * вставляем перед первым элементом карусели
          * клоны стольких элементов, сколько задано
          * в параметре rotateBy (по умолчанию задан один элемент)
        */
                        $carousel.children(':first').before($carousel.children().slice(itemsTotal - settings.rotateBy, itemsTotal).clone(true));
                        /*
          * сдвигаем карусель (<ul>)  на ширину/высоту  элемента,
          * умноженную на количество элементов, заданных
         * в параметре rotateBy (по умолчанию задан один элемент)
         */
                        if (settings.position == "v")
                            $carousel.css('top', -size * settings.rotateBy + 'px');
                        else $carousel.css('left', -size * settings.rotateBy + 'px');
                    }

                    /*
 * расчитываем  смещение
* текущее значение  + ширина/высота  одного элемента * количество проматываемых элементов * на направление перемещения (1 или -1)
  */
                    if (settings.position == "v")
                        indent = parseInt($carousel.css('top')) + (size * settings.rotateBy * direction);
                    else
                        indent = parseInt($carousel.css('left')) + (size * settings.rotateBy * direction);
                    var animateData;
                    if (settings.position == "v") {
                        animateData = { 'top': indent };
                    } else {
                        animateData = { 'left': indent };
                    } // запускаем анимацию
                    $carousel.animate(animateData, {
                        queue: false,
                        duration: settings.speed,
                        complete: function () {
                            // когда анимация закончена
                            if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
                                // удаляем столько первых элементов, сколько задано в rotateBy
                                $carousel.children().slice(0, settings.rotateBy).remove();
                                // устанавливаем сдвиг в ноль
                                if (settings.position == "v")
                                    $carousel.css('top', 0);
                                else $carousel.css('left', 0);
                            } else { // если мотаем к предыдущему элементу
                                // удаляем столько последних элементов, сколько задано в rotateBy
                                $carousel.children().slice(itemsTotal, itemsTotal + settings.rotateBy).remove();
                            }
                            slideCnt--;
                            if (slideCnt == 0)
                                $(this).trigger('Carousel.drawComplete');
                            if (slideCnt != 0 && settings.auto) { // если карусель должна проматываться автоматически
                                // запускаем вызов функции через интервал времени (auto)
                                intId = window.setInterval(function () { doSlide(settings.dirAutoSlide); }, settings.auto);
                            }
                            running = false; // отмечаем, что анимация завершена
                            $(this).trigger('Carousel.animationComplete');
                        }
                    });
                }
                return false; // возвращаем false для того, чтобы не было перехода по ссылке
            }
            var methods = {
                init: function () {},
//прокрутка карусели в наравлении dir [true-вперед; false-назад]
                slide: function (dir) {
                    doSlide(dir);
                }
            };
// обеспечиваем внешний вызов методов плагина
            $.fn.Carousel = function(method) {
                // логика вызова метода
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    //$.error('Метод с именем ' + method + ' не существует для jQuery.Carousel');
                }
            };
            
// назначаем обработчик на событие click для кнопки "вперед"
            $(settings.btnNext).click(function() {
                return doSlide(false);
            });
            // назначаем обработчик на событие click для кнопки "Назад"
            $(settings.btnPrev).click(function() {
                return doSlide(true);
            });

            if (settings.auto) { // если карусель должна проматываться автоматически
                // запускаем вызов функции через временной интервал
                intId = window.setInterval(function() { doSlide(settings.dirAutoSlide); }, settings.auto);
            }
        });
    };
})(jQuery);

<script type="text/javascript">
    $(document).ready(function () {
        // настройка карусели победителей
        $('carousel1').Carousel({
            visible: 1,
            rotateBy: 1,
            speed: 1000,
            auto: true,
            position: 'h',
            margin: 10,
            slideCounter: 5,
            dirAutoSlide: true
        }).bind('Carousel.animationComplete', switchCarousel);
        $('#carousel2').Carousel({
            visible: 1,
            rotateBy: 1,
            speed: 50,
            auto: true,
            position: 'h',
            margin: 10,
            slideCounter: 6,
            dirAutoSlide: false
        }).bind('Carousel.animationComplete', switchCarousel);
    });
</script>