hatched/gist:805109

## gistfile1.html
<!DOCTYPE HTML>
<html>
  <head>
      <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
      <script type="text/javascript">
        YUI().use('node', 'event', 'selector-css3', 'transition', function(Y){

            var items, active, range, height, width, marginTop, marginLeft,
                movef = Y.one('#f'),
                moveb = Y.one('#b');

            function nextItem() {

                items = Y.all('li'),
                active = 1,
                range = 2

                if (active >= items.size() ) {
                    active = -1;
                }

                var nextRange = 0,
                    prevRange = 0,
                    nextZIndex = items.size(),
                    prevZIndex = items.size(),
                    activeNode = items.item(++active),
                    nextNode = activeNode.next(),
                    prevNode = activeNode.previous();


                Y.all('li').removeClass('(active|activer|activel)(-[0-9]*)?','');

                activeNode.addClass('active').setStyle('zIndex', items.size());

                while (nextNode) {
                    if (nextRange++ < range) {
                        nextNode.addClass('activer-' + nextRange);
                    }
                    nextNode.setStyle('zIndex', --nextZIndex);
                    nextNode = nextNode.next();
                }

                while (prevNode) {
                    if (prevRange++ < range) {
                        prevNode.addClass('activel-' + prevRange);
                    }
                    prevNode.setStyle('zIndex', --prevZIndex);
                    prevNode = prevNode.previous();
                }

            }

            nextItem();

            movef.on('click', function(e) {
                Y.one('ul').prepend(Y.one('ul li:last-child'));
                nextItem();
            }, this);

            moveb.on('click', function(e) {
                Y.one('ul').append(Y.one('ul li:first-child'));
                nextItem();
            }, this);

        });
      </script>
      <style type="text/css">
        ul { margin: 40px; position: absolute;}
        li { float: left; background: grey; text-align: center; position: relative; list-style-type: none; border: 5px solid black; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

        li.activel-2 {  height: 150px; width: 300px; margin: 80px 0px 0px 0px; }
        li.activel-1 { height: 250px; width: 400px; margin: 40px 0px 0px -200px; }
        li.active { height: 350px; width: 500px; margin: 0px 0px 0px -275px; }
        li.activer-1 { height: 250px; width: 400px; margin: 40px 0px 0px -275px; }
        li.activer-2 {  height: 150px; width: 300px; margin: 80px 0px 0px -200px; }

        #f { position: absolute; top: 215px; left: 800px; z-index: 100; }
        #b { position: absolute; top: 215px; left: 300px; z-index: 100;  }

      </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <ul>
        <li><img width="100%" height="100%" src="img/test1.jpg"></li>
        <li><img width="100%" height="100%" src="img/test2.jpg"></li>
        <li><img width="100%" height="100%" src="img/test3.jpg"></li>
        <li><img width="100%" height="100%" src="img/test4.jpg"></li>
        <li><img width="100%" height="100%" src="img/test5.jpg"></li>
    </ul>
      <div style="clear:both"></div>
      <button id="f">-></button>
      <button id="b"><-</button>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
	<script type="text/javascript">
	YUI().use('node', 'event', 'selector-css3', 'transition', function(Y){

	var items, active, range, height, width, marginTop, marginLeft,
	movef = Y.one('#f'),
	moveb = Y.one('#b');

	function nextItem() {

	items = Y.all('li'),
	active = 1,
	range = 2

	if (active >= items.size() ) {
	active = -1;
	}

	var nextRange = 0,
	prevRange = 0,
	nextZIndex = items.size(),
	prevZIndex = items.size(),
	activeNode = items.item(++active),
	nextNode = activeNode.next(),
	prevNode = activeNode.previous();


	Y.all('li').removeClass('(active\|activer\|activel)(-[0-9]*)?','');

	activeNode.addClass('active').setStyle('zIndex', items.size());

	while (nextNode) {
	if (nextRange++ < range) {
	nextNode.addClass('activer-' + nextRange);
	}
	nextNode.setStyle('zIndex', --nextZIndex);
	nextNode = nextNode.next();
	}

	while (prevNode) {
	if (prevRange++ < range) {
	prevNode.addClass('activel-' + prevRange);
	}
	prevNode.setStyle('zIndex', --prevZIndex);
	prevNode = prevNode.previous();
	}

	}

	nextItem();

	movef.on('click', function(e) {
	Y.one('ul').prepend(Y.one('ul li:last-child'));
	nextItem();
	}, this);

	moveb.on('click', function(e) {
	Y.one('ul').append(Y.one('ul li:first-child'));
	nextItem();
	}, this);

	});
	</script>
	<style type="text/css">
	ul { margin: 40px; position: absolute;}
	li { float: left; background: grey; text-align: center; position: relative; list-style-type: none; border: 5px solid black; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

	li.activel-2 { height: 150px; width: 300px; margin: 80px 0px 0px 0px; }
	li.activel-1 { height: 250px; width: 400px; margin: 40px 0px 0px -200px; }
	li.active { height: 350px; width: 500px; margin: 0px 0px 0px -275px; }
	li.activer-1 { height: 250px; width: 400px; margin: 40px 0px 0px -275px; }
	li.activer-2 { height: 150px; width: 300px; margin: 80px 0px 0px -200px; }

	#f { position: absolute; top: 215px; left: 800px; z-index: 100; }
	#b { position: absolute; top: 215px; left: 300px; z-index: 100; }

	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	<ul>
	<li><img width="100%" height="100%" src="img/test1.jpg"></li>
	<li><img width="100%" height="100%" src="img/test2.jpg"></li>
	<li><img width="100%" height="100%" src="img/test3.jpg"></li>
	<li><img width="100%" height="100%" src="img/test4.jpg"></li>
	<li><img width="100%" height="100%" src="img/test5.jpg"></li>
	</ul>
	<div style="clear:both"></div>
	<button id="f">-></button>
	<button id="b"><-</button>
	</body>
	</html>