0

ここにあるページネーションでjQuery Cycleプラグインを使用しています（ページの約半分）。

現在、私のページネーションはすべて、例のように単純な 1、2、3、4 のタグのように見えます。ただし、代わりにこれらのサムネイル画像を作成したいと思います。

nav div はプラグイン スクリプト自体によって作成されているように見えるため、サムネイルの独自のリストを作成してそれらを nav 要素として指定すると、プラグインはその div に独自のページネーションを追加するだけです。

このプラグインを変更して画像のサムネイルを許可する正しい方法を誰かが知っていますか?

私のコード:

$('#frontimageswap') 
  .before('<div id="nav">') 
  .cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 5000, 
    pager:  '#nav' 

});
4

1 に答える 1

1

jCarusel の代わりにこの素晴らしいプラグインを使用している他の誰かをついに見ることができてうれしいです! あなたがしたいことは、このデモで説明されています。

コードは多かれ少なかれ次のようなものです。

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});

pageAnchorBuilderサイクル内のすべてのアイテムに対して 1 回実行される関数を使用します。ここで、現在のスライドと idx にアクセスできます。マークアップやサムネイルの作成方法については何も言っていませんが、これで始められるはずです。

注: 私はあなたの設定に合わせて設定を変更していません。

于 2013-05-28T00:58:51.517 に答える