Vertical carousel

http://weblabor.hu/forumok/temak/111196#comment-84611

HTML

<ul id="menu">
  <li><a href="#item-1">Item 1</a></li>
  <li><a href="#item-2">Item 2</a></li>
  <li><a href="#item-3">Item 3</a></li>
  <li><a href="#item-4">Item 4</a></li>
</ul>
<div id="items-container">
  <ul id="items">
    <li id="item-1">Content 1</li>
    <li id="item-2">Content 2</li>
    <li id="item-3">Content 3</li>
    <li id="item-4">Content 4</li>
  </ul>
</div>

CSS

body {
      width: 500px;
      margin: 0 auto;
    }
    #menu {
      float: right;
      width: 20%;
      height: 200px;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #000;
    }
    #menu li {
      list-style-type: none;
      background: #ddd;
      height: 25%;
      margin: 0;
    }
    #menu a {
      padding: 10px;
      display: block;
      border-top: 1px solid #000;
    }
    #items-container {
      position: relative;
      height: 200px;
      overflow: hidden;
      background: #eee;
      border-right: 1px solid #000;
    }
    #items {
      margin: 0;
      padding: 0;
      position: relative;
      top: 0;
    }
    #items li {
      list-style-type: none;
      margin: 0;
      height: 200px;
      padding: 0 20px;
      line-height: 200px;
    }

JavaScript

(function($) {
    var items = $('#items'),
        index = 0,
        timeout;

    /**
     * Továbbítás a következő elemhez.
     */
    function autoForward() {
        var children = items.children();

        index = index === children.length - 1 ? 0 : index + 1;
        animate(children.eq(index));
    }

    /**
     * Indítjuk a következő elemhez ugrást.
     */
    function startTimer() {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(autoForward, 5000);
    }

    /**
     * Animáljuk a dobozt a megadott elemhez.
     */
    function animate(item) {
        if (timeout) {
            clearTimeout(timeout);
        }
        items.stop(true).animate({
            top: -item.position().top
        }, 'slow', startTimer);
    }

    /**
     * Kezeljük a menüre kattintást.
     */
    $('#menu').find('a').click(function() {
        var link = $(this),
            hash = link.attr('href').replace(/^.*#/, '#'),
            item = $(hash);

        index = item.index();
        animate(item);
        return false;
    });

    startTimer();
}(jQuery));