アペンド表示：ループ

Question

我々は、我々が使用したい、スライダーを持っている上、その後の李になし。デッドシンプルなもの。しかし、私はもう少しダイナミックになる必要があります。

我々は6にループを設定した場合、基本的に.. ..それはdiv要素の6セットを生成し、PHPのループ上で動作し、ディスプレイのブログロールを、持っています。

が今私の考えは、スライダー内のブログ記事を表示するDIVを入れ、その後、私たちはそれぞれのdivリフレッシュ..ちょっとものとして、その後の投稿を表示することができます。..私はあなたが私が何を意味するか知っていると確信しています。

私はシンプルなフィドルをした... http://jsfiddle.net/ozzy/yEB4V/

は基本的に、私たちは、1つの<li> to </li>

理由が必要である、我々はループが動作するようにLIタグの周りに私たちのPHPをplonk、とすることができます.. LIタグのすべてotehr以降の出現箇所が隠されている明白な理由なし、：スライドを私は持っている問題は、LIが発射される初めてです、それはディスプレイを持っていなければなりません。..応じ

を更新されます。

あなたはフィドルからわかるように、それは最初に、次のにループし、それぞれが更新されていることを示しているので、すべてのLIタグは、離れて最初のLIタグから、表示なしを持っていません。ここ

スクリプト。

var slider = function() { 
    $('#testimonials .slide').filter(':visible').fadeOut(1000,function(){ 
     if($(this).next('li.slide').size()){ 
      $(this).next().fadeIn(2000); 
     } 
     else{ 
      $('#testimonials .slide').eq(0).fadeIn(1000); 
     } 
    }); 
}; 
var interval = setInterval(slider, 2000); 
$('#testimonials .slide').hover(function() { 
    clearInterval(interval); 
}, function() { 
    interval = setInterval(slider, 2000); 
}); 

誰もが私たちのPHPコードのようなものだろうと...これを回避する方法を知っている場合、私は疑問に思う：

<ul id="testimonials"> 
<!-- OUR PHP LOOP--> 
    <li class="slide"> 
    <div> 
     <h1><?php echo $title; ?></h1> 
     <p><?php echo $stuff; ?> 
    </div> 
    </li> 
    <!-- // PHP LOOP --> 
</ul> 

Answer 1

使用：

<ul id="testimonials"> 
<?php foreach($lis as $li) { ?> 
     <li class="slide"<?php if($li == $lis[0]) echo ' style="display:list-item;"' ?>> 
     <div> 
      <h1><?php echo $title; ?></h1> 
      <p><?php echo $stuff; ?> 
     </div> 
     </li> 
<?php } ?> 
    </ul> 

Answer 2

あなたがにjqueryのを使用することができます最初の子を見えるようにする。

$(document).ready(function(){ 
    $('#testimonials :first-child.slide').show(0); 
    //.. rest of the stuff 
}); 

とPHPで、ディスプレイにすべてのdivを設定：なし