8

ニュースローテーターで使用するために Cycle プラグインを使用しています。これは、画像の代わりに Div を使用してスライドを作成していることを意味します。

私の最終的な目標は、通常の 1、2、3、4 などではなく、スライドの最初の H3 タグを返すページャーを作成することです。

これはおそらくマイナーな選択の問題であることはわかっていますが、これまでに使用しているものは次のとおりです。

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

私も次のようなことを試しました：

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

お察しの通り、私はまだ駆け出しです。:/

セレシトンを手伝ってくれる人はいますか??

4

4 に答える 4

14

pagerAnchorBuilder 関数の 1 行を次のように変更します。

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

次の 3 つの変更が必要でした。

slide => jQuery(slide)
jQuery は、指示しない限りヘルパー関数で要素を拡張しないためです。これは、(Element のような) ネイティブのプロトタイプを拡張しない jQuery の残念な副作用です。つまり、コードの 3 分の 1 を jQuery(x) でラップする必要があります。

children("h3") => children("h3").eq(0)
セレクターは一致したオブジェクトの配列を返すため、セレクターを実行した後に最初の配列を取得する必要があります。そうしないと、チェーン内の次のメソッド呼び出しが要素のセット。Jquery は .firstChild("h3") のようなものを提供する必要があります。

textContent => .text()
textContent は mozilla のもので、一部のブラウザでは動作しません。ここで jQuery の .text() メソッドを使用します。この場合、jQuery は何の問題もありませんでした。

于 2009-09-02T23:07:23.930 に答える
4

私はこれを試してみましたが、うまくいきました：

$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
    fx: 'scrollLeft',
    speed: 300,
    timeout: 5000, 
    next: '.next',
    prev: '.previous',
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children('.thumb').children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
    }


});

ソウガタ

于 2011-02-21T14:57:33.750 に答える
4

これは、任意の DOM 要素を検索するためのソリューションです。

pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}
于 2011-03-16T22:40:19.330 に答える
3

この質問は上位に出てくるので、これを投稿します。私のソリューションははるかに堅牢だと思います。

私はpageanchorbuilder全体から離れました、それは何か空想的なことをするのが面倒な方法です。これは私がうまく機能し、親指をより細かく制御できることを私が見つけたものです。

まず、次のようにCycleステージとサムトレイを作成します。

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

次に、このJSを使用して、サムネイルをスライドにリンクします。基本的に、thumb1はスライド1などにリンクします。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

これは、ページ上の複数のサイクルギャラリーでも機能します。スライドは画像である必要はないことに注意してください。それらのステージは次のように構築できます。

    <div class="stage">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
于 2012-05-01T19:46:08.560 に答える