<div class="banner-nav" id="banner-nav">
     <h1 class="heading">
         Banners
     </h1>
 
     #foreach ($e_banner in $banner.getSiblings())
        #set($e_banner_image = $e_banner.getData())
        #set($e_banner_text = $e_banner.getChild("text").getData())
        #set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())

        <a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
            <p>
                    $e_banner_text
            </p>
        </a>
    #end

    #set ($banner_count = 0)

    <menu class="menu">
        <a class="playpause" href="javascript:bannerNav.playpause();">Play / Pause</a>
        <a class="prev" href="javascript:bannerNav.prev();">Previous</a>

        #foreach ($e_banner in $banner.getSiblings())
            <a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_count</a>

            #set ($banner_count = $banner_count + 1)
        #end

        <a class="next" href="javascript:bannerNav.next();">Next</a>
    </menu>
</div>

AUI().use('get', function(A){
   A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {

       onSuccess: function(){

           // jQuery() can be used in here...
          
           // Added other js code related to banner navigation here
       }
});
});

AUI().use('get', function(A){
	A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {
		onSuccess: function(){
		 bannerNav = {};
		
		(function () {
			var item = 0,
			busy = false,
			paused = true,
			interval = null,
			animationSpeed = 0.6,
			animationInterval = 12,
			menuOpacityOff = 0.75,
			menuOpacityOn = 1,
			jQuery_banner,
			jQuery_banner_each,
			jQuery_banner_menu,
			jQuery_banner_item,
			jQuery_banner_play,
			jQuery_banner_img = new Image();
		
			jQuery(document).ready(
				function () {
					jQuery_banner = jQuery('#banner-nav');
		
					if (!jQuery_banner.length) {
						return;
					}
		
					jQuery_banner_each = jQuery_banner.children('.banner');
					jQuery_banner_menu = jQuery_banner.children('.menu');
					jQuery_banner_item = jQuery_banner_menu.children('.item');
					jQuery_banner_play = jQuery_banner_menu.children('.playpause');
		
					item = Math.round(Math.random() * jQuery_banner_each.length) - 1;
		
					bannerNav.toBanner = function (to, animationTime) {
						if (busy || item === to) {
							return;
						} else {
							busy = true;
						}
		
						jQuery_banner_item.eq(item).removeClass('selected');
						jQuery_banner_item.eq(to).addClass('selected').css('opacity', 0).css('opacity', 1).blur();
		
						jQuery_banner_each.eq(to).css('zIndex', 3).animate(
							{
								opacity: 1
							},
							animationTime,
							function () {
								jQuery_banner_each.eq(item).css(
									{
										opacity: 0,
										zIndex: 1
									}
								);
		
								jQuery_banner_each.eq(to).css('zIndex', 2);
		
								item = to;
								busy = false;
							}
						);
					};
		
					bannerNav.setInterval = function () {
						jQuery_banner_play.removeClass('paused');
		
						paused = false;
		
						interval = setInterval(
							function () {
								bannerNav.toBanner(item + 1 > jQuery_banner_each.length - 1 ? 0 : item + 1, animationSpeed * 1000);
							},
							animationInterval * 1000
						);
					};
		
					bannerNav.clearInterval = function () {
						jQuery_banner_play.addClass('paused');
		
						paused = true;
		
						clearInterval(interval);
					};
		
					bannerNav.playpause = function () {
						if (paused) {
							setTimeout(
								function () {
									bannerNav.next(animationSpeed * 1000);
								},
								250
							);					
						} else {
							bannerNav.clearInterval();
						}
					};
		
					bannerNav.prev = function (animationTime) {
						bannerNav.clearInterval();
						bannerNav.toBanner(item - 1 < 0 ? jQuery_banner_each.length - 1 : item - 1, animationTime || 1);
						bannerNav.setInterval();
					};
		
					bannerNav.next = function (animationTime) {
						bannerNav.clearInterval();
						bannerNav.toBanner(item + 1 > jQuery_banner_each.length - 1 ? 0 : item + 1, animationTime || 1);
						bannerNav.setInterval();
					};
		
					jQuery_banner_item.eq(item).addClass('selected');
		
					jQuery_banner_menu.css('opacity', menuOpacityOff);
		
					jQuery_banner_img.onload = function () {
						jQuery_banner.bind(
							'mouseenter',
							function () {
								jQuery_banner_menu.animate(
									{
										opacity: menuOpacityOn
									},
									150
								)
							}
						).bind(
							'mouseleave',
							function () {
								jQuery_banner_menu.animate(
									{
										opacity: menuOpacityOff
									},
									300
								);
							}
						);
		
						jQuery_banner_each.eq(item).css(
							{
								opacity: 1,
								zIndex: 2
							}
						);
		
						bannerNav.setInterval();
					};
		
					if (item < 0) {
						item = 0;
					}
		
					jQuery_banner_img.src = jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');
				}
			);
			}());
			/* For HTML5 support in IE */
			(function(){if(!/*@cc_on!@*/0)return;var e = 'abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video'.split(','),j=e.length+1;while(--j){document.createElement(e[j])}})();
		}
	});
});