1

だから私は更新時にdivの内容を変更するこのコードを持っています。

ただし、設定した時間内に新しいランダムテキストをフェードインおよびフェードアウトすることも必要です。どこから始めればよいのかわかりません。元のコードは次のとおりです。

HTML：

<div id="logo" class="container">
    <h1>InsiderIndy</h1>
    <p id="myQuote">Slogan</p>
</div>

JavaScript：

<script type="text/javascript">
var myQuotes = new Array();

myQuotes[0] = "Quote1";
myQuotes[1] = "Quote2";
myQuotes[2] = "Quote3"
myQuotes[3] = "Quote4"
myQuotes[4] = "Quote5"
myQuotes[5] = "Quote6"

var myRandom = Math.floor(Math.random()*myQuotes.length);

$('#myQuote').html(myQuotes[myRandom]);
</script>

何か案は？ありがとう！:)

4

3 に答える 3

2

フェード速度、回転間の一時停止時間、および開始位置の調整機能を備えた完全な動作例。また、最後に到達すると最初に戻ります。

編集:私はあなたの質問を初めて読んで、シーケンシャルローテーション用の関数を書きました。答えを更新して、2 つの関数を含めました。1 つはシーケンシャル ローテーション用で、もう 1 つstartSeq()はランダム ローテーション用startRandom()です。

Jsフィドル

function startSeq(i,iSpeed, iPause) {

    $('#myQuote').html(myQuotes[i]);
    $('#myQuote').fadeIn(iSpeed,function() {
        setTimeout(function() {
            $('#myQuote').fadeOut(iSpeed,function() {
                setTimeout(function() {
                     if (i++ == myQuotes.length) i =0;
                    startSeq(i,iSpeed,iPause); 
                },iPause);
            });
        },iPause);
    });
}

function startRandom(iSpeed, iPause) {
    var i = Math.floor(Math.random()*myQuotes.length);
    $('#myQuote').html(myQuotes[i]);
    $('#myQuote').fadeIn(iSpeed,function() {
        setTimeout(function() {
            $('#myQuote').fadeOut(iSpeed,function() {
                setTimeout(function() {
                    startRandom(iSpeed,iPause); 
                },iPause);
            });
        },iPause);
    });
}

//startSeq(0,1000,1000);
startRandom(1000,1000);
于 2013-01-30T00:00:26.240 に答える
1

jQuery の使用:

var refreshMillis = 10 * 1000; // 10 seconds.
setInterval(function() {
  var myRandom = Math.floor(Math.random()*myQuotes.length)
    , $myQuote = $('#myQuote');
  $myQuote.fadeOut(function() {
    $myQuote.html(myQuotes[myRandom]).fadeIn();
  });
}, refreshMillis);

これは動作中のjsFiddleです。

于 2013-01-29T23:57:10.520 に答える
1

jQueryのように見えるので...

(function quote() {
    var myRandom = Math.floor(Math.random()*myQuotes.length);

    $('#myQuote').delay(5000)
                 .fadeOut(500, function() {
                     $(this).text(myQuotes[myRandom])
                            .fadeIn(500, quote);
                  });
})();

時間をかけてjQuery のドキュメントを調べてください。

于 2013-01-29T23:57:02.987 に答える