JQuery Cycle 2：如何正确显示第一张幻灯片的索引？答案

【问题标题】：JQuery Cycle 2: how to show the index of the first slide correctly?JQuery Cycle 2：如何正确显示第一张幻灯片的索引？
【发布时间】：2014-03-27 08:30:46
【问题描述】：

我使用的是JQuery Cycle 2，需要在显示幻灯片时显示其索引。

这是 HTML：

 <div id="slideshow"  data-cycle-auto-height="container" data-cycle-slides="> div"  >
    <div>slide 1</div>
    <div>slide 2 </div>
    <div>slide 3 </div>
    <div>slide 4</div>
</div>
<div id="caption"></div>

这里是 Javascript：

$('#slideshow').cycle({
    delay: 0
});

$('#slideshow').on('cycle-before', function (e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var caption =  (optionHash.currSlide + 1) + ' of ' + optionHash.slideCount;
    $('#caption').html(caption);
});

这是小提琴演示：

http://jsfiddle.net/mddc/kKD9S/1/

问题是在页面加载时显示第一张幻灯片，但没有触发“cycle-before”事件，并且第一张幻灯片似乎在最后一张处理。

我做错了什么？

谢谢！

【问题讨论】：

标签： jquery-cycle jquery-cycle2

【解决方案1】：

“cycle-before”事件仅在转换发生之前触发。当你初始化幻灯片时，没有过渡，所以这甚至永远不会被调用。

另外，由于 'cycle-before' 事件在幻灯片更改之前被触发，optionHash.currSlide 将始终是上一张幻灯片，并且由于它是 0 索引，因此您将落后 1。

要解决这些问题，请将您的 cycle-before 事件更改为 cycle-update-view 事件，该事件在幻灯片更新后触发，并且还将在循环初始化后调用：

$('#slideshow').on('cycle-update-view', function (e, optionHash, slideOptionsHash, currSlideEl) {
    var caption = 'Image ' + (optionHash.currSlide + 1) + ' of ' + optionHash.slideCount;
    $('#caption').html(caption);
});

这是它的工作原理：http://jsfiddle.net/ZY4uR/2/

【讨论】：

@Bryan 您的回答包括一些关于使用循环事件的好技巧。我发布了一个更简单的方法，它使用 Cycle 的标题选项以防万一。

【解决方案2】：

Cycle 2 包括 caption 和 captionTemplate 选项，允许您添加标题（包括幻灯片计数），而无需绑定到 Cycle 的事件之一。

$('#slideshow').cycle({
    caption: '#caption',
    captionTemplate: '{{slideNum}} of {{slideCount}}'
});

查看Cycle 2 API 和caption demo page 了解更多详情。

【讨论】：