滑块中的图像计数 (1/10)

Question

这是一张具有自动淡入的图像幻灯片，我也可以通过左下角的箭头（下一个和上一个箭头）来控制它。问题是我想显示所有图像和我们正在观看的图像的当前编号（如箭头之间的编号），我已经做了标记，但我已经搜索了很多关于如何编程数字但不能找不到类似的东西。有人可以帮帮我吗？

这是标记：

<div id="slideshow">
    <ul id="slides">
        <li><img src="img/project_image.jpg" /></li>
        <li><img src="img/project_image2.jpg"/></li>
        <li><img src="img/project_image3.jpg" /></li>
        <li><img src="img/project_image4.jpg" /></li>
    </ul>
</div>

<div class="project_navigation" class="clearfix">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <div class="project_number">
            <p>10/12</p>
        </div>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

这就是我对滑块的称呼：

  $("#slideshow").css("overflow", "hidden");

  $("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next'
  });

我正在使用这个插件： http://jquery.malsup.com/cycle/

Answer 1

$(function() {
    $('#slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        prev: '#prev',
        next: '#next',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

您可以使用after 回调（或before）通过函数更改div 的内容。此函数将在每次转换之后（或之前）运行。

http://jsfiddle.net/spacebeers/VhcgL/

Answer 2

查看本插件的onPrevNextEvent回调函数。

$("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next',
      onPrevNextEvent : function(isNext, zeroBasedSlideIndex, slideElement){
           $('.project_number p').text(zeroBasedSlideIndex+'/'+$("ul#slides img").length);
      }
  });

不测试此代码，但可能在循环完成之前触发 onPrevNextEvent。在这种情况下，您应该查看 isNext 参数或 onAfter 事件。