0

1つ質問があります。while ループを通じて、データベースから 3 つのランダムな曲を表示して表示していますが、3 つすべてを表示したくありません。

ユーザーが最初の曲の再生アイコンをクリックすると再生が開始され、最初の曲が終了すると自動的に 2 番目の曲に進み、2 番目の曲が完了すると 3 番目の曲に進みます。

しかし、再生中のブロックを 1 つだけ表示したい場合、たとえば最初のブロックが表示され、ユーザーが最初にクリックすると再生が開始されますが、最初に完了するとスクロールアップし、再生中の 2 番目の曲がビジターに表示されるはずです。

これが私のphpコードです：

$res6411 = sql_query("SELECT * from `".tb()."stories` where app='music' order by rand() desc limit 3");
while($row6411 = sql_fetch_array($res6411)) {
    $outputmusic .= ' <div id="playlist"> <div href="'.$row6411['var1'].'" style="width: 520px;" class="item">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">'.$row6411['title'].'</div>
        </div>
        <div class="player inactive"></div>
    </div>        </div>

ここにCSSがあります

b{color:#555;font-weight:bold}.duration{font-size:10px;color:#777}.btn.play{width:16px;height:17px;background-image:url(i/play.gif);display:inline-block}.btn.pause{width:16px;height:17px;background-image:url(i/pause.gif?2)}.btn.paused{width:16px;height:17px;background-image:url(i/play.gif?3);display:inline-block}div.player{width:520px;height:14px;margin-top:5px;padding-left:20px}div.player.inactive{margin-top:0px;margin-bottom:0;border-top:dashed 0px #555}.item .title{-vertical-align:middle}.item .btn{display:inline;float:left;margin-right:5px;cursor:pointer}

これはfirebugからの出力です。

3 つのブロックが表示されます。再生中の曲のみを表示したいのですが、最初の曲の再生が終了すると、自動的に2番目に移動し、最初にスクロールアップして2番目の曲を表示する必要があります

<div id="playlist" class="playlist1"> <div class="item" style="width: 520px;" href="uploads/userfiles/201206/1110_27_aslha.[Songs.PK]Blue-05-BlueTheme.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">Blue Theme</div>
        </div>
        <div class="player inactive"></div>
    </div><div class="item current" style="width: 520px;" href="uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn pause"></div>
            <div class="title">Chale Chalo</div>
        </div>
        <div class="player"><embed width="380" height="5" flashvars="url=uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3&amp;id=playlist1&amp;backgroundColor=16777215&amp;volumeBarWidth=40&amp;progressBarWidth=320&amp;barSpace=20&amp;volumeBarColor=5592405&amp;volumeBarHeight=1&amp;volumeSliderWidth=10&amp;volumeSliderHeight=5&amp;volumeSliderColor=5592405&amp;progressBarHeight=1&amp;progressSliderWidth=10&amp;progressSliderHeight=5&amp;progressSliderColor=5592405&amp;progressBarColor=10066329&amp;bufferColor=5592405" allowscriptaccess="sameDomain" swliveconnect="true" quality="high" name="playerplaylist1" id="playerplaylist1" style="undefined" src="swf/drplayer.swf" type="application/x-shockwave-flash" wmode="transparent"></div>
    </div><div class="item" style="width: 520px;" href="uploads/userfiles/201206/117_49_6l7ag.01KahonaKaho-AmirJama.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">Kaho na Kaho - murder</div>
        </div>
        <div class="player inactive"></div>
    </div></div>
4

1 に答える 1

1

現在再生中のアイテムに「現在の」CSSクラスをすでに設定しているようです。このクラスに基づいて div をアニメーション化するだけで、これを活用できます。すべての非アクティブなアイテムを非表示にする場合は、次のようにします。

あなたのCSSで：

.item{display:none;}

あなたのjqueryで：

//ドキュメントの準備ができたら

$(function(){
    $('.item').slideUp();
    $('.item.current').slideDown(); 
});

//このアニメーションの速度/期間を設定できます。ここで詳細を参照してください: http://api.jquery.com/slideDown/

頭の中でjqueryも参照していることを確認してください。Google からこれにリンクできます: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

于 2012-06-17T15:43:17.720 に答える