I have a slideshow, complete with buttons that allow the user to transition to the next slide.

The slideshow shows 3 images; if the user does not touch the buttons, the 1st image fades into the 2nd, the 2nd one fades into the 3rd...and then when the 3rd fades back to the 1st, it is very...choppy.

Even if the user DOES use the buttons, that 3rd transition is choppy.

Can anyone pinpoint this problem and guide me to a solution? I am a novice at javascript. I'm good with HTML and CSS, but this is just a free snippet I am using.

PHP Code:
<script src="slideshow/jquery-1.4.2.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        $(window).load(function(){
        var pages = $('#container li'), current=0;
        var currentPage,nextPage;
        var timeoutID;
        var buttonClicked=0;
        
        var handler1=function(){
            buttonClicked=1;
            $('#container .button').unbind('click');
            currentPage= pages.eq(current);
            if($(this).hasClass('prevButton'))
            {
                if (current <= 0)
                    current=pages.length-1;
                    else
                    current=current-1;
            }
            else
            {
        
                if (current >= pages.length-1)
                    current=0;
                else
                    current=current+1;
            }
            nextPage = pages.eq(current);    
            currentPage.fadeTo('slow',0.3,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('#container .button').bind('click',handler1);
                });    
            });            
        }
        
        var handler2=function(){
            if (buttonClicked==0)
            {
            $('#container .button').unbind('click');
            currentPage= pages.eq(current);
            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
            nextPage = pages.eq(current);    
            currentPage.fadeTo('slow',0.3,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('#container .button').bind('click',handler1);                
                });    
            });
            timeoutID=setTimeout(function(){
                handler2();    
            }, 4000);
            }
        }
        
        $('#container .button').click(function(){
            clearTimeout(timeoutID);
            handler1();
        });
        
        timeoutID=setTimeout(function(){
            handler2();    
            }, 4000);
        
        });
        
        </script>