Untitled

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8" />
        <title>Slideshow</title>
        <style type="text/css">
            #slideshow
            {
                border: 3px solid black;
                height: 400px;
                overflow: hidden;
                padding: 0;
                width: 980px;
            }
            #slides
            {
                margin: 0;
                padding: 0;
                height: 500px;
                position: relative;
                width: 3600px; /* кол-во элементов на ширину каждого */
            }
            #slides li
            {
                float: left;
                height: 500px;
                list-style: none;
                margin: 0;
                width: 780px;
            }
            #slides li div
            {
                height: 100%;
            }
            #slides li.red div { background-color: red; width: 780px;}
            #slides li.green div { background-color: limegreen; width: 200px;}
            #slides li.blue div { background-color: blue; width: 780px;}
        </style>
        <script type="text/javascript">
            /* Конструктор. minSize - размер, до которого сжимаются боковые дивы в % */
            function Slideshow(id, minSize) {
                this.ul = document.getElementById(id);;
                this.items = this.ul.getElementsByTagName('li');
                /* запоминаем нормальные размеры дива */
                this.normalHeight = window.getComputedStyle(this.items[0].childNodes[0]).pixelHeight;
                this.normalWidth = window.getComputedStyle(this.items[0].childNodes[0]).pixelWidth;
                /* насколько будем сдвигать список */
                this.width = this.items[0].clientWidth;

                this.slide = function(speed) {
                    var ul = this.ul,
                            items = this.items,
                          width = this.width;

                    var currentLeft = ul.style.pixelLeft;

                    // выходим, если достигли конца списка
                    if ((currentLeft >= 0 && speed > 0) || (currentLeft <= (3 - items.length) * width && speed < 0) || speed == 0) {
                        return;
                    }

                    // Находим дивы, размеры которых будут меняться при движении
                    var index = Math.abs(currentLeft) / width - speed / Math.abs(speed);

                    var left = items[index].childNodes[0],
                            center = items[index + 1].childNodes[0],
                            right = items[index + 2].childNodes[0];

                    var normalHeight = this.normalHeight,
                            normalWidth = this.normalWidth,
                            /* вычисляем значения, на которые будут меняться размеры на каждой итерации (они округлены в меньшую по модулю сторону) */
                            leftHeightDiff = Math.round(((minSize * normalHeight / 100) - window.getComputedStyle(left).pixelHeight) / Math.abs(width / speed)),
                            leftWidthDiff = Math.round(((minSize * normalWidth / 100) - window.getComputedStyle(left).pixelWidth) / Math.abs(width / speed)),
                            rightHeightDiff = Math.round(((minSize * normalHeight / 100) - window.getComputedStyle(right).pixelHeight) / Math.abs(width / speed)),
                            rightWidthDiff = Math.round(((minSize * normalWidth / 100) - window.getComputedStyle(right).pixelWidth) / Math.abs(width / speed)),
                            centerHeightDiff = Math.round((normalHeight  - window.getComputedStyle(center).pixelHeight) / Math.abs(width / speed)),
                            centerWidthDiff = Math.round((normalWidth  - window.getComputedStyle(center).pixelWidth) / Math.abs(width / speed));

                    function makeStep() {
                        // двигаем список
                        ul.style.pixelLeft += speed;
                        // меняем размеры


                        if ((speed > 0 && ul.style.pixelLeft < (currentLeft + width)) || (speed < 0 && ul.style.pixelLeft > (currentLeft - width))) {
                            setTimeout(function() { makeStep(); }, 10);
                        } else {
                            // корректируем размеры дивов
                            left.style.height = minSize * normalHeight / 100 + 'px';
                            left.style.width = minSize * normalWidth / 100 + 'px';
                            right.style.height = minSize * normalHeight / 100  + 'px';
                            right.style.width = minSize * normalWidth / 100 + 'px';
                            center.style.height = normalHeight + 'px';
                            center.style.width = normalWidth + 'px';
                        }
                    }

                    makeStep();
                    return false;
                }
            }

            function init() {
                slideshow = new Slideshow('slides', 100);
                /* Триггеры. Отрицательная скорость - слево, положительная - вправо. Скорости могут и не совпадать */
                document.getElementById("left").onclick = function() { slideshow.slide(-10); };
                document.getElementById("right").onclick = function() { slideshow.slide(20); };
            }
        </script>
    </head>
    <body onload="init()">
        <div id="slideshow">
            <!-- первый и последний дивы пусты -->
            <ul id="slides">
                <li class="red"><div>тест1</div></li>
                <li class="green"><div>тест2</div></li>
                <li class="blue"><div>тест3</div></li>
                <li><div></div></li>
            </ul>
        </div>
        <a href="#" id="left">Left</a>
        <a href="#" id="right">Right</a>
    </body>
</html>