點擊caroufredsel暫停旋轉

Question

我有一個旋轉木馬和一組拇指。轉盤設置爲在頁面加載時自動滾動。但是，當點擊縮略圖時，我想暫停旋轉木馬。

我試圖在縮略圖圖像的點擊事件上實現這一點，然後使用觸發器來滑動點擊的拇指，然後暫停。

問題是，使用以下代碼，它會暫停傳送帶，但不會將傳送帶圖像更改爲單擊的圖像。如果我刪除了暫停觸發器，則輪播更改爲單擊的拇指。

<script> 
$(function(){ 
     /* Attached an unique class name to each thumbnail image */ 
    $('#thumbs .thumb a').each(function(i) { 
     $(this).addClass('itm'+i); 

     /* add onclick event to thumbnail to make the main 
     carousel scroll to the right slide*/ 
     $(this).click(function() { 
      $('#project-carousel').trigger('slideTo', [i, 0, true]); 
      $('#project-carousel').trigger('pause', true); 
      return false; 
     }); 
    }); 

    /* Highlight the first item on first load */ 
    $('#thumbs a.itm0').addClass('selected'); 

     //slideshow 
projectCarousel = $("#project-carousel").carouFredSel({ 
     responsive:true, 
     circular:true, 
     infinite:true, 
     width:983, 
     height:534, 
     scroll:{ 
      fx:'crossfade', 
      duration:1000, 
      onBefore: function() { 
       /* Everytime the main slideshow changes, it check to 
        make sure thumbnail and page are displayed correctly */ 
       /* Get the current position */ 
       var pos = $(this).triggerHandler('currentPosition'); 

       /* Reset and select the current thumbnail item */ 
       $('#thumbs a').removeClass('selected'); 
       $('#thumbs a.itm'+pos).addClass('selected'); 
       /* Move the thumbnail to the right page */ 
       //var page = Math.floor(pos/8); 
       //$('#thumbs').trigger('slideToPage', page); 
      } 
     }, 
     auto: { 
      play:true, 
     }, 
     items:{ 
      height:winHeight, 
      visible:1, 
      width:1000 
     }, 
     prev:$("#left"), 
     next:$("#right"), 
    }); 

    /* Carousel for the thumbnails */ 
    $('#thumbs').carouFredSel({ 
     width:680, 
     height:50, 
     direction: 'left', 
     circular: false, 
     items: 9, 
     infinite: false, 
     align: false, 
     auto: false, 
     prev: '#prev', 
     next: '#next' 
    }); 

}); 
</script> 

如何讓旋轉木馬進展到點擊縮略圖，然後暫停？

Answer 1

這可能不是最好的方式，但是這是我迄今爲止即停止縮略圖改變後的輪播：

我加了延遲功能：

$(this).click(function() { 
      $('#project-carousel').trigger('slideTo', [i, 0, true]); 
      setTimeout(function() { 
       $('#project-carousel').trigger('pause', true); 
      }, 1000); 
      return false; 
     }); 

這允許轉換完成，然後暫停滾動。

Answer 2

不知道這是你在找什麼... 但在這個環節的例子暫停onMouseHover

http://caroufredsel.dev7studios.com/examples/continuously-scrolling.php