我想在滑塊上顯示滑塊數爲2 of 10
。我如何使它與過渡3 of 10
,4 of 10
(隨着滑塊移動滑塊)& 7 of 10
(如果相應的縮略圖被點擊)一起工作?使用Nivo滑塊顯示滑塊數
1
A
回答
5
您可以讓當前幻燈片沒有爲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>
0
您需要查找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);
});
+0
謝謝!我發現Nivo滑塊提供了檢索當前幻燈片編號的簡單方法,然後在每次更換幻燈片後使用它來計算正確的值。 – Ashfame 2011-03-27 16:36:08
相關問題
- 1. 使用NIVO滑塊
- 2. 在NIVO滑塊
- 3. NIVO滑塊縮略圖/ ControlNav內滑塊
- 4. Nivo滑塊不能正常顯示
- 5. IE中的Nivo滑塊顯示問題
- 6. Nivo滑塊轉換
- 7. Nivo滑塊問題?
- 8. 加速Nivo滑塊
- 9. nivo滑塊問題
- 10. Nivo滑塊不起作用
- 11. 動態滑塊使用PHP/Mysql&Nivo滑塊
- 12. 使用Flash Builder創建像Nivo滑塊的圖像滑塊
- 13. 更改NIVO滑塊滑動效果
- 14. NIVO滑塊jQuery將不會滑動
- 15. nivo滑塊的定位
- 16. 定製nivo滑塊jQuery
- 17. NIVO滑塊圓角問題
- 18. Joomla和NIVO滑塊困境
- 19. 圖像與nivo滑塊jquery
- 20. Nivo滑塊大拇指
- 21. 縮略圖在NIVO滑塊
- 22. NIVO滑塊不集中
- 23. NIVO滑塊格只在Firefox
- 24. Nivo滑塊到Wordpress主題
- 25. 調整nivo滑塊框
- 26. NIVO滑塊不與WordPress
- 27. jquery和nivo滑塊衝突
- 28. Nivo滑塊圖像閃爍
- 29. jquery nivo滑塊標題
- 30. nivo滑塊溢出問題
@Ashframe感謝您的解決方案。但我遇到了一個問題:我試圖在具有多個滑塊的頁面上添加幻燈片計數,但總幻燈片是錯誤的。我能做什麼? – marcelo2605 2015-01-05 13:33:00
@ marcelo2605使每個滑塊的ID都是唯一的,並確保JS代碼的目標是正確的實例。 – Ashfame 2015-01-05 13:38:53