1

私は複数のティッカーを見てきましたが、それらはすべて重み付けされていません。タイトルを表示する要素のリストの非常に単純な fadeIn() fadeOut() JQuery ティッカーを使用しています。

<li>Story 1</li>
<li>Story 2</li>
<li>Story 3</li>
<li>Story 4</li>
<li>Story 5</li>

次の関数を見ましたが、必要な要素を表示する方法がわかりません。だから私は非常に単純なものを求めています。必要なのは、ループのフェードアウトとフェードインの間隔だけです。

4

4 に答える 4

4

私は非常にシンプルなフェーダーを作りました。非常に軽量です。画像に使用しましたが、div に変更しました:

脚本

var aniSpd01 = 1000;
var fadeSpd01 = 1000;

$(function() {
    var startIndex = 0;
    var endIndex = $('#aniHolder div').length;
    $('#aniHolder div:first').fadeIn(fadeSpd01);

    window.setInterval(function() {
    $('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
        startIndex++;
        $('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01);

        if (endIndex == startIndex) startIndex = 0;
    }, aniSpd01);
});

HTML

<div id="aniHolder">
    <div>Story 1</div>
    <div>Story 2</div>
    <div>Story 3</div>
</div>

CSS

#aniHolder {width:640px; height:480px; }
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}
于 2011-03-24T13:55:33.207 に答える
0

jQuery WebTickerは、テキスト リンクをローテーションするための非常に優れた代替手段でもあります。回転方向と速度を完全に制御できます。また、CSS を使用して色とサイズを柔軟に設定できます。ティッカーはノンストップ ローテーションを可能にし、最後の項目に到達すると最初の項目がすぐに開始されます。

于 2011-12-08T21:01:25.823 に答える
0

未テスト。これは、現在の要素が完了した後の次の要素で、チェーンされているフェードアウト/フェードインを再スケジュールするだけです。

function fadeTicker( $collection, $elem, interval )
{
     var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length));
     $(elem).fadeOut( function() {
          $(next).fadeIn( function() {
               setTimeout( function() {
                       fadeTicker( $collection, $next, interval );
                   },
                   interval
               );
          });
     );
);

使用されます：

$(function() {
    fadeTicker( $('li'), $('li:first'), 5000 );
}
于 2011-03-24T14:02:01.353 に答える
0

jquery Cycleプラグインを試してください。基本的な機能と効果だけが必要な場合は、シンプルなローテーション テキスト リンクのセットを作成するために使用しました。

于 2011-03-24T13:57:00.780 に答える