jquery cycle plugin - need some help with the pager...

Question

I'm trying to implement the pager and I've gone through the samples on that site as well as some of the solutions posted here in response to similar questions and elsewhere on the net, but so far nothing has worked...

This is the jquery I'm using (the latest attempt anyway...). I'm sure that the html markup is probably not accommodating some of the solutions I've attempted and I did try to take it all out and make it completely basic like the example on the demo site, but (1) It still didn't work and (2) I want to be able to use this html structure:

    $j(document).ready(function() {

            $j('#banner-content')
                    .cycle({ 
                            fx:     'fade', 
                            speed:   50, 
                            timeout: 3000, 
                            next:   '.t1', 
                            pause:   1,
                            pager: '#page-tabs',
                            after: myRotate
            });
            $j('#banner-tabs').not('.stopped').find('a').click(function(){
                $j('#banner-content').cycle('pause');
                $j('#banner-tabs').addClass('stopped');
                return false;
            });
    });

function myRotate() {
                        $j('#banner-content img').each(function() {
                        var link = $j('#page-tabs li.' + $j(this).attr('class'));

                        if ($j(this).is(':visible')) {
                                link.addClass('active');
                        } else {
                                link.removeClass('active');
                        }
                });
}

And this is the HTML:

<div id="banner-area">
    <div class="clearfix" id="promo-boxes-nav">
        <ul id="banner-tabs">
            <li>        
                <ul id="page-tabs">
                    <li class="ptabs t39 active"><a href="#">1</a></li>
                    <li class="ptabs t42"><a href="#">2</a></li>
                    <li class="ptabs t49"><a href="#">3</a></li>                            
                </ul>
            </li>
            <li class="last">&nbsp;</li>
        </ul>
    </div>

    <div class="pics" id="banner-content">
    <a href="http://localhost/?p=39" class="t39" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;">
        <img class="t39" src="/1.jpg">
    </a>             

    <a href="http://localhost/?p=42" class="t42" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 2; opacity: 1;">
        <img class="t42" src="/2.jpg">
    </a>                                            

    <a href="http://localhost/?p=49" class="t49" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
        <img class="t49" src="/3.jpg">
    </a>                                    
    </div>
</div>