2011-01-12 9 views
0

私はこのカルーセルウィジェットのコードを持っています。下記を参照してください。このJQueryカルーセルの作業をより効率的にする方法はありますか?

問題:問題は、<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(); } 

すべてのヘルプは大歓迎され、感謝

答えて

0

は、このプラグインを見て多分それは:)

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

+0

感謝を助けるかもしれない...私は意図的にオンラインからこのコードを選びましたチュートリアルではJQueryの理解を深めることができました。心配しないで...私はすぐに計算を作業すると確信しています:) – Nasir

関連する問題