如何根據鼠標點擊單獨的圖庫來設置jCarousel的起始圖像？

我有一個頁面，其中包含一個jCarousel滑塊（在div中）和一個包含縮略圖列表的div。旋轉木馬在頁面初始加載時隱藏，而縮略圖可見。我想要實現的是，當用戶點擊特定的縮略圖時，縮略圖列表（或畫廊，我應該說）在旋轉木馬變得可見時淡出，點擊縮略圖圖像的較大版本首先顯示旋轉木馬。我試着將旋轉木馬的配置選項「開始」設置爲一個包含點擊縮略圖ID的變量，但這給了我奇怪的結果。任何幫助將不勝感激！這裏是我的代碼：如何根據鼠標點擊單獨的圖庫來設置jCarousel的起始圖像？

<script type="text/javascript"> 
$(document).ready(function() { 
    var currImage; 
    $('#carousel').hide(); 
    $('.thumb').click(function(){ 
     $('#thumbs').fadeOut('slow'); 
     currImage = $(this).attr('id'); 

     $('#mycarousel').jcarousel({ 
      start: currImage, 
      visible: 1, 
      scroll: 1 
     }); 
     $('#carousel').fadeIn('slow');  
    }); 
}); 
</script> 
<div id="thumbs"> 
    <ul class="thumb-display"> 
     <li> 
      <a class="thumb" href="#" id="1"> 
       <img src="pic1-thumb.jpg" /> 
      </a> 
     </li> 
     <li> 
      <a class="thumb" href="#" id="2"> 
       <img src="pic2-thumb.jpg" /> 
      </a> 
     </li> 
    </ul> 
</div> 
<div id="carousel"> 
    <ul id="mycarousel" class="jcarousel-skin-tango"> 
     <li><img src="pic1-large/></li> 
     <li><img src="pic2-large/></li> 
    </ul> 
</div>

來源

2012-02-22 selbay84

pphou，您的jCarousel的用途與Carousel with External Controls示例非常相似。

訣竅是將您的縮略圖設置爲initCallback函數中的外部控件。

該代碼將是這樣的：

的javascript：

$(document).ready(function() { 
    $thumbs = $('#thumbs'); 
    $carousel = $('#mycarousel').hide(); 
    $carousel.jcarousel({ 
     visible: 1, 
     scroll: 1, 
     initCallback: function(carousel) { 
      $thumbs.find('a').on('click', function() { 
       carousel.scroll($.jcarousel.intval($(this).attr('id'))); 
//    carousel.scroll($.jcarousel.intval($(this).index()));//may work, if so then omit ids from the HTML 
       $thumbs.fadeOut('slow'); 
       $carousel.fadeIn('slow'); 
       return false; 
      }); 
     } 
    }); 
});

未經檢驗

您可能需要的代碼打了一下得到你想要什麼。

您還需要建立一條迴轉方向的縮略圖。我沒有解決這方面的問題。

記得在gregL指出的時候從0（零）開始編號縮略圖ID。

來源

2012-02-22 09:19:55

非常感謝您的幫助！我已經遵循了你的建議，並且我離得更近一些，但現在的問題是輪播在初始加載時可見。其他一切正常。我已經嘗試調整一下代碼，但它並沒有讓我到任何地方。 – selbay84 2012-02-22 20:35:32

這可能是因爲我的代碼只處理'＃mycarousel'而不是'＃carousel'。嘗試'$ carousel = $（'＃carousel'）。hide（）;'和'$ mycarousel = $（'＃mycarousel'）;'在函數的頂部，那麼你有辦法控制容器和旋轉木馬本身是獨立的。我的代碼的第9行和第10行還有一個'$'，但你可能已經發現了。如果你仍然無法工作，嘗試創建一個jsfidle（或簡化），所以我有一些東西可以玩。 – 2012-02-23 00:14:15

更正 - 我沒有錯過9/10線的$。這是第一次。我已經成立了一個小提琴 - http://jsfiddle.net/sbbm4/2/ – 2012-02-23 04:06:43

看來，答案很簡單：start是從0開始的，而不是基於1的。

所以請嘗試使用：

$('#mycarousel').jcarousel({ 
     start: currImage - 1, 
     visible: 1, 
     scroll: 1 
    });

到初始化的jCarousel。

或者，插件可以正確確定圖像的尺寸嗎？如果不是，請嘗試添加明確的height和width屬性或CSS樣式。

此外，ID可能不是最好的「1」，「2」等等。使用data-imagenum屬性或類似的替代。

來源

2012-02-22 07:24:11 GregL

謝謝隊友，但是這個建議沒有任何效果。 – selbay84 2012-02-22 07:50:07

如何根據鼠標點擊單獨的圖庫來設置jCarousel的起始圖像？

回答

相關問題