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: 1200px;
            }
            #slides
            {
                margin: 0;
                padding: 0;
                height: 400px;
                position: relative;
                width: 3600px; /* кол-во элементов на ширину каждого */
            }
            #slides li
            {
                float: left;
                height: 320px;
                list-style: none;
                margin: 0;
                padding: 40px;
                width: 320px;
            }
            #slides li div
            {
                height: 100%;
            }
            #slides li.red div { background-color: red; }
            #slides li.orange div { background-color: orange; }
            #slides li.yellow div { background-color: yellow; }
            #slides li.green div { background-color: limegreen; }
            #slides li.lightblue div { background-color: lightblue; }
            #slides li.blue div { background-color: blue; }
            #slides li.purple div { background-color: purple; }
        </style>
        <script type="text/javascript">
            function init() {
                document.getElementById("left").onclick = function(e) { slide('slides', -10, 60); return false; };
                document.getElementById("right").onclick = function(e)  { slide('slides', 10, 60); return false; };
            }

            function slide(id, speed, minSize) {
                var ul = document.getElementById(id);
                var items = ul.getElementsByTagName('li');
                var width = items[0].clientWidth;
                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 = window.getComputedStyle(right).pixelHeight,
                        normalWidth = window.getComputedStyle(right).pixelWidth,

                        leftHeightDiff = ((minSize * normalHeight / 100) - window.getComputedStyle(left).pixelHeight) / Math.abs(width / speed),
                        leftWidthDiff = ((minSize * normalWidth / 100) - window.getComputedStyle(left).pixelWidth) / Math.abs(width / speed),
                        rightHeightDiff = ((minSize * normalHeight / 100) - window.getComputedStyle(right).pixelHeight) / Math.abs(width / speed),
                        rightWidthDiff = ((minSize * normalWidth / 100) - window.getComputedStyle(right).pixelWidth) / Math.abs(width / speed),
                        centerHeightDiff = (normalHeight  - window.getComputedStyle(center).pixelHeight) / Math.abs(width / speed),
                        centerWidthDiff = (normalWidth  - window.getComputedStyle(center).pixelWidth) / Math.abs(width / speed);


                function move() {
                    ul.style.pixelLeft += speed;

                    left.style.height = window.getComputedStyle(left).pixelHeight + leftHeightDiff + 'px';
                    left.style.width = window.getComputedStyle(left).pixelWidth + leftWidthDiff + 'px';
                    right.style.height = window.getComputedStyle(right).pixelHeight + rightHeightDiff + 'px';
                    right.style.width = window.getComputedStyle(right).pixelWidth + rightWidthDiff + 'px';
                    center.style.height = window.getComputedStyle(center).pixelHeight + centerHeightDiff + 'px';
                    center.style.width = window.getComputedStyle(center).pixelWidth + centerWidthDiff + 'px';

                    if ((speed > 0 && ul.style.pixelLeft < (currentLeft + width)) || (speed < 0 && ul.style.pixelLeft > (currentLeft - width))) {
                        setTimeout(function() { move(ul, currentLeft, width, speed); }, 10);
                    }
                }

                move();
            }
        </script>
    </head>
    <body onload="init()">
        <div id="slideshow">
            <ul id="slides">
                <li><div></div></li>
                <li class="red"><div></div></li>
                <li class="orange"><div></div></li>
                <li class="yellow"><div></div></li>
                <li class="green"><div></div></li>
                <li class="lightblue"><div></div></li>
                <li class="blue"><div></div></li>
                <li class="purple"><div></div></li>
                <li><div></div></li>
            </ul>
        </div>
        <a href="#" id="left">Left</a>
        <a href="#" id="right">Right</a>
    </body>
</html>