点击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