2010-08-24 39 views
0

我正在使用jcarousellite來創建一個簡單的jQuery旋轉木馬,但我想稍微改變一下,以便圖像對於左側和最右側的項目隱藏起來,但顯示在中間項目。顯示在jCarouselLite中的位置

要做到這一點,雖然我需要能夠找到哪些列表項在任何時候都在視圖端口中顯示。我已經嘗試在源代碼中挖掘並使用包含的回調函數,但是我無法獲取與顯示的項目相符的索引號。

有沒有人有任何這方面的經驗或想法如何解決它?

編輯

OK解決了這個在一定程度上,但它仍然無法正常工作。 afterEnd函數內置於插件中,並提供當前可見項目的對象。我用它來提供列表元素的ID,並應用一些轉換。

問題是,這是所有「外部」的插件,所以如果我啓用自動滾動,所有這些代碼被忽略。我需要一些將這些代碼插入插件中的函數的方式,這就是我害怕的地方。

$(".ccvi-carousel").jCarouselLite({ 
    btnNext: ".next", 
    btnPrev: ".prev", 
    speed: 800, 
    //auto: 2000, 
    afterEnd: function(a) { 
     if (start=true) { 
      $('li#1 .cf-img').hide(); 
     } 
     left = $(a[0]).attr("id"); 
     mid = $(a[1]).attr("id"); 
     right = $(a[2]).attr("id"); 
     $('.prev').click(function() { 
      $('li#' + left + ' .cf-img').fadeIn(); 
      $('li#' + mid + ' .cf-img').hide(); 
      $('li#' + right + ' .cf-img').hide(); 
     }); 
     $('.next').click(function() { 
      $('li#' + left + ' .cf-img').hide(); 
      $('li#' + mid + ' .cf-img').hide(); 
      $('li#' + right + ' .cf-img').fadeIn(); 
     });    
     //alert("Left:" + left + "Middle:" + mid + "Right:" + right + ""); 
    } 
}); 

我覺得這是我需要把我的代碼到插件中的功能,但我看不出它是如何工作的。

 function go(to) { 
     if(!running) { 

      if(o.beforeStart) 
       o.beforeStart.call(this, vis()); 

      if(o.circular) {   // If circular we are in first or last, then goto the other end 
       if(to<=o.start-v-1) {   // If first, then goto last 
        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px"); 
        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements. 
        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll; 
        //alert (curr); 
       } else if(to>=itemLength-v+1) { // If last, then goto first 
        ul.css(animCss, -((v) * liSize) + "px"); 
        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements. 
        curr = to==itemLength-v+1 ? v+1 : v+o.scroll; 
        //alert (curr); 
       } else { 
        curr = to; 
        //alert (curr); 
       } 
      } else {     // If non-circular and to points to first or last, we just return. 
       if(to<0 || to>itemLength-v) return; 
       else curr = to; 
      }       // If neither overrides it, the curr will still be "to" and we can proceed. 

      running = true; 

      ul.animate(
       animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, 
       function() { 
        //alert (curr-2); 
        if(o.afterEnd) 
         o.afterEnd.call(this, vis()); 
        running = false; 
       } 
      ); 
      // Disable buttons when the carousel reaches the last/first, and enable when not 
      if(!o.circular) { 
       $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); 
       $((curr-o.scroll<0 && o.btnPrev) 
        || 
        (curr+o.scroll > itemLength-v && o.btnNext) 
        || 
        [] 
       ).addClass("disabled"); 
      } 

     } 
     return false; 
    }; 

回答

0

我認爲這將有助於你:

How to get the current index with jCarousel Lite?

除了上面的文章我已經設置線241以下

div.css({position: "relative", "z-index": "2", left: "-1144px"}); //changed the left from 0 to -1144px to allow the carousel circle to repeat offscreen 

這把整個轉盤剩下。在我的情況下,我正在移動旋轉木馬1144px,因爲我已經設置了寬度幻燈片,但是您可以輕鬆地動態計算左偏移量。

現在我有2張幻燈片離開屏幕左側,我設置了.jCarouselLite({visible:6});這給了我兩個可見的幻燈片在中間和另外兩個在屏幕右邊。

接下來將下面的代碼放在ul.animate()之後的任意位置;

li.eq(curr+1).addClass("prev"); 
li.eq(curr+2).addClass("current"); 
li.eq(curr+3).addClass("next"); 

最後確保將正確的索引幻燈片設置爲當前。下面鏈接的文章中,我其實開始我的轉盤上指標8

$(".jCarouselLite li").eq(7).addClass("prev"); 
$(".jCarouselLite li").eq(8).addClass("current"); 
$(".jCarouselLite li").eq(9).addClass("next"); 

要嘗試找出一點關於你在上面試着將警報(CURR)已經概述了的jCarousel精簡版腳本的準則;或者console.log(curr);在每個「if(o。」區域之後,如果一切順利,您將獲得當前幻燈片的索引。