我使用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”事件，并且似乎在最后一张幻灯片上处理了第一张幻灯片。
我做错了吗？
谢谢！
“之前循环”事件仅在转换发生之前触发。初始化幻灯片放映时，没有过渡，因此甚至都不会被调用。
同样，由于在更换幻灯片之前会触发“循环前”事件，因此该事件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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句