2010-12-08 45 views
0

我正在使用這個jQuery插件:http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm創建一個垂直傳送帶。jQuery Carousel插件滾動到第一項點擊

我想做類似於分頁的操作,點擊一個按鈕並滾動到相應的框架。但我只想要一個按鈕。這個按鈕會在最後一幀之後出現,它會讀回「頂部」。點擊後,它將滾動到旋轉木馬中的第一個項目。任何人都知道我可以輕易觸發此事件嗎?

+0

這是你選擇該插件的恥辱。我會避免它有兩個原因:沒有文檔,除了設置,並沒有鏈接到未壓縮的來源。 – 2010-12-08 22:41:48

回答

2

我寫了以下內容,我認爲這是你想要實現的。

<html> 
<head> 
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" /> 


    <script type="text/javascript"> 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel(
    { 
     vertical: true, 
     scroll: 1 
    }); 

    // Loop through all images and attach click action 
    jQuery("#mycarousel img").each(function(index, element) 
    { 
     $(element).click(function() 
     { 
      jQuery('#mycarousel').jcarousel('scroll', index + 1); 
     }); 
    }); 
}); 

</script> 
</head> 

<body> 

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
</ul> 
</body> 
</html> 
+0

幫助我用我需要做的+1 – AdRock 2014-01-02 10:42:02