有沒有辦法讓這個JQuery輪播更高效地工作？

Question

我有一個旋轉木馬小部件的代碼，請參見下文。

問題：問題在於<ul>的位置並不總是以它的假設結束。在Chrome中，左側位置最終顯示爲left: -1247px; ...顯然錯誤，因爲該小部件不顯示任何內容。

問題：有沒有辦法更有效地編寫這個小部件？

//Initiate variable for the rotate() function and delay 
    var run = setInterval('rotate()', 3800);  

    //Get the width of the DIV containing the unordered list 
    var item_width = $('#featured-widget').width(); 

    //Minus 1 instance of the unordered list as it falls outside of #featured-widget 
    var left_value = -item_width; 

    //Move the last item before first item, just in case user click prev button 
    $('#featured-widget li:first').before($('#featured-widget li:last')); 

    //Set the default item to the correct position 
    $('#featured-widget ul').css({'left' : left_value}); 

    //Prev button 
    $('#prev').click(function() { 

     //Get the right position 
     var left_indent = parseInt($('#featured-widget ul').css('left')) + item_width; 

     //Animate the left position of the <ul> and rearrange the list items then reposition the <ul>    
     $('#featured-widget ul').animate({'left' : left_indent}, 800,function(){  

      $('#featured-widget li:first').before($('#featured-widget li:last')); 
      $('#featured-widget ul').css({'left' : left_value}); 

     }); 

     //Cancel the link behavior so page doesn't jump    
     return false; 

    }); 

    //Next button 
    $('#next').click(function() { 

     var left_indent = parseInt($('#featured-widget ul').css('left')) - item_width; 

     $('#featured-widget ul ').animate({'left' : left_indent}, 800, function() { 

      $('#featured-widget li:last').after($('#featured-widget li:first')); 
      $('#featured-widget ul').css({'left' : left_value}); 

     }); 

     return false; 

    });   

    //If mouse hover, pause rotate(), otherwise rotate it 
    $('#featured-widget, #prev, #next').hover(function() { clearInterval(run); 
     }, function() { run = setInterval('rotate()', 3800); 
    }); 

}); 

    //The rotate() function is called and triggers a click after the setInterval() 
    //This gets the 'Featured Number Plates' widget to automate 
    function rotate() { $('#next').click(); } 

任何幫助是極大的讚賞，感謝

Answer 1

看看這個插件，也許它可以幫助:)

http://jquery.malsup.com/cycle/