0

ajaxを使用して垂直jCarouselを実装する方法を教えてください。

4

1 に答える 1

1

この質問への回答は、jCarousel のドキュメントの最初のページで簡単に見つけることができますが、ここにコピーしておきます ;)

まず、jCarousel をダウンロードし、すべてのソースを<head>タグに追加します。

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

次に、カルーセルが必要な場所にこのコードを配置します。

<ul id="mycarousel" class="jcarousel-skin-name">
   <!-- The content goes in here -->
</ul>

次に、js コードを追加してカルーセルを初期化します。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Carousel gonna be vertical
        vertical : true,
        // AJAX callback
        itemLoadCallback: itemLoadCallbackFunction
    });
});
</script>

次に、動的に新しいアイテムをカルーセルに実際にロードする itemLoadCallBackFunction を作成する必要があります。基本的に、インデックス付きのアイテムを取得したら、iそれをカルーセルに挿入するだけcarousel.add(i, item)です。

更新:

これは、PHP スクリプトを内部に使用した例です。そこからインスピレーションを得ることができます。

于 2009-07-13T20:25:18.087 に答える