Nasıl satır kümesi aralıklarla ayrı ayrı gösterilecek mi?

2 Cevap php

İşte konudur .... Ben bir PHP program okumaya ve bir MySQL veritabanı içeriği (4 metin alanları) görüntüleniyor. Bu kayıtlar sayfada aşağı sırayla görüntülenir. Ne yapmak umut kaydını okur ve metni görüntülemek olup, duraklama ve daha sonra sayfada aynı yerde bir sonraki kayıt görüntülemek için küçük bir zamanlayıcı var. Metin bir slayt gösterisi gibi.

Ben CSS pozisyon komutunu kullanırsanız metin aynı yerde konumlandırılmış ama sadece sağ önceki rekor üzerine yazmaktadır. Bir sayfada belirli bir konuma .... ya bunu yapmanın başka yolu da silmek / içeriğini temizlemek için bir yolu var mı?

2 Cevap

Sen ekran özelliklerini istiyorum; Özellikle, görüntülemek: yok ve display: block. Ekran sahip blok ve dinlenme: none, sonra zamanlayıcı gelişmeler, ekrana ilk açtığınızda: yok ve ikinci görüntülemek için: blok ilk satır ekran sahip başlayın.

Muhtemelen bir sınıf aracılığıyla tamamen bu işlemek istiyorum. Ekrana tüm satırları ayarlayın: block: CSS hiçbiri, sonra ekrana sahip bir "aktif" bir sınıf veya benzeri bir şey kullanmak, bir kerede tek bir satır var.

Lütfen JavaScript kirli işler yapmak için jQuery gibi bir kütüphaneyi kullanarak, o zaman ben ölçüde şey öneririm.

<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 metin sorgu sonuçlarını yankılandı olabilir, ve sadece div içine tüm bu Sırasız liste yer nerede, sadece ihtiyaçlarınızı karşılamak için buna göre boyutları çimdik gerekir.

jsFiddle DEMO

etiketler