我很感激帮助修复我的这个小小的见证盒。现在,我不知道问题是PHP,CSS还是我的标记,因为虽然帖子似乎淡出,但它们都会立刻出现,第一个淡入淡出只是显示第三个帖子。
这是脚本:
<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;
}
答案 0 :(得分:2)
php / markup / javascript中的一个问题是#testimonials
在循环中。它应该不在循环中,因为现在你的.slide
元素没有兄弟姐妹而next()
获得了下一个兄弟(并且每页只能有一个唯一ID;现在你有{{1}个你有推荐信的元素):
#testimonials
答案 1 :(得分:1)
你需要做两件事 - (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/