jQuery jCarousel - 外部控件高亮（換行：圓形）+隨機幻燈片

我一直在實現jQuery的jCarousel插件的一些問題。我正在使用的代碼可在http://projects.klavina.com/stackoverflow/index-slider.html jQuery jCarousel - 外部控件高亮（換行：圓形）+隨機幻燈片

問題1： 我需要突出顯示滑塊＃1的有源外部控制。我在http://heidzir.com/blog/?p=21找到了一個解決方案，但正如在註釋中已經指出的那樣 - 當滑塊進入第二個循環時停止工作。

問題2： 我需要在頁面加載時隨機滑塊＃2（引號）上的幻燈片。我找到了一種隨機化li的方法（Randomize a sequence of div elements with jQuery），但滑塊停止工作並僅滑動首先加載的報價。

任何幫助將不勝感激。謝謝！

來源

2010-11-03 klavina

我有問題＃1，並找到了我想分享的解決方案。循環jcarousels的問題在於，「liindex」在重複遍歷所有可用列表元素之後不會從1開始計數，而是繼續向上計數（因爲如果添加警報（'liindex'），您會注意到）亮點功能裏面。

所以，如果你有一個圓形自動旋轉盤3組列表中的元素，一旦你完成，通過在第一時間滾動，並與第1項重新開始，的jCarousel看到它在第4項，而不是第一個。

這裏是我的解決方案（基於this），計算與總項目的模塊化和當前項目的liindex。

  var totalitems = 3; // number of total items in your carousel, you can probably detect it with jquery and replace this 

      function mycarousel_initCallback(carousel) { 
        jQuery('#external ul li a').bind('click', function() { 
          carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); 
          return false; 
        }); 
        carousel.clip.hover(function() { 
          carousel.stopAuto(); 
        }, function() { 
          carousel.startAuto(); 
        }); 
      }; 
      function highlight(carousel,objectli,liindex,listate){ 
        actindex = teasersize - (liindex % teasersize); // calculate which item this corresponds to after first scroll 
        jQuery('#external a').removeAttr("class","active"); 
        jQuery('#external a#link'+ actindex).attr("class","active"); 
      }; 
      function removehighlight(carousel,objectli,liindex,listate){ 
        actindex = teasersize - (liindex % teasersize); 
        jQuery('#external a#link'+ actindex).removeAttr("class","active"); 
      }; 
      jQuery(document).ready(function() { 
        jQuery("#mycarousel").jcarousel({ 
          initCallback: mycarousel_initCallback, 
          wrap: 'circular', 
          scroll: 1, 
          size: totalitems, // previously set in var 
          auto: 7, 
          itemVisibleInCallback: highlight, 
          itemVisibleOutCallback: removehighlight, 
          buttonNextHTML: null, 
          buttonPrevHTML: null 
        }); 
      });

這是你的外部導航應該基於JS的樣子：

  <ul id="external"> 
       <li><a href="#carouselitem1" id="link1">1</a></li> 
       <li><a href="#carouselitem2" id="link2">2</a></li> 
       <li><a href="#carouselitem3" id="link3">3</a></li>    </ul>

來源

2011-01-25 15:36:48 rayne

設置teasersize於上述列表項目的數量，你有

var teasersize = 4; // if you have 4 list items

來源

2011-04-01 00:32:47

jQuery jCarousel - 外部控件高亮（換行：圓形）+隨機幻燈片

回答

相關問題