Javascript 使用Nivo滑块显示幻灯片计数

我想在我的滑块上显示10张幻灯片中的

2张

。如何使其与转换

3/10

，

4/10

（滑块随幻灯片移动）和

7/10

（如果单击了相应的缩略图）？

您需要查找clickhandler和/或转换事件。我还没有使用nivo，但这是您需要做的：

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); 
});

---

您需要查找clickhandler和/或转换事件。我还没有使用nivo，但这是您需要做的：

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); 
});

---

您可以将当前幻灯片编号设置为

current_slide_no=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片将1添加到其中，因为索引从0开始

在初始化NIVO滑块时，使用
afterChange
属性更改当前幻灯片编号

所以，我让它工作了

<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>


jQuery（文档）.ready（函数（）{
var total=jQuery（'#nivo slider img'）。长度；
var current\u slide\u no=1；//垃圾
//var rand=Math.floor（Math.random（）*总计）；
jQuery（“#nivo slider”）.nivoSlider({
效果：'fade'，//指定如下设置：'fold、fade、sliceDown、slideInLeft'
动画速度：600，//幻灯片转换速度
暂停时间：30000，
directionNav:false，//下一个和上一个
//directionNavHide:true，//仅在悬停时显示
controlNav:true，//1,2,3。。。
controlNavThumbs:true，//将缩略图用于控制导航
controlNavThumbsFromRel:true，//对拇指使用图像rel
pauseOnHover:false，//悬停时停止动画
//字幕容量：0.3，//通用字幕不透明度
开始幻灯片：0，//设置开始幻灯片（0索引）
//键盘导航：true//使用左箭头和右箭头
后更改：函数（）{
当前幻灯片编号=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片；
jQuery（'#nivo slider status>.current slide'）.html（当前幻灯片编号+1）；
}
});
jQuery（“#nivo滑块状态”）.show（）；
jQuery（'#nivo slider status>.total slides'）.html（总计）；
当前幻灯片编号=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片；
jQuery（'#nivo slider status>.current slide'）.html（当前幻灯片编号+1）；
});

我的html（应该在NIVO slider DIV之外）是


属于
您可以将当前幻灯片编号设置为
当前幻灯片编号=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片将1添加到其中，因为索引从0开始

在初始化NIVO滑块时，使用
afterChange
属性更改当前幻灯片编号

所以，我让它工作了

<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>


jQuery（文档）.ready（函数（）{
var total=jQuery（'#nivo slider img'）。长度；
var current\u slide\u no=1；//垃圾
//var rand=Math.floor（Math.random（）*总计）；
jQuery（“#nivo slider”）.nivoSlider({
效果：'fade'，//指定如下设置：'fold、fade、sliceDown、slideInLeft'
动画速度：600，//幻灯片转换速度
暂停时间：30000，
directionNav:false，//下一个和上一个
//directionNavHide:true，//仅在悬停时显示
controlNav:true，//1,2,3。。。
controlNavThumbs:true，//将缩略图用于控制导航
controlNavThumbsFromRel:true，//对拇指使用图像rel
pauseOnHover:false，//悬停时停止动画
//字幕容量：0.3，//通用字幕不透明度
开始幻灯片：0，//设置开始幻灯片（0索引）
//键盘导航：true//使用左箭头和右箭头
后更改：函数（）{
当前幻灯片编号=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片；
jQuery（'#nivo slider status>.current slide'）.html（当前幻灯片编号+1）；
}
});
jQuery（“#nivo滑块状态”）.show（）；
jQuery（'#nivo slider status>.total slides'）.html（总计）；
当前幻灯片编号=jQuery（'nivo slider'）。数据（'nivo:vars'）。当前幻灯片；
jQuery（'#nivo slider status>.current slide'）.html（当前幻灯片编号+1）；
});

我的html（应该在NIVO slider DIV之外）是


属于
谢谢！我发现Nivo slider提供了检索当前幻灯片编号的简单方法，然后我使用它在每次幻灯片更改后计算正确的值。谢谢！我发现Nivo slider提供了检索当前幻灯片编号的简单方法，然后我使用它在每次幻灯片更改后计算正确的值。@Ashframe感谢您的解决方案。但我有一个问题：我试图在一个有多个滑块的页面上添加幻灯片数，但总的幻灯片数是错误的。我能做什么？@marcelo2605使每个滑块的ID都是唯一的，并确保JS代码针对的是正确的实例。@Ashframe感谢您的解决方案。但我有一个问题：我试图在一个有多个滑块的页面上添加幻灯片数，但总的幻灯片数是错误的。我能做什么？@marcelo2605确保每个滑块的ID都是唯一的，并确保JS代码针对的是正确的实例。