1

JQuery サイクル 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 には、Cycle のイベントの 1 つにバインドすることなく、キャプション (スライド カウントを含む) を追加できるcaptionおよびオプションが含まれています。captionTemplate

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

詳細については、Cycle 2 APIとキャプションのデモ ページをご覧ください。

于 2014-03-27T00:30:46.970 に答える