0

これは自動フェードインを備えた画像のスライドであり、左下の矢印（次の矢印と前の矢印）で制御することもできます。問題は、画像の合計と現在見ている画像の番号（矢印の間の番号付けなど）を表示したいということです。マークアップを作成しましたが、番号のプログラミング方法をたくさん検索しましたが、できませんでした。似たようなものは見つかりません。誰かが私を助けてくれますか？

これはマークアップです：

<div id="slideshow">
    <ul id="slides">
        <li><img src="img/project_image.jpg" /></li>
        <li><img src="img/project_image2.jpg"/></li>
        <li><img src="img/project_image3.jpg" /></li>
        <li><img src="img/project_image4.jpg" /></li>
    </ul>
</div>

<div class="project_navigation" class="clearfix">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <div class="project_number">
            <p>10/12</p>
        </div>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

これが私がスライダーと呼ぶ方法です：

  $("#slideshow").css("overflow", "hidden");

  $("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next'
  });

そして私はこのプラグインを使用しています：http： //jquery.malsup.com/cycle/

4

2 に答える 2

2 
$(function() {
    $('#slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        prev: '#prev',
        next: '#next',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

afterコールバック（または）を使用beforeして、関数でdivの内容を変更できます。この関数は、各遷移の後（または前）に実行されます。

http://jsfiddle.net/spacebeers/VhcgL/

于 2012-10-16T09:10:38.873 に答える
0

このプラグインのonPrevNextEventコールバック関数についてはを参照してください。

$("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next',
      onPrevNextEvent : function(isNext, zeroBasedSlideIndex, slideElement){
           $('.project_number p').text(zeroBasedSlideIndex+'/'+$("ul#slides img").length);
      }
  });

このコードはテストしませんが、サイクルが完了する前にonPrevNextEventが発生する可能性があります。この場合、isNextパラメーターまたはonAfterイベントを確認する必要があります。

于 2012-10-16T09:08:47.773 に答える