php - 回転する推薦状

Question

私のこの小さな紹介文の箱を修正するのに助けていただければ幸いです。問題がPHPなのか、CSSなのか、それともマークアップだけなのかはわかりません。投稿はフェードしているように見えますが、すべてが一度に表示され、最初のフェードで3番目の投稿が表示されます。

スクリプトは次のとおりです。

    <script language="javascript"> 
jQuery(document).ready(function(){
    jQuery('#testimonials .slide');
    setInterval(function(){
        jQuery('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
            if(jQuery(this).next('.slide').size()){
                jQuery(this).next().fadeIn(1000);
            }
            else{
                jQuery('#testimonials .slide').eq(0).fadeIn(1000);
            }
        });
    },1500);    
}); 
</script>

PHP / HTML：

<?php 
  $loop = new WP_Query(array('post_type' => 'qcamp', 'posts_per_page' => 5)); 
  if ($loop->have_posts()) { ?>
<div id="camps-quote">

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <div id="testimonials">
        <div class="slide">
            <div class="testimonial-quote">
            <?php the_content(); ?>
            </div>
        </div>

    </div>

<?php endwhile; ?>  

</div>
<?php } ?>

そして最後にCSS：

#camps-quote {
    margin-top:50px;
    box-shadow: 7px 7px 7px #C0C0C0; 
    background-color: #7D9EC0; 
    height: 120px; 
    font-size: 16px;
    padding:7px;
    font-family: Arial;
    width:500px;
    margin-left:200px;
    overflow:hidden;
}

#testimonials{

}

#testimonials .slide {color: #fff;}

#testimonials .testimonial-quote {
    padding: 3px 0 0 65px; 
    line-height: 1.5em; 
    font-family:Helvetica, Arial, sans-serif !important; 
    font-size: 16px; 
    font-weight: normal; 
    font-style: italic; 
    margin: 10px 0 20px 0;
}

これが私がテストしているサイトです。

score 2 · Accepted Answer

php / markup / javascriptの1つの問題は#testimonials、ループ内にあることです。.slideこれで、要素に兄弟がなくなり、次の兄弟を取得するため、ループから外れるはずnext()です（また、ページごとに1つの一意のIDしか持てません。これで、#testimonials証言と同じ数の要素があります）：

<div id="testimonials">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

        <div class="slide">
            <div class="testimonial-quote">
            <?php the_content(); ?>
            </div>
        </div>

<?php endwhile; ?>  
</div>

score 1 · Accepted Answer

あなたは2つのことをする必要があります-（1）<div id="testimonials">ループ内からを削除します。（2）最初のページを除くすべてをページの読み込みに設定<div class="slide">しstyle="display:none"ます。これを行うには、基本的なカウンターを設定します（例$i=0; $i++;）。

<?php 
  $loop = new WP_Query(array('post_type' => 'qcamp', 'posts_per_page' => 5)); 
  if ($loop->have_posts()) { ?>
<div id="camps-quote">
<div id="testimonials">
<?php $i=0; // set up a basic counter counter ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

        <div class="slide" <?php if ($i > 0) echo 'style="display:none"'; ?> >
            <div class="testimonial-quote">
            <?php the_content(); ?>
            </div>
        </div>
<?php $i++; // increase the counter ?>
<?php endwhile; ?>  

</div>
</div>
<?php } ?>

jsfiddleをチェックしてください-http ://jsfiddle.net/CEqKu/

php - 回転する推薦状

2 に答える 2

Related

Reference