0

我有一个查询。通过while循环，我正在显示数据库中的三首随机歌曲并显示它们，但我不想显示所有三首歌曲。

当用户点击第一首歌曲播放图标时，它开始播放，在播放完第一首歌曲后，它会自动转到第二首歌曲，在第二首歌曲播放完毕后，它会转到第三首歌曲。

但是我只想显示一个正在播放的块，例如将显示第一个块，当用户单击第一个块时它将开始播放，但是当第一个完成时它应该向上滚动并且正在播放的第二首歌曲应该对访问者可见。

这是我的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}

这是萤火虫的输出。

它显示三个块。我只想显示正在播放的歌曲，当第一首歌曲播放完毕时，它会自动转到第二首，第一次应该向上滚动，第二首歌曲应该显示

<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 回答