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

Question

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

这是标记：

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

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

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

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事件。