Question

我使用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”，并且第一张幻灯片似乎在最后一张幻灯片处理。

我做错了什么？

谢谢！

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

Answer 2

周期2包含caption和captionTemplate选项，可让您添加标题 - 包括幻灯片计数 - 而无需绑定到Cycle的某个事件。

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

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

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

2 个答案: