jquery循環和jcarousel

Question

我有一個jquery循環和jcarousel的畫廊設置。 我用PHP生成縮略圖

<ul id="pager"> 
    <?php foreach ($thumbs as $thumb) : ?> 
<li><a href="#"><?php echo $thumb ?> </a></li> 
    <?php endforeach; ?> 
</ul> 

現在我創建一個旋轉木馬，尋呼機追加到循環

$('#pager').jcarousel({}); 
if ($('#images').length > 0) { 
    $('#images').before('<ul id="nav">').cycle({ 
    fx:  'turnDown', 
    speed: 500, 
    timeout: 5000, 
    pagerEvent: 'mouseover', 
    pager: '#pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '#pager li:eq(' + idx + ') a'; 
    } , 
    after: function(dir, id, el) { 
     var w= $('.jcarousel-clip-horizontal').width(); 
     var i = $('.jcarousel-item-horizontal').width(); 
     var slide = $('#pager .activeSlide'); 
     if (slide.position.left > w-i ) { 
      $('div.jcarousel-next').trigger('click'); 
     } 
    } 
}); 
    $('#pager a').mouseenter(function() { 
    $('#images').cycle('toggle'); 
}).mouseleave(function(){ 
    $('#images').cycle('toggle'); 
}); 

我在我的呼機可見7元，我想觸發下一個scroll事件項目不可見。

我試圖使用jquery index（）函數爲activeSlider添加一個計數器，但當光標懸停在pager項目上時會變得雜亂無章。

對此的任何建議。

Answer 1

我想你可以使用週期

http://jquery.malsup.com/cycle2/demo/caro-pager.php

http://jquery.malsup.com/cycle2/demo/carousel.php

Answer 2

確定的第2版，所以我找到了解決WHIS問題我花了一段，大概可以做的更好，但這裏的代碼我用我認爲它很直接

$('#pager').jcarousel({ 
    scroll: 1, 
    wrap:'last', 
}); 
if ($('#images').length > 0) { 
    $('#images').before('<ul id="nav">').cycle({ 
     fx:  'turnDown', 
     speed: 500, 
     timeout: 5000, 
     pagerEvent: 'mouseover', 
     pager: '#pager', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '#pager li:eq(' + idx + ') a'; 
     } 
     ,after: onBefore 
    }); 
}; 

function onBefore(curr,next,opts) { 
    var size = $('#pager li').size(); 
    var activeSlide = $('#pager .activeSlide'); 
    var position = activeSlide.offset(); 

    // get the position of the carousel clip container 
    var container = $('.jcarousel-clip'); 
    var containerOff = container.offset(); 

    //first load 
    if(position!=null){ 
        // get the information 
     var slideRigt = position.left + activeSlide.width(); 
     var containerRight = containerOff.left + container.width(); 
        // slide is out ou bound on the right 
      if (slideRigt > containerRight) { 
        $('div.jcarousel-next').trigger('click'); 
       } 
        // slide is out of bound on the left - rewind/wrap thumbnails to first item 
        else if (position.left < containerOff.left) { 
        $('div.jcarousel-next').trigger('click'); 
       }; 
    } 
}; 

希望這將是有用的有相同的問題的人。仍然試圖弄清楚是否有一種方法使這個工作與包裝：'循環'選項的jcarousel。