1

クライアントが必要な数の証言を追加できるように、リピーター フィールドを有効にして、Wordpress 用の Advanced Custom Fields プラグインを使用しています。証言はそれぞれ.quote、フロントエンドの div 内に表示されます。ただし、一度に 2 つの div のみ.quoteを (連続した順序で) 表示し、一度に 2 つずつフェードイン/フェードアウトする必要があります。

このような：

ページの読み込み: 引用符 1 と 2 が表示されます。 7 秒経過: 引用符 3 と 4 が表示されます。 さらに 7 秒経過: 引用符 5 と 6 が表示されます。引用符の数に関係なく (20、5、18 など) 繰り返し、最後の 2 つの.quotediv に達すると、最初から再開します。

ここで私の要点を説明するために、非常に初歩的でひどいコードをまとめました： http://jsfiddle.net/9kg6L/

これには簡単な解決策があると確信していますが、私はまだjQueryを書いている初心者なので、この小さな経験から学びたいと思っています:)

4

2 に答える 2

3

あなたはこのようにすることができます：

var quotes = $('#container .quote');

function cycleQuotes () {
    var current = quotes.filter(".active"), next;
    if (current.length == 0 || (next = current.next().next()).length == 0 ) {
        // first iteration or last, select first two
        next = quotes.slice(0,2);
    }
    current.removeClass('active').fadeOut(400).promise().done(function(){
        next.addClass('active').fadeIn(); 
    });
    setTimeout(cycleQuotes,7*1000);
}
cycleQuotes();

http://jsfiddle.net/9kg6L/1/

奇数がある場合は最後のものだけを表示するのではなく、最後の + を最初に表示し、それから循環して 1 つオフにするようにおそらく改善される可能性があります。

于 2013-04-09T22:15:24.203 に答える