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

你想要显示属性;具体来说，display：none和display：block。从第一行开始显示：块，其余部分显示：none，然后当计时器前进时，将第一行切换为display：none，第二行显示：block。

你可能想要通过一个类纯粹地处理这个问题。设置要在CSS中显示的所有行：none，然后一次只有一行使用“active”类或具有display：block的类似的东西。

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

2 个答案: