3

スライドショーごとに3つの新しいID名を作成して参照することなく、それぞれ独自の前、次、およびページャーのナビゲーションコントロールを備えた20の画像ギャラリーを作成するjQueryサイクルプラグインを実装している最中です。各スライドショー。以下の例では、各スライドショーに固有のポケットベルを付けようとしましたが、成功は限られていませんでした。.each（）関数を使用してこれを書くためのより直感的な方法があることを望んでいます。助けてくれる人に事前に感謝します。

HTML :(この例には2つのスライドショーしか含まれていません）

<div class="slideshow_container">
    <div class="work_slideshow">
        <div class="slideshow" id="s1">
            <img class="slide" src="images/port/design_unique_1.jpg" />
            <img class="slide" src="images/port/design_unique_2.jpg" />
            <img class="slide" src="images/port/design_unique_3.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager1"></div>
    </div>

    <div class="work_slideshow">
        <div class="slideshow" id="s2">
            <img class="slide" src="images/port/design_equality_1.jpg" />
            <img class="slide" src="images/port/design_equality_2.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager2"></div>
    </div>
</div>

jQuery：

$('.slideshow').cycle({   
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    prev:'.prev',
    next:'.next',
    timeout:0,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
$('#s1').cycle({
pager:'#pager1'
});
$('#s2').cycle({
pager:'#pager2'
});
4

1 に答える 1

0

編集：質問を正しく読んでいませんでした。どうぞ

$('.slideshow').each(function () {
var pager = $(this).closest('.work_slideshow').find('.pager');
$(this).cycle({
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    timeout:0,
    pager: pager,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
});

このようなもの？

前と次については、前と次のボタンを手動でバインドする方が効率的だと思います。

$('.slideshow_container').on('click','.controls .prev',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('prev');
});

$('.slideshow_container').on('click','.controls .next',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('next');
});

基本的に、すべての次へ/前へボタンに対してシングルクリックハンドラーを用意し、.cycle（'prev'）および.cycle（'next'）を使用して手動でサイクルプラグインにアクセスします。

必要に応じて、ワンクリックハンドラーに縮小することもできます

$('.slideshow_container').on('click','.controls a',function (e) {
  e.preventDefault();
  if ($(this).hasClass('next') {
    $(this).closest('.slideshow').cycle('next');
  } else {
    $(this).closest('.slideshow').cycle('prev');
  }
});
于 2012-12-19T17:54:07.927 に答える