1

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

我做错了什么？

谢谢！

4

2 回答 2

6

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

于 2014-02-06T22:23:30.853 回答
1

Cycle 2 includes the caption and captionTemplate options which allow you to add a caption -- including the slide count -- without having to bind to one of Cycle's events.

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

Check out the Cycle 2 API and caption demo page for more detail.

于 2014-03-27T00:30:46.970 回答