0

divページの読み込み時に左側のリストから複数のインスタンスからカルーセルを選択した後、jQuery 関数を更新する必要がありますが、関数が実行されると次のスクローラーが停止します。

コードは次のとおりです。

<script type="text/javascript">
  $(function() {
    $('#carousel_1').carouFredSel({
      width: '100%',
      auto: {
        items: 1
      },
      prev: '#prev1',
      next: '#next1'
    });

    $('#carousel_2').carouFredSel({
      width: '100%',
      auto: {
        items: 1
      },
      prev: '#prev2',
      next: '#next2'
    });

    $('#carousel_3').carouFredSel({
      width: '100%',
      auto: {
        items: 1
      },
      prev: '#prev3',
      next: '#next3'
    });

    var items = $('.list_switch>li>a').each(function () {
      $(this).click(function () {
        //remove previous class and add it to clicked tab
        items.removeClass('current');
        $(this).addClass('current');

        //hide all content divs and show current one
        $('.carousel').hide().eq(items.index($(this))).show('fast');
      });
    });

    // select the first tab on page load       
    items[0].click();
  });
</script>

デモページ: http://blogillucent.alwaysdata.net/aaa/coolcarousel.html

4

1 に答える 1

0

イベントを使用しplayて、選択したスライダーのスライドを再開できます。

例えば、

$("#foo").trigger("play");

こちらのドキュメントを参照してください。

特にあなたのコードに：

var items = $('.list_switch>li>a').each(function () {
  $(this).click(function () {
    //remove previous class and add it to clicked tab
    items.removeClass('current');
    $(this).addClass('current');

    //hide all content divs and show current one
    $('.carousel').hide().eq(items.index($(this))).show('fast');

    // resume the slide on the selected slider
    $('.carousel').eq(items.index($(this))).trigger("play");
  });
});

ドキュメントを読むと、playイベントを使用するためにスライダーを一時停止することが想定されているため、各スライダーの初期化後に、表示されていないものを一時停止する必要があります。

例えば、

$("#foo").trigger("pause");

プラグインのカスタム イベントのコード例をご覧ください。carouFredSel

于 2012-06-03T13:32:29.660 に答える