使用Nivo滑塊顯示滑塊數

Question

我想在滑塊上顯示滑塊數爲2 of 10。我如何使它與過渡3 of 10,4 of 10（隨着滑塊移動滑塊）& 7 of 10（如果相應的縮略圖被點擊）一起工作？

Answer 1

您可以讓當前幻燈片沒有爲current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;添加1把它作爲索引從0

開始使用afterChange屬性在初始化NIVO滑塊時更改當前幻燈片編號。

於是，我懂了工作通過

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     var total = jQuery('#nivo-slider img').length; 
     var current_slide_no = 1; // garbage 
     // var rand = Math.floor(Math.random()*total); 
     jQuery('#nivo-slider').nivoSlider({ 
      effect:'fade', //Specify sets like: 'fold,fade,sliceDown,slideInLeft' 
      animSpeed:600, //Slide transition speed 
      pauseTime:30000, 
      directionNav:false, //Next and Prev 
      // directionNavHide:true, //Only show on hover 
      controlNav:true, //1,2,3... 
       controlNavThumbs:true, //Use thumbnails for Control Nav 
      controlNavThumbsFromRel:true, //Use image rel for thumbs 
      pauseOnHover:false, //Stop animation while hovering 
      //captionOpacity:0.3, //Universal caption opacity 
      startSlide:0, //Set starting Slide (0 index) 
      // keyboardNav:true //Use left and right arrows 
      afterChange: function(){ 
       current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; 
       jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1); 
      } 
     }); 
     jQuery('#nivo-slider-status').show(); 
     jQuery('#nivo-slider-status > .total-slides').html(total); 
     current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; 
     jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1); 
    }); 
    </script> 

和我的HTML（應該是NIVO滑塊DIV外）是

<div id="nivo-slider-status" class="alignright"> 
    <span class="current-slide"></span> of <span class="total-slides"></span> 
</div> 

Answer 2

您需要查找clickhandler和or transition事件。我沒有使用過NIVO還沒有，但是這是你需要做的concet：

parent = $('#buttons'); // button container 
pages = parent.find('.button').size; // total number of pages 

parent.find('.button').click(function(){ 
    index = parent.index($this) + 1; // this is the the page number 

    //do something with these variables 
    $('#div1').html(index + ' of ' + pages); 
});