0

スライダーがあります。使用したいです。シンプルなもの。しかし、もう少しダイナミックになる必要があります。

基本的に、php ループで実行および表示されるブログ ロールがあります。ループを 6 に設定すると、6 セットの div が生成されます。

私の考えでは、ブログ投稿を表示する DIV をスライダー内に配置すると、各 div が更新されるたびに後続の投稿を表示できます。

私は簡単なフィドルを作りました... http://jsfiddle.net/ozzy/yEB4V/

基本的に、必要なのは1つだけです<li> to </li>

その理由は、ループが機能するように LI タグの周りに php をぶつけることができ、それに応じてスライドが更新されるからです..

私が抱えている問題は、LI が最初に起動されたときに、明らかな理由でdisplay:none があってはならないということです.. 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>
4

2 に答える 2

1

jquery を使用して、最初の子を表示することができます。

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

そしてphpで、すべてのdivをdisplay:noneに設定します

于 2012-04-20T04:40:12.750 に答える
0

使用する：

    <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>
于 2012-04-20T04:37:28.403 に答える