Question

我试图让播放列表可滚动，但没有取得任何成功。我很欣赏任何方向。我动态地从文件中读取.mp3文件，并在div中显示mp3名称。如果我添加超过6个文件，div区域会增加，因此会显示mp3名称，但它会超出/超过控件。如果可能的话，我想让列表在6个名字后滚动。这是我的代码：

HTML：

...
<!-- Create out audio controls -->
<audio id="audio" preload="auto" controls="controls" type="audio/mpeg" ontimeupdate="displayTime(this)">
<source src="data/song1.mp3">song1.mp3" type="audio/mpeg" > 
Unsupported audio format!
</audio>

<!--Audio in our Playlist-->
<div id="Playlist">
<ul class="playlist">
<?php $files = scandir( "data/" ); ?>
<?php foreach ( $files as $file )
if ( $file != '.' && $file != '..' )
     echo "<li audiourl=\"data/$file\"></li>"; ?>

</ul>
</div>
...

CSS：

...

.playlist
{   
position: relative;
background:#666;
top: 295px;
left: 730px;
width:500px;
padding:15px;

}


#Playlist ul.playlist 
{
position: relative;
overflow: auto;

}
...

JS：

...
var playList = document.getElementsByClassName('Playlist');
playList.scrollTop = 400;
...

Answer 1

我的答案更基于PHP，但是：

SELECT primarykey
     , product
     , "Group 1_SEQ"
     , "Group 1_TYP"
     , "Group 1_STA"
     , "Group 1_RES"
     , "Group 2_SEQ"
     , "Group 2_TYP"
     , "Group 2_STA"
     , "Group 2_RES"
     , "Group 3_SEQ"
     , "Group 3_TYP"
     , "Group 3_STA"
     , "Group 3_RES"
     , "Group 4_SEQ"
     , "Group 4_TYP"
     , "Group 4_STA"
     , "Group 4_RES"
     , "Group 5_SEQ"
     , "Group 5_TYP"
     , "Group 5_STA"
     , "Group 5_RES"
  FROM (SELECT primarykey
             , foreignkey
             , TYPE
             , status
             , result
             , product
             , ROW_NUMBER ()
                   OVER (
                       PARTITION BY primarykey ORDER BY orderno, foreignkey
                   )
                   num
          FROM (SELECT 'a' primarykey
                     , 2 foreignkey
                     , 'a' TYPE
                     , 'OK' status
                     , 15 result
                     , 100 orderno
                     , 'shoes' product
                  FROM DUAL
                UNION ALL SELECT 'a' primarykey
                     , 2 foreignkey
                     , 'a' TYPE
                     , 'OK' status
                     , 99 result
                     , 5 orderno
                     , 'shoes' product
                  FROM DUAL
                UNION ALL
                SELECT 'b' primarykey
                     , 3 foreignkey
                     , 'bb' TYPE
                     , 'missing' status
                     , 100 result
                     , 101 orderno
                     , 'socks' product
                  FROM DUAL))
               PIVOT
                   (MAX (foreignkey) AS seq, MAX (TYPE) AS typ, MAX (status) AS sta, MAX (result) AS res
                   FOR num
                   IN (1 as "Group 1", 2 as "Group 2", 3 as "Group 3", 4 as "Group 4", 5 as "Group 5"));

您可以使用<div class="carousel-inner"> <?php $chunky = array_chunk ( $files , 6); foreach ($chunky as $array) { echo '<div class="item"><ul>'; foreach ($array as $name){ echo '<li>' . $name . '</li>'; } echo '</ul></div>'; } ?> </div>将文件拆分为六个组，然后执行上述操作将它们输出到Bootstrap轮播的标记中吗？（https://getbootstrap.com/examples/carousel/）。

编辑：代码示例https://eval.in/692526

如何滚动播放列表以获取音频

1 个答案: