jQuery Cycle分页，显示当前/总幻灯片

Question

我想建立一个jQuery Cycle幻灯片播放器，带有“当前幻灯片/总幻灯片”格式的分页，就像这里看到的那样。

我假设我将使用pageAnchorBuilder来显示当前和总幻灯片编号，然后在onAfter中更新当前幻灯片编号？

有人能帮忙吗？谢谢！

- Joe B

---

你选择的答案实际上是不正确的。你可以将幻灯片嵌入到幻灯片容器中的任何元素中（例如<div><ul><li>...），因此仅依靠计算子元素数量在除了最简单的情况下都行不通。 - lucuma

Answer 1

我建议使用jQuery Cycle插件。 想象一下幻灯片是一个有序列表：

<ol class="slides">
    <li class="slide">...</li>
    ...
</ol>
<a id="prev"></a><span id="counter">1 / 1</span><a id="next"></a>

您可以通过调用以下方法获取幻灯片总数:

var total = $('.slides').children().length;

然后，在幻灯片更改后，我们需要更新计数器：

$('.slides').cycle({
    after(el) {
        const currentSlideNo = $(el).index();
        $('#counter').text(currentSlideNo + ' / ' + total);
    },
    prev: $('#prev'),
    next: $('#next'),
});

- Michał Miszczyszyn

---

这可能是一个简单的问题...但是你使用index()方法返回的结果是从0开始计数的...所以我的第一张图片显示为"0 / 5"。有没有一种方法可以使用基于1的计数方法？仅仅在index()后面添加"+1"似乎不太可靠。谢谢！ - Joe B

好的，没问题，我没有想到那个。在 $('#counter').text... 之后将 currentSlideNo 更改为 (currentSlideNo+1)。如果不行，可能需要额外的 parseInt。 - Michał Miszczyszyn

使用 $('#counter').text(currentSlideNo+1' / '+total); 会导致意外的字符串错误。我通过使用 'onPrevNextEvent' 替代 'after' 函数，并设置 var currentSlideNo = $(slideElement).index() +1; 来解决了这个问题。 - Joe B

有一个打字错误... 应该是 (currentSlideNo+1+' / '+total) 当然。 - Michał Miszczyszyn

使用 .index() 不太可靠。after 回调函数会在 options 对象中获取当前的幻灯片。我认为这种方式更好。 - michelgotta

Answer 2

由于jquery cycle插件在after事件中已经返回总数和slideindex，所以无需计算它们。

 after: function(currSlideElement, nextSlideElement, options, forwardFlag) {

    $('#counter').text((options.currSlide + 1) + '/' + (options.slideCount));
 }

这里有一个 jsfiddle 链接：http://jsfiddle.net/lucuma/Dhqdc/2/

- lucuma

---

另一个答案实际上是不正确的，因为您可以提供一个选择器来确定哪些元素是幻灯片，因此 $().children 不起作用。最好使用插件API。 - lucuma