1

こんな要素持ってる

<div id="screen">
  <div class="post">Post1......etc</div>
  <div class="post">Post2......etc</div>
  <div class="post">Post3......etc</div>
  <div class="post">Post4......etc</div>
  <div class="post">Post5......etc</div>
  <div class="post">Post6......etc</div>
  <div class="post">Post7......etc</div>
  <div class="post">Post8......etc</div>
  <div class="post">Post9......etc</div>
  <div class="post">Post10.....etc</div>
</div>

ただし、画面ボックスでは、サイズは 5 つの要素のみを表示するように制限されています。なので最初はPost1からPost5まで表示されます。残りはオーバーフロー非表示です。2 秒間隔で、次の要素が上にスクロールして表示されます。つまり、2 秒後にこのコンテンツがscreen1 項目上にスクロールされます。これで、Post2 から Post6 が表示されます。そして、これがループのように2秒ごとに続きます。Post10 の後、Post1 が表示され、次に Post2 が表示されます。

これを行う方法がわかりません。jQuery サイクルのドキュメントを読みました: http://jquery.malsup.com/cycle/

しかし、私はこれを行う方法を知りませんでした。この効果は、ニュース スクローラーのようなものです。

助けてください

4

2 に答える 2

1

Cycle は、一度に 1 つの画像しか表示しないため、これに使用するプラグインとしては不適切です。必要と思われるスライド効果を実行しません。非常に人気があり使いやすい jCarousel を試してみてください (多くの例と優れたドキュメント)。

http://sorgalla.com/projects/jcarousel/

一般的に、目的に近いデモがない場合、プラグインが期待どおりに動作しない可能性が高くなります。

于 2012-04-27T10:27:39.057 に答える
0

jCarouselは、ティッカーを表示するための気の利いたプラグインです。ただし、要件に従って表示するには、少しスキニングが必要です。

jCarouselを使用してスクローラーを実行するには、現在のHTML構造に少し変更を加える必要があります。

DIVタイプの構造を順序付けられていないリストに置き換えました。

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li>Post1......etc</li>
    <li>Post2......etc</li>
    <li>Post3......etc</li>
    <li>Post4......etc</li>
    <li>Post5......etc</li>
    <li>Post6......etc</li>
    <li>Post7......etc</li>
    <li>Post8......etc</li>
    <li>Post9......etc</li>
</ul>

このプラグインを非常に基本的に実行するには、jCarouselスクリプトとCSSテーマをページに追加する必要があります（私はjCarouselのTangoテーマを使用しました）。

プラグインの使用方法は次のとおりです。

$(document).ready(function(){
    $('#mycarousel').jcarousel({
        vertical: true,    //Display a vertical carousel
        auto: 2,    //Scroll up automatically after every 2 seconds
        scroll: 1,    //No. of items to scroll up
        visible: 5,    //No. of visible items
        wrap: 'last'    //Go back to the 1st items after you've scrolled down to the last item
    });
});

ただし、必要に応じてプラグインを表示するには、プラグインのCSSを変更する必要があります。

これが私がjCarouselを使って作成したフィドルです：http：//jsfiddle.net/kayen/VFdL8/

于 2012-04-27T10:48:13.133 に答える