Как отображать строки по отдельности с заданным интервалом?

Question

Вот проблема .... У меня есть программа PHP, которая читает и отображает содержимое (4 текстовых поля) базы данных MySQL. Эти записи отображаются последовательно вниз по странице. Что я надеюсь сделать, так это прочитать запись и отобразить текст, сделать небольшой таймер для паузы, а затем отобразить следующую запись в том же месте на странице. Как слайд-шоу текста.

Если я использую команду позиционирования 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. Начните с того, что в первой строке отображается display: block, а в остальных - display: none, затем, когда таймер перемещается, переключите первый на display: none и второй на display: block.

Вы, вероятно, хотите справиться с этим чисто через класс. Установите все отображаемые строки: ни одного в CSS, затем используйте одну строку за раз, используйте «активный» класс или что-то подобное, которое имеет display: block.