如何以设定的间隔单独显示行？

Question

这是问题...。我有一个 PHP 程序读取和显示 MySQL 数据库的内容（4 个文本字段）。这些记录在页面下方按顺序显示。我希望做的是读取一条记录并显示文本，有一个小计时器暂停，然后在页面的同一位置显示下一条记录。就像文本幻灯片一样。

如果我使用 CSS 位置命令，文本将定位在同一个位置，但它只是写在前一条记录上。有没有办法清除/删除页面上特定位置的内容....或其他一些方法？

Answer 1

如果你使用像 jQuery 这样的库来做你的 JavaScript 肮脏的工作，那么我会在某种程度上提出一些建议。

<style type="text/css">
    ul {
        margin:0;
        padding:0;
        list-style:none;
        width:300px;
        height:300px;
        overflow:hidden;
        border:#000 1px solid;
    }
    ul li{
        margin:0;
        padding:0;
        list-style:none;
        width:300px;
        height:300px;
        display:none;
    }
    .active{
        display:block;
    }
</style>

<ul>
   <li class="active">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </li>
   <li>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </li>
   <li>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </li>
   <li>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </li>
</ul>​​​​​​​​​​​​​

<script type="text/javascript">
​setInterval(function()
{
   if($('ul li[class="active"]').is(':last-child'))
   {
       $('ul li[class="active"]').removeClass('active');
       $('ul li:first').addClass('active')
   }   
   else
   {
       $('ul li[class="active"]').removeClass('active').next().addClass('active');
   }
},5000);
​</script>

Ipsum 文本可以是您从查询中回显的结果，您可以将整个无序列表放入您的 div 中，您只需要相应地调整大小以满足您的需求。

jsFiddle DEMO

Answer 2

你想要显示属性；具体来说，显示：无和显示：块。从第一行显示：block，其余的显示：none，然后当计时器前进时，将第一行切换为 display:none，第二行切换到 display:block。

您可能只想通过一个类来处理这个问题。在 CSS 中将所有行设置为 display:none，然后一次只有一行，使用“活动”类或类似的具有 display:block 的东西。