Gibt es eine Möglichkeit, dieses JQuery-Karussell effizienter zu machen?

Question

Ich habe diesen Code für ein Karussell-Widget, siehe unten.

Problem: Das Problem ist, dass <ul> Position nicht immer endet, wo es auch angenommen wird. In Chrome endet die linke Position als left: -1247px; ... eindeutig falsch, da das Widget nichts anzeigt.

Frage: Gibt es eine Möglichkeit, dieses Widget effizienter zu schreiben?

//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(); } 

Jede Hilfe wird sehr geschätzt, Dank

Answer 1

ein Blick auf dieses Plugin vielleicht kann es :)

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