Homepage banner to rotate on timer

Homepage banner to rotate on timer

Hi,

I have a feature banner on my homepage which is comprised of a banner image and 4 tab-like buttons.  When the user clicks one of the tab buttons the banner image changes.  This all works using the code below:

  1. $('#promo-items img').not(':first').css({opacity: 0.25});

      $('#promo-items li').click(function(){
        var itemClicked = $(this).index();
        $('#promo-items img').css({opacity: 1});
        $('#promo-items img').not($('img',this)).css({opacity: 0.25});
        $('#promo-selected a').css({display: 'none'});
        $('#promo-selected a:eq('+itemClicked+')').css({display: 'block'});
      });








The HTML which this corresponds to is as follows:

  1. <div id="promo">
        <ul id="promo-items">
            <!--These are the tab buttons.-->
            <li id="promo-item-1"><img src="/media/6518/test-button-1.jpg" alt="" title="" /></li>
            <li id="promo-item-2"><img src="/media/6523/test-button-2.jpg" alt="" title="" /></li>
            <li id="promo-item-3"><img src="/media/2547/test-button-3.png" alt="" title="" /></li>
            <li id="promo-item-4"><img src="/media/2552/test-button-4.png" alt="" title="" /></li>
        </ul>
        <div id="promo-selected">
            <!--These are the banner images.  Only one shows at any time, depending on the selected tab button above.-->
            <a href="#" title="" id="promo-selected-1">
                <span>Caption 1</span>
                <img src="/media/6518/test-banner-1.jpg" alt="" title="" />
            </a>
            <a href="#" title="" id="promo-selected-2">
                <span>Caption 2</span>
                <img src="/media/6523/test-banner-2.jpg" alt="" title="" />
            </a>
            <a href="#" title="" id="promo-selected-3">
                <span>Caption 3</span>
                <img src="/media/2547/test-banner-3.png" alt="" title="" />
            </a>
            <a href="#" title="" id="promo-selected-4">
                <span>Caption 4</span>
                <img src="/media/2552/test-banner-4.png" alt="" title="" />
            </a>
        </div>
    </div>




























However, I'd like to put this on a timer so that the tabs select automatically, one after the other, and the main image changes correspondingly.  The user can still manually select the tabs but the timer still loops through them too if the user doesn't select anything.

Can anyone point me in the right direction here?  Other than using the .delay() method, I've really no idea where to start!

Many thanks...