Jquery循环幻灯片在Wordpress博客的页面加载上重叠

Question

我正在使用wordpress插件WP特色内容滑块，它使用jquery.cycle.all.2.72.js。我遇到了一个非常奇怪的视觉故障。在页面加载时，所有幻灯片都显示在一起，然后当脚本在每个幻灯片中循环时，有时它最终会自行修复（直到重新加载页面）。

我在这个论坛上发现了另一个主题，上面列出了相同的问题和解决方案jQuery循环幻灯片在页面加载上重叠

但我不是一个技术人员。。有人能告诉我我需要把上面解决方案中建议的代码放在wordpress自己托管的博客中的哪里吗。

在此处查找示例http://ramblingego.com

内容滑块PHP代码如下

<?php
$direct_path =  get_bloginfo('wpurl')."/wp-content/plugins/wp-featured-content-slider";
?>
<script type="text/javascript">
    jQuery('#featured_slider ul').cycle({ 
        fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
        prev: '.feat_prev',
        next: '.feat_next',
        speed:  800, 
        timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>, 
        pager:  null
    });
</script>
<style>
#featured_slider {
float: left;
margin: 10px 0px;
position: relative;
background-color: #<?php $bg = get_option('feat_bg'); if(!empty($bg)) {echo $bg;} else {echo "FFF";}?>;
border: 1px solid #<?php $border = get_option('feat_border'); if(!empty($border)) {echo $border;} else {echo "CCC";}?>;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
}
#featured_slider ul, #featured_slider ul li {
list-style: none !important;
border: none !important;
float: left;
margin: 10px;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
height: <?php $height = get_option('feat_height'); if(!empty($height)) {echo $height;} else {echo "210";}?>px;
}
#featured_slider .img_right {
float: left;
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
margin-left: 20px;
}
#featured_slider .img_right img {
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
}
#featured_slider .content_left {
float: left;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
width: <?php $text_width = get_option('text_width'); if(!empty($text_width)) {echo $text_width;} else {echo "450";}?>px;
}
#featured_slider .content_left p {
line-height: 22px !important;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
}
#featured_slider .content_left h2 {
font-size: 20px !important;
margin-bottom: 20px;
}
#featured_slider .feat_prev {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: 0px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 20px;
cursor: pointer;
bottom: 30px;
float: left;
}
#featured_slider .feat_prev:hover {
background-position: 0px -16px;
}
#featured_slider .feat_next {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: -17px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 40px;
bottom: 30px;
cursor: pointer;
}
#featured_slider .feat_next:hover {
background-position: -18px -16px;
}
</style>
<div id="featured_slider">

    <ul id="slider">
        <?php
        $sort = get_option('sort'); if(empty($sort)){$sort = "post_date";}
        $order = get_option('order'); if(empty($order)){$order = "DESC";}
        $limit = get_option('limit'); if(empty($limit)){$limit = 350;}
        $points = get_option('points'); if(empty($points)){$points = "...";}
        $post_limit = get_option('limit_posts'); if(empty($limit_posts)){$limit_posts = "-1";}
        global $wpdb;
        global $post;
        $args = array( 'meta_key' => 'feat_slider', 'meta_value'=> '1', 'suppress_filters' => 0, 'post_type' => array('post', 'page'), 'orderby' => $sort, 'order' => $order, 'numberposts'=> $post_limit);
        $myposts = get_posts( $args );

        foreach( $myposts as $post ) :  setup_postdata($post);
            $custom = get_post_custom($post->ID);
            $thumb = get_wp_generated_thumb("feat_slider");
        ?>
        <li><div class="content_left"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><?php echo cut_text_feat(get_the_content(), $limit, $points);?></div><div class="img_right"><a href="<?php the_permalink();?>"><img src="<?php echo $thumb;?>" /></a></div></li>
        <?php endforeach; ?>
    </ul>
    <div class="feat_next"></div>
    <div class="feat_prev"></div>

</div>

Answer 1

如果你不能输出所有带有display:hidden的幻灯片，你可以使用jquery隐藏所有幻灯片（除了第一张），然后循环插件应该完成剩下的工作。

像这样：

<script type="text/javascript">
    jQuery('#featured_slider ul>li:gt(0)').hide(function() {
        jQuery('#featured_slider ul').cycle({ 
        fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
        prev: '.feat_prev',
        next: '.feat_next',
        speed:  800, 
        timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>, 
        pager:  null
    });
});